From be383b5c1c93e44ceb57a31ed4add2a9e23c8313 Mon Sep 17 00:00:00 2001
From: Teisha McRae <mcraeteisha@gmail.com>
Date: Mon, 8 Jul 2024 18:02:58 -0400
Subject: [PATCH] Handle svg icons in Form Accordion component

---
 src/components/FormAccordion.vue | 39 +++++++++++++++++++++-----------
 1 file changed, 26 insertions(+), 13 deletions(-)

diff --git a/src/components/FormAccordion.vue b/src/components/FormAccordion.vue
index 5c78f7ae..8a6c3c41 100644
--- a/src/components/FormAccordion.vue
+++ b/src/components/FormAccordion.vue
@@ -4,17 +4,14 @@
       v-b-toggle="`collapse-${config.name || config.label}`"
       class="accordion-button text-left card-header d-flex align-items-center w-100 pl-3"
       :id="`accordion-button-${config.name || config.label}`"
-      >
-        <i
-          v-if="config.icon"
-          class="fas mr-1 fa-fw"
-          :class="`fa-${config.icon}`"
-        />
-
-        <span class="ml-1 mr-auto">{{ config.label }}</span>
-
-        <i class="when-opened fas fa-chevron-down accordion-arrow ml-auto" />
-        <i class="when-closed fas fa-chevron-right accordion-arrow ml-auto" />
+    >
+      <div v-if="config.icon">
+        <i v-if="fontAwesomeIcon" class="fas mr-1 fa-fw" :class="`fa-${config.icon}`" />
+        <img v-if="svgIcon" :src="config.icon" :alt="config.name + ' icon'" width="18px" class="mr-1" />
+      </div>
+      <span class="ml-1 mr-auto">{{ config.label }}</span>
+      <i class="when-opened fas fa-chevron-down accordion-arrow ml-auto" />
+      <i class="when-closed fas fa-chevron-right accordion-arrow ml-auto" />
     </button>
 
     <b-collapse
@@ -41,7 +38,9 @@ export default {
     return {
       initiallyOpen: Boolean(this.config.initiallyOpen),
       items: [],
-    }
+      fontAwesomeIcon: false,
+      svgIcon: false,
+    };
   },
   watch: {
     value: {
@@ -54,7 +53,21 @@ export default {
       this.$emit('input', this.items);
     },
   },
-}
+  mounted() {
+    this.getAccordionIcon();
+  },
+  methods: {
+    getAccordionIcon() {
+      if (this.config.icon.includes("svg")) {
+        this.fontAwesomeIcon = false;
+        this.svgIcon = true;
+      } else {
+        this.fontAwesomeIcon = true;
+        this.svgIcon = false;
+      }
+    }
+  }
+};
 </script>
 
 <style scoped lang="scss">