chore(Icon): improve component

src/runtime/components/elements/Icon.vue

@@ -1,33 +1,38 @@
 <template>
-  <Iconify v-if="icon" :icon="icon" />
+  <span v-if="isFetching" />
+  <Iconify v-else-if="icon" :icon="icon" />
   <Component :is="component" v-else-if="component" />
   <span v-else>{{ name }}</span>
 </template>
 
 <script setup lang="ts">
-import type { Ref } from 'vue'
 import type { IconifyIcon } from '@iconify/vue'
-import { ref, watch, computed } from 'vue'
+import { computed, ref, watch } from 'vue'
 import { Icon as Iconify } from '@iconify/vue/dist/offline'
 import { loadIcon } from '@iconify/vue'
-import { useNuxtApp } from '#imports'
+import { useNuxtApp, useState } from '#imports'
 
-const nuxtApp = useNuxtApp()
 const props = defineProps({
   name: {
     type: String,
     required: true
   }
 })
-
-const icon: Ref<IconifyIcon | null> = ref(null)
+const nuxtApp = useNuxtApp()
+const state = useState('u-icons', () => ({}))
+const isFetching = ref(false)
+const icon = computed<IconifyIcon | null>(() => state.value?.[props.name])
 const component = computed(() => nuxtApp.vueApp.component(props.name))
-
-icon.value = await loadIcon(props.name).catch(_ => null)
-
-watch(() => props.name, async () => {
-  icon.value = await loadIcon(props.name).catch(_ => null)
-})
+const loadIconComponent = async () => {
+  if (component.value) { return }
+  if (!state.value?.[props.name]) {
+    isFetching.value = true
+    state.value[props.name] = await loadIcon(props.name).catch(() => null)
+    isFetching.value = false
+  }
+}
+watch(() => props.name, loadIconComponent)
+!component.value && (await loadIconComponent())
 </script>
 
 <script lang="ts">