From a40f9f977548cbdf1891a8ba133715fcb52aa6d7 Mon Sep 17 00:00:00 2001
From: puriphatt <puriphat@frappet.com>
Date: Thu, 10 Apr 2025 17:22:13 +0700
Subject: [PATCH] refactor: enhance FloatingActionButton to support custom
 icons

---
 src/components/FloatingActionButton.vue | 14 +++++++++++---
 1 file changed, 11 insertions(+), 3 deletions(-)

diff --git a/src/components/FloatingActionButton.vue b/src/components/FloatingActionButton.vue
index aa4c11b4..2d4b8541 100644
--- a/src/components/FloatingActionButton.vue
+++ b/src/components/FloatingActionButton.vue
@@ -1,6 +1,9 @@
 <script setup lang="ts">
+import { Icon } from '@iconify/vue/dist/iconify.js';
+
 defineProps<{
   hideIcon?: boolean;
+  icon?: string;
 }>();
 </script>
 
@@ -10,10 +13,13 @@ defineProps<{
       v-if="!hideIcon"
       id="btn-add"
       padding="sm"
-      icon="mdi-plus"
+      :icon="icon ? undefined : 'mdi-plus'"
       direction="up"
       class="color-btn"
     >
+      <template #icon v-if="icon">
+        <Icon :icon width="24" />
+      </template>
       <slot>
         <q-fab-action
           padding="xs"
@@ -29,10 +35,12 @@ defineProps<{
       fab
       id="btn-add"
       padding="sm"
-      icon="mdi-plus"
+      :icon="icon ? undefined : 'mdi-plus'"
       direction="up"
       class="color-btn"
-    />
+    >
+      <Icon v-if="icon" :icon width="24" />
+    </q-btn>
   </q-page-sticky>
 </template>