fix: iconify component

src/components/DrawerComponent.vue

@@ -2,6 +2,7 @@
 import { ref, watch } from 'vue';
 import { useRouter } from 'vue-router';
 import { useI18n } from 'vue-i18n';
+import { Icon } from '@iconify/vue';
 
 const { t, locale } = useI18n();
 const router = useRouter();
@@ -86,7 +87,7 @@ function navigateTo(label: string, destination: string) {
         <q-item-section id="btn-drawer-back ">
           <q-item-label class="q-pl-lg">
             <div class="box-border-left" />
-            <iconify-icon :icon="v.icon" />
+            <Icon :icon="v.icon" width="24px" class="q-mr-md" />
             <!-- <q-icon :name="v.icon" size="sm" class="q-mr-xs" /> -->
 
             {{ $t(v.label) }}

src/components/home/MenuItem.vue

@@ -2,6 +2,7 @@
 import { useRouter } from 'vue-router';
 import AppBox from 'components/app/AppBox.vue';
 import AppCircle from 'components/app/AppCircle.vue';
+import { Icon } from '@iconify/vue';
 
 const router = useRouter();
 
@@ -44,13 +45,7 @@ function navigateTo(destination: string) {
         :bordered="$q.dark.isActive"
       >
         <i v-if="v.isax" :class="`isax ${v.icon}`" style="font-size: 3rem" />
-        <iconify-icon
-          v-else
-          size="3rem"
-          :icon="v.icon"
-          width="3rem"
-          height="3rem"
-        />
+        <Icon v-else width="3rem" :icon="v.icon" height="3rem" />
       </AppCircle>
       <div class="column items-center q-mt-md text-center">
         <span style="font-weight: var(--font-weight-8)">{{ $t(v.title) }}</span>

src/components/home/PersonCard.vue

@@ -3,15 +3,16 @@ import { ref } from 'vue';
 
 import AppBox from 'components/app/AppBox.vue';
 import AppCircle from '../app/AppCircle.vue';
+import { Icon } from '@iconify/vue';
 
 defineProps<{
   list: {
     name: string;
-    badge: string;
     detail: { label: string; value: string }[];
     male?: boolean;
     female?: boolean;
     disabled?: boolean;
+    badge?: string;
     img?: string;
   }[];
   detailColumnCount?: number;
@@ -35,7 +36,7 @@ const status = ref(false);
       v-for="(v, i) in list"
       :key="i"
     >
-      <div class="q-pa-md column items-center">
+      <div class="q-pa-sm column items-center">
         <!-- kebab menu -->
         <div class="full-width text-right">
           <q-btn flat round padding="sm" icon="mdi-dots-vertical" size="sm">
@@ -92,7 +93,7 @@ const status = ref(false);
             class="avatar"
             style="border: 2px solid var(--border-color)"
           >
-            <q-img :src="`/${v.img}`" width="100%" />
+            <q-img :src="v.img" width="100%" />
             <div class="status-circle">
               <q-icon
                 :name="`mdi-${v.disabled ? 'close' : 'check'}`"
@@ -105,7 +106,7 @@ const status = ref(false);
         <!-- name symbol -->
         <span class="items-center row q-my-sm">
           {{ v.name }}
-          <iconify-icon
+          <Icon
             class="q-pl-sm"
             :class="{
               'symbol-gender': v.male || v.female,
@@ -114,11 +115,12 @@ const status = ref(false);
               'symbol-gender__disable': v.disabled,
             }"
             :icon="`material-symbols:${v.male ? 'male' : 'female'}`"
-            width="20px"
+            width="24px"
           />
-          <!-- <iconify-icon class="locale q-pl-sm" icon="circle-flags:th" /> -->
+          <!-- <Icon class="locale q-pl-sm" icon="circle-flags:th" width="24px" /> -->
         </span>
         <span
+          v-if="v.badge"
           class="badge q-px-sm"
           :class="{
             'bg-gender': v.male || v.female,