fix: support alias to custom component

Author: atinux

playground/app.config.ts

@@ -4,7 +4,8 @@ export default defineAppConfig({
     aliases: {
       github: 'carbon:logo-github',
       nuxt: 'logos:nuxt-icon',
-      rocket: 'fluent-emoji:rocket'
+      rocket: 'fluent-emoji:rocket',
+      nxt: 'NuxtIcon'
     }
   }
 })

playground/app.vue

@@ -23,11 +23,12 @@
       <Icon name="github" size="24" />
       <Icon name="nuxt" size="24" />
       <Icon name="rocket" size="24" />
+      <Icon name="nxt" size="24" />
     </p>
     <p>
       CSS:
       <IconCSS name="uil:github" size="24" />
-      <IconCSS name="uil:github" size="48" />
+      <IconCSS name="i-ph-rocket" size="48" />
       <IconCSS name="nuxt" size="48" style="color: #00DC82;" />
     </p>
     <p>

src/runtime/Icon.vue

@@ -60,16 +60,15 @@ watch(() => appConfig.nuxtIcon?.iconifyApiOptions, () => {
 const state = useState<Record<string, IconifyIcon | undefined>>('icons', () => ({}))
 const isFetching = ref(false)
 const iconName = computed(() => {
-  let name = props.name
-  if (appConfig.nuxtIcon?.aliases?.[name]) {
-    name = appConfig.nuxtIcon.aliases[name]
+  if (appConfig.nuxtIcon?.aliases?.[props.name]) {
+    return appConfig.nuxtIcon.aliases[props.name]
   }
-
-  return resolveIconName(name)
+  return props.name
 })
-const iconKey = computed(() => [iconName.value.provider, iconName.value.prefix, iconName.value.name].filter(Boolean).join(':'))
+const resolvedIcon = computed(() => resolveIconName(iconName.value))
+const iconKey = computed(() => [resolvedIcon.value.provider, resolvedIcon.value.prefix, resolvedIcon.value.name].filter(Boolean).join(':'))
 const icon = computed<IconifyIcon | undefined>(() => state.value?.[iconKey.value])
-const component = computed(() => nuxtApp.vueApp.component(props.name))
+const component = computed(() => nuxtApp.vueApp.component(iconName.value))
 const sSize = computed(() => {
   // Disable size if appConfig.nuxtIcon.size === false
   // @ts-ignore
@@ -91,7 +90,7 @@ async function loadIconComponent () {
   }
   if (!state.value?.[iconKey.value]) {
     isFetching.value = true
-    state.value[iconKey.value] = await loadIcon(iconName.value).catch(() => undefined)
+    state.value[iconKey.value] = await loadIcon(resolvedIcon.value).catch(() => undefined)
     isFetching.value = false
   }
 }

src/runtime/IconCSS.vue

@@ -27,13 +27,12 @@ const props = defineProps({
 })
 
 const iconName = computed(() => {
-  let name = props.name
-  if (appConfig.nuxtIcon?.aliases?.[name]) {
-    name = appConfig.nuxtIcon.aliases[name]
+  if (appConfig.nuxtIcon?.aliases?.[props.name]) {
+    return appConfig.nuxtIcon.aliases[props.name]
   }
-
-  return resolveIconName(name)
+  return props.name
 })
+const resolvedIcon = computed(() => resolveIconName(iconName.value))
 const iconUrl = computed(() => {
   const customUrl = appConfig.nuxtIcon?.iconifyApiOptions?.url
 
@@ -48,7 +47,7 @@ const iconUrl = computed(() => {
   }
 
   const baseUrl = customUrl || 'https://api.iconify.design'
-  return `url('${baseUrl}/${iconName.value.prefix}/${iconName.value.name}.svg')`
+  return `url('${baseUrl}/${resolvedIcon.value.prefix}/${resolvedIcon.value.name}.svg')`
 })
 const sSize = computed(() => {
   // Disable size if appConfig.nuxtIcon.size === false