From 666028a443984d925bcbda69e94985385e998ae2 Mon Sep 17 00:00:00 2001
From: Nithin David Thomas <1277421+nithindavid@users.noreply.github.com>
Date: Wed, 29 Dec 2021 18:01:49 +0530
Subject: [PATCH] feat: Adds multiple path support for fluent icons (#3665)

* feat: Adds multiple path support for icons

* Changes dashboard icon
---
 .../components/FluentIcon/DashboardIcon.vue   | 14 ++----
 .../shared/components/FluentIcon/Icon.vue     | 49 +++++++++++++++++++
 .../shared/components/FluentIcon/Index.vue    | 18 +++----
 3 files changed, 61 insertions(+), 20 deletions(-)
 create mode 100644 app/javascript/shared/components/FluentIcon/Icon.vue

diff --git a/app/javascript/shared/components/FluentIcon/DashboardIcon.vue b/app/javascript/shared/components/FluentIcon/DashboardIcon.vue
index c07b9a180..b695aaaa7 100644
--- a/app/javascript/shared/components/FluentIcon/DashboardIcon.vue
+++ b/app/javascript/shared/components/FluentIcon/DashboardIcon.vue
@@ -1,19 +1,15 @@
 <template>
-  <svg
-    :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>
+  <base-icon :size="size" :icon="icon" :type="type" :icons="icons" />
 </template>
 <script>
+import BaseIcon from './Icon';
 import icons from './dashboard-icons.json';
 
 export default {
   name: 'FluentIcon',
+  components: {
+    BaseIcon,
+  },
   props: {
     icon: {
       type: String,
diff --git a/app/javascript/shared/components/FluentIcon/Icon.vue b/app/javascript/shared/components/FluentIcon/Icon.vue
new file mode 100644
index 000000000..e49cb3d6d
--- /dev/null
+++ b/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>
diff --git a/app/javascript/shared/components/FluentIcon/Index.vue b/app/javascript/shared/components/FluentIcon/Index.vue
index 6b108ff52..7bc98a7a7 100644
--- a/app/javascript/shared/components/FluentIcon/Index.vue
+++ b/app/javascript/shared/components/FluentIcon/Index.vue
@@ -1,27 +1,23 @@
 <template>
-  <svg
-    :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>
+  <base-icon :size="size" :icon="icon" :type="type" :icons="icons" />
 </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,
-      default: '20px',
+      type: [String, Number],
+      default: '20',
     },
     type: {
       type: String,