fix: handle icons with : in component resolver (#316)

unplugin · Oct 19, 2023 · 342f5af · 342f5af
1 parent 7c19974
commit 342f5af
Show file tree

Hide file tree

Showing 3 changed files with 40 additions and 15 deletions.
diff --git a/examples/vite-vue3/App.vue b/examples/vite-vue3/App.vue
@@ -13,6 +13,7 @@ import RawMdiAlarmOff3 from 'virtual:icons/mdi/alarm-off?raw&width=unset&height=
     <br>
     <h2>Icons</h2>
     <p>
+      <i-mdi:light-flood-down />
       <i-mdi-account />
       <i-fa-solid-dice-five />
       <i-heroicons-outline-menu-alt-2 />

diff --git a/examples/vite-vue3/components.d.ts b/examples/vite-vue3/components.d.ts
@@ -1,11 +1,11 @@
-// generated by unplugin-vue-components
-// We suggest you to commit this file into source control
+/* eslint-disable */
+/* prettier-ignore */
+// @ts-nocheck
+// Generated by unplugin-vue-components
 // Read more: https://github.com/vuejs/core/pull/3399
-import '@vue/runtime-core'
-
 export {}
 
-declare module '@vue/runtime-core' {
+declare module 'vue' {
   export interface GlobalComponents {
     ICarbonAppConnectivity: typeof import('~icons/carbon/app-connectivity')['default']
     ICustomCarA: typeof import('~icons/custom/car-a')['default']
@@ -19,9 +19,11 @@ declare module '@vue/runtime-core' {
     IInlineFoo: typeof import('~icons/inline/foo')['default']
     ILogosVue: typeof import('~icons/logos/vue')['default']
     'IMdi:cactus': typeof import('~icons/mdi/cactus')['default']
+    'IMdi:lightFloodDown': typeof import('~icons/mdi/light-flood-down')['default']
     IMdiAccount: typeof import('~icons/mdi/account')['default']
     IMdiDiceD12: typeof import('~icons/mdi/dice-d12')['default']
     IMdiLightAlarm: typeof import('~icons/mdi-light/alarm')['default']
+    IMdiLightFloodDown: typeof import('~icons/mdi-light/flood-down')['default']
     INotoV1FlagForFlagJapan: typeof import('~icons/noto-v1/flag-for-flag-japan')['default']
     IParkAbnormal: typeof import('~icons/icon-park/abnormal')['default']
     IRiApps2Line: typeof import('~icons/ri/apps2-line')['default']

diff --git a/src/resolver.ts b/src/resolver.ts
@@ -77,18 +77,40 @@ export default function ComponentsResolver(options: ComponentResolverOption = {}
   collections.sort((a, b) => b.length - a.length)
 
   return (name: string) => {
-    const kebab = camelToKebab(name)
-    if (!kebab.startsWith(prefix))
-      return
+    let collection: string
+    let icon: string
+    if (name.includes(':')) {
+      const [iconPrefix, iconSuffix] = name.split(':')
+      collection = camelToKebab(iconPrefix)
+      if (!collection.startsWith(prefix))
+        return
 
-    const slice = kebab.slice(prefix.length)
-    const collection = collections.find(i => slice.startsWith(`${i}-`)) || collections.find(i => slice.startsWith(i))
-    if (!collection)
-      return
+      const slice = collection.slice(prefix.length)
+      const resolvedCollection = collections.find(i => slice.startsWith(`${i}-`)) || collections.find(i => slice.startsWith(i))
+      if (!resolvedCollection)
+        return
+
+      collection = resolvedCollection
+
+      icon = camelToKebab(iconSuffix)
+      if (icon[0] === '-')
+        icon = icon.slice(1)
+    }
+    else {
+      const kebab = camelToKebab(name)
+      if (!kebab.startsWith(prefix))
+        return
+
+      const slice = kebab.slice(prefix.length)
+      const resolvedCollection = collections.find(i => slice.startsWith(`${i}-`)) || collections.find(i => slice.startsWith(i))
+      if (!resolvedCollection)
+        return
 
-    let icon = slice.slice(collection.length)
-    if (icon[0] === '-')
-      icon = icon.slice(1)
+      collection = resolvedCollection
+      icon = slice.slice(resolvedCollection.length)
+      if (icon[0] === '-')
+        icon = icon.slice(1)
+    }
 
     if (!icon)
       return