feat: Adds multiple path support for fluent icons (#3665)

* feat: Adds multiple path support for icons

* Changes dashboard icon

app/javascript/shared/components/FluentIcon/DashboardIcon.vue

@@ -1,19 +1,15 @@
 <template>
-  <svg
+  <base-icon :size="size" :icon="icon" :type="type" :icons="icons" />
-    :width="size"
-    :height="size"
-    fill="none"
-    viewBox="0 0 24 24"
-    xmlns="http://www.w3.org/2000/svg"
-  >
-    <path :d="icons[`${icon}-${type}`]" fill="currentColor" />
-  </svg>
 </template>
 <script>
+import BaseIcon from './Icon';
 import icons from './dashboard-icons.json';
 
 export default {
   name: 'FluentIcon',
+  components: {
+    BaseIcon,
+  },
   props: {
     icon: {
       type: String,

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

@@ -0,0 +1,49 @@
+<template>
+  <svg
+    :width="size"
+    :height="size"
+    fill="none"
+    viewBox="0 0 24 24"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      v-for="source in pathSource"
+      :key="source"
+      :d="source"
+      fill="currentColor"
+    />
+  </svg>
+</template>
+<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',
+    },
+  },
+
+  computed: {
+    pathSource() {
+      // To support icons with multiple paths
+      const path = this.icons[`${this.icon}-${this.type}`];
+      if (path.constructor === Array) {
+        return path;
+      }
+      return [path];
+    },
+  },
+};
+</script>

app/javascript/shared/components/FluentIcon/Index.vue

@@ -1,27 +1,23 @@
 <template>
-  <svg
+  <base-icon :size="size" :icon="icon" :type="type" :icons="icons" />
-    :width="size"
-    :height="size"
-    fill="none"
-    viewBox="0 0 24 24"
-    xmlns="http://www.w3.org/2000/svg"
-  >
-    <path :d="icons[`${icon}-${type}`]" fill="currentColor" />
-  </svg>
 </template>
 <script>
+import BaseIcon from './Icon';
 import icons from './icons.json';
 
 export default {
   name: 'FluentIcon',
+  components: {
+    BaseIcon,
+  },
   props: {
     icon: {
       type: String,
       required: true,
     },
     size: {
-      type: String,
+      type: [String, Number],
-      default: '20px',
+      default: '20',
     },
     type: {
       type: String,