chatwoot/app/javascript/shared/components/FluentIcon/Icon.vue

<script>
export default {
  props: {
    icon: {
      type: String,
      required: true,
    },
    icons: {
      type: Object,
      required: true,
    },
    size: {
      type: [String, Number],
      default: '20',
    },
    type: {
      type: String,
      default: 'outline',
    },
    viewBox: {
      type: String,
      default: '0 0 24 24',
    },
    iconLib: {
      type: String,
      default: 'fluent',
    },
  },

  computed: {
    pathSource() {
      // To support icons with multiple paths
      const key = `${this.icon}-${this.type}`;
      const path = this.icons[key];

      // If not found, try default icon
      if (path === undefined) {
        const defaultKey = `call-${this.type}`;
        const defaultPath = this.icons[defaultKey];

        // If default icon also not found, return empty array to prevent errors
        if (defaultPath === undefined) {
          return [];
        }

        if (Array.isArray(defaultPath)) {
          return defaultPath;
        }

        return [defaultPath];
      }

      if (Array.isArray(path)) {
        return path;
      }

      return [path];
    },
  },
};
</script>

<template>
  <svg
    v-if="iconLib === 'fluent'"
    :width="size"
    :height="size"
    fill="none"
    :viewBox="viewBox"
    xmlns="http://www.w3.org/2000/svg"
  >
    <path
      v-for="source in pathSource"
      :key="source"
      :d="source"
      fill="currentColor"
    />
  </svg>
  <svg
    v-else
    :width="size"
    :height="size"
    fill="none"
    :viewBox="viewBox"
    xmlns="http://www.w3.org/2000/svg"
  >
    <g v-for="(pathData, index) in pathSource" :key="index">
      <path
        :key="pathData"
        :d="pathData"
        stroke="currentColor"
        stroke-width="1.66667"
      />
    </g>
  </svg>
</template>