From c1a7629e2988886633f989244fc2abfd580c6e1f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?S=C3=A9bastien=20Chopin?= <seb@nuxtjs.com>
Date: Thu, 19 May 2022 12:08:13 +0200
Subject: [PATCH] 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 | 20 +++++++++++++-------
 1 file changed, 13 insertions(+), 7 deletions(-)

diff --git a/src/runtime/components/elements/Icon.vue b/src/runtime/components/elements/Icon.vue
index 9083142d..acb17511 100644
--- a/src/runtime/components/elements/Icon.vue
+++ b/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>