fix: handle custom provider with iconifyOptions

nuxt · Nov 7, 2023 · c77bcef · c77bcef
1 parent fb36c48
commit c77bcef
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 3 deletions.
diff --git a/src/runtime/Icon.vue b/src/runtime/Icon.vue
@@ -67,7 +67,7 @@ const iconName = computed(() => {
 
   return resolveIconName(name)
 })
-const iconKey = computed(() => `${iconName.value.prefix}:${iconName.value.name}`)
+const iconKey = computed(() => [iconName.value.provider, iconName.value.prefix, iconName.value.name].filter(Boolean).join(':'))
 const icon = computed<IconifyIcon | undefined>(() => state.value?.[iconKey.value])
 const component = computed(() => nuxtApp.vueApp.component(props.name))
 const sSize = computed(() => {
@@ -91,7 +91,7 @@ async function loadIconComponent () {
   }
   if (!state.value?.[iconKey.value]) {
     isFetching.value = true
-    state.value[iconKey.value] = await loadIcon({ provider: '', ...iconName.value }).catch(() => undefined)
+    state.value[iconKey.value] = await loadIcon(iconName.value).catch(() => undefined)
     isFetching.value = false
   }
 }

diff --git a/src/runtime/utils/index.ts b/src/runtime/utils/index.ts
@@ -1,8 +1,14 @@
 // @ts-ignore
 import iconCollections from '#icon-collections'
 
-export function resolveIconName (name: string) {
+export function resolveIconName (name: string = '') {
   let prefix
+  let provider = ''
+
+  if (name[0] === '@' && name.includes(':')) {
+    provider = name.split(':')[0].slice(1)
+    name = name.split(':').slice(1).join(':')
+  }
 
   if (name.startsWith('i-')) {
     name = name.replace(/^i-/, '')
@@ -22,6 +28,7 @@ export function resolveIconName (name: string) {
   }
 
   return {
+    provider,
     prefix: prefix || '',
     name: name || ''
   }