feat(Icon): support custom component and emoji

Co-Authored-By: Benjamin Canac <canacb1@gmail.com>
Co-Authored-By: Sylvain Marroufin <marroufin.sylvain@gmail.com>

src/runtime/components/elements/Icon.vue

@@ -1,25 +1,31 @@
 <template>
-  <Icon :icon="icon" />
+  <Iconify v-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 } from 'vue'
-import { Icon } from '@iconify/vue/dist/offline'
+import { ref, watch, computed } from 'vue'
+import { Icon as Iconify } from '@iconify/vue/dist/offline'
 import { loadIcon } from '@iconify/vue'
+import { useNuxtApp } from '#imports'
 
+const nuxtApp = useNuxtApp()
 const props = defineProps({
   name: {
-    type: [String, Object],
+    type: String,
     required: true
   }
 })
 
-const icon: Ref<IconifyIcon> = ref(null)
-icon.value = await loadIcon(props.name)
+const icon: Ref<IconifyIcon | null> = ref(null)
+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)
+  icon.value = await loadIcon(props.name).catch(_ => null)
 })
 </script>