Icon refactor

src/components/settings/ProfileForm.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { ref } from "vue";
-import { Icon } from "@iconify/vue";
+import Icon from "../Icon.vue";
 
 const props = defineProps<{
   user: {
@@ -61,10 +61,10 @@ async function updateProfile() {
       ]"
     >
       <Icon
-        :icon="
+        :name="
           message.type === 'success'
-            ? 'heroicons:check-circle'
-            : 'heroicons:exclamation-circle'
+            ? 'check-circle'
+            : 'exclamation-circle'
         "
         class="w-6 h-6 shrink-0"
       />
@@ -74,7 +74,7 @@ async function updateProfile() {
     <div class="card bg-base-100 shadow-xl border border-base-200 mb-6">
       <div class="card-body p-4 sm:p-6">
         <h2 class="card-title mb-6 text-lg sm:text-xl">
-          <Icon icon="heroicons:user-circle" class="w-5 h-5 sm:w-6 sm:h-6" />
+          <Icon name="user-circle" class="w-5 h-5 sm:w-6 sm:h-6" />
           Profile Information
         </h2>
 
@@ -128,7 +128,7 @@ async function updateProfile() {
                 v-if="loading"
                 class="loading loading-spinner loading-sm"
               ></span>
-              <Icon v-else icon="heroicons:check" class="w-5 h-5" />
+              <Icon v-else name="check" class="w-5 h-5" />
               Save Changes
             </button>
           </div>