feat: allow using IconifyJSON as custom collection (#366)

Co-authored-by: Anthony Fu <github@antfu.me>

Author: Aareksio

README.md

@@ -181,6 +181,28 @@ Then you can use the icons like this:
 </template>
 ```
 
+You can also pass a full custom `IconifyJSON` object:
+
+```ts
+export default defineNuxtConfig({
+  modules: [
+    '@nuxt/icon'
+  ],
+  icon: {
+    customCollections: [
+      {
+        prefix: 'paid-icons',
+        icons: {
+          'nuxt': { body: '<path d="M281.44 ... />' },
+        },
+        width: 512,
+        height: 512,
+      }
+    ],
+  },
+})
+```
+
 Note that custom local collections require you to have a server to serve the API. When setting `ssr: false`, the provider will default to the Iconify API (which does not have your custom icons). If you want to build a SPA with server endpoints, you can explicitly set `provider: 'server'`:
 
 ```ts

playground/components/ShowcaseFixture.vue

@@ -108,6 +108,15 @@ defineProps<{
         :customize
       />
     </p>
+    <p>
+      Custom icons with `prefix: 'json-collection'` from IconifyJSON:
+      <Icon
+        name="json-collection:nuxt-v3"
+        size="32"
+        :mode
+        :customize
+      />
+    </p>
     <p>
       Custom icons from layer:
       <Icon

playground/nuxt.config.ts

@@ -52,6 +52,16 @@ export default defineNuxtConfig({
         dir: './icons/no-prefix',
         normalizeIconName: false,
       },
+      {
+        prefix: 'json-collection',
+        icons: {
+          'nuxt-v3': {
+            body: '<path d="M281.44 397.667H438.32C443.326 397.667 448.118 395.908 452.453 393.427C456.789 390.946 461.258 387.831 463.76 383.533C466.262 379.236 468.002 374.36 468 369.399C467.998 364.437 466.266 359.563 463.76 355.268L357.76 172.947C355.258 168.65 352.201 165.534 347.867 163.053C343.532 160.573 337.325 158.813 332.32 158.813C327.315 158.813 322.521 160.573 318.187 163.053C313.852 165.534 310.795 168.65 308.293 172.947L281.44 219.587L227.733 129.13C225.229 124.834 222.176 120.307 217.84 117.827C213.504 115.346 208.713 115 203.707 115C198.701 115 193.909 115.346 189.573 117.827C185.238 120.307 180.771 124.834 178.267 129.13L46.8267 355.268C44.3208 359.563 44.0022 364.437 44 369.399C43.9978 374.36 44.3246 379.235 46.8267 383.533C49.3288 387.83 53.7979 390.946 58.1333 393.427C62.4688 395.908 67.2603 397.667 72.2667 397.667H171.2C210.401 397.667 238.934 380.082 258.827 346.787L306.88 263.4L332.32 219.587L410.053 352.44H306.88L281.44 397.667ZM169.787 352.44H100.533L203.707 174.36L256 263.4L221.361 323.784C208.151 345.387 193.089 352.44 169.787 352.44Z" fill="#00DC82"/>',
+          },
+        },
+        width: 512,
+        height: 512,
+      },
     ],
     serverBundle: 'remote',
     fallbackToApi: 'server-only',

playground/test/nuxt/output/fixtures.html

@@ -290,6 +290,25 @@
           </g>
         </svg>
       </p>
+      <p>
+        Custom icons with `prefix: 'json-collection'` from IconifyJSON:
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          xmlns:xlink="http://www.w3.org/1999/xlink"
+          aria-hidden="true"
+          role="img"
+          class="iconify iconify--json-collection"
+          style="font-size: 32px"
+          width="1em"
+          height="1em"
+          viewBox="0 0 512 512"
+        >
+          <path
+            d="M281.44 397.667H438.32C443.326 397.667 448.118 395.908 452.453 393.427C456.789 390.946 461.258 387.831 463.76 383.533C466.262 379.236 468.002 374.36 468 369.399C467.998 364.437 466.266 359.563 463.76 355.268L357.76 172.947C355.258 168.65 352.201 165.534 347.867 163.053C343.532 160.573 337.325 158.813 332.32 158.813C327.315 158.813 322.521 160.573 318.187 163.053C313.852 165.534 310.795 168.65 308.293 172.947L281.44 219.587L227.733 129.13C225.229 124.834 222.176 120.307 217.84 117.827C213.504 115.346 208.713 115 203.707 115C198.701 115 193.909 115.346 189.573 117.827C185.238 120.307 180.771 124.834 178.267 129.13L46.8267 355.268C44.3208 359.563 44.0022 364.437 44 369.399C43.9978 374.36 44.3246 379.235 46.8267 383.533C49.3288 387.83 53.7979 390.946 58.1333 393.427C62.4688 395.908 67.2603 397.667 72.2667 397.667H171.2C210.401 397.667 238.934 380.082 258.827 346.787L306.88 263.4L332.32 219.587L410.053 352.44H306.88L281.44 397.667ZM169.787 352.44H100.533L203.707 174.36L256 263.4L221.361 323.784C208.151 345.387 193.089 352.44 169.787 352.44Z"
+            fill="#00DC82"
+          ></path>
+        </svg>
+      </p>
       <p>
         Custom icons from layer:
         <svg

src/collections.ts

@@ -33,7 +33,22 @@ export function getCollectionPath(collection: string) {
 // https://github.com/iconify/iconify/blob/2274c033b49c01a50dc89b490b89d803d19d95dc/packages/utils/src/icon/name.ts#L15-L18
 const validIconNameRE = /^[a-z0-9]+(?:-[a-z0-9]+)*$/
 
-export async function loadCustomCollection(collection: CustomCollection, nuxt: Nuxt): Promise<IconifyJSON> {
+export async function loadCustomCollection(
+  collection: IconifyJSON | CustomCollection,
+  nuxt: Nuxt,
+): Promise<IconifyJSON> {
+  if ('dir' in collection) {
+    return parseCustomCollection(collection, nuxt)
+  }
+
+  logger.success(`Nuxt Icon loaded local collection \`${collection.prefix}\` with ${Object.keys(collection.icons).length} icons`)
+  return collection
+}
+
+async function parseCustomCollection(
+  collection: CustomCollection,
+  nuxt: Nuxt,
+): Promise<IconifyJSON> {
   const dir = isAbsolute(collection.dir)
     ? collection.dir
     : join(nuxt.options.rootDir, collection.dir)

src/context.ts

@@ -152,20 +152,22 @@ export class NuxtIconModuleContext {
     // Filter out the `i-` prefix and deduplicate
     const userIcons = new Set((this.options.clientBundle?.icons || []).map(i => i.replace(/^i[-:]/, '')))
 
+    let customCollections: IconifyJSON[] = []
+    if (this.options.customCollections?.length) {
+      customCollections = await this.loadCustomCollection()
+    }
+
     if (scan && !this.scanner) {
-      this.scanner = new IconUsageScanner(scan)
+      const additionalCollections = customCollections.map(c => c.prefix)
+      const scanOptions = scan === true ? { additionalCollections } : { additionalCollections, ...scan }
+      this.scanner = new IconUsageScanner(scanOptions)
       await this.scanner.scanFiles(this.nuxt, this.scannedIcons)
     }
 
     const icons = new Set<string>([...userIcons, ...this.scannedIcons])
 
     await this.nuxt.callHook('icon:clientBundleIcons', icons)
 
-    let customCollections: IconifyJSON[] = []
-    if (includeCustomCollections && this.options.customCollections?.length) {
-      customCollections = await this.loadCustomCollection()
-    }
-
     if (!icons.size && !customCollections.length) {
       return {
         count: 0,
@@ -179,7 +181,23 @@ export class NuxtIconModuleContext {
     const { getIconData } = await import('@iconify/utils')
     const { loadCollectionFromFS } = await import('@iconify/utils/lib/loader/fs')
 
+    const failed: string[] = []
+    let count = 0
+
+    const customCollectionNames = new Set(customCollections.map(c => c.prefix))
     const collections = new Map<string, IconifyJSON>()
+
+    function loadCollection(prefix: string) {
+      if (customCollectionNames.has(prefix)) {
+        const collection = customCollections.find(c => c.prefix === prefix)
+        if (collection) {
+          return Promise.resolve(collection)
+        }
+      }
+
+      return loadCollectionFromFS(prefix)
+    }
+
     function addIcon(prefix: string, name: string, data: IconifyIcon) {
       let collection = collections.get(prefix)
       if (!collection) {
@@ -189,17 +207,17 @@ export class NuxtIconModuleContext {
         }
         collections.set(prefix, collection)
       }
+      if (!collection.icons[name]) {
+        count += 1
+      }
       collection.icons[name] = data
     }
 
-    const failed: string[] = []
-    let count = 0
-
     await Promise.all([...icons].map(async (icon) => {
       try {
         const [prefix, name] = icon.split(':')
         if (!iconifyCollectionMap.has(prefix))
-          iconifyCollectionMap.set(prefix, loadCollectionFromFS(prefix))
+          iconifyCollectionMap.set(prefix, loadCollection(prefix))
 
         let data: IconifyIcon | null = null
         const collection = await iconifyCollectionMap.get(prefix)
@@ -213,7 +231,6 @@ export class NuxtIconModuleContext {
           }
         }
         else {
-          count += 1
           addIcon(prefix, name, data)
         }
       }
@@ -223,10 +240,13 @@ export class NuxtIconModuleContext {
       }
     }))
 
-    if (customCollections.length) {
-      customCollections.flatMap(collection => Object.entries(collection.icons)
-        .map(([name, data]) => {
-          addIcon(collection.prefix, name, data)
+    if (includeCustomCollections && customCollections.length) {
+      customCollections.flatMap(collection => Object.keys(collection.icons)
+        .map((name) => {
+          const data = getIconData(collection, name)
+          if (data) {
+            addIcon(collection.prefix, name, data)
+          }
         }))
     }
 

src/module.ts

@@ -182,7 +182,7 @@ async function setupCustomCollectionsWatcher(options: ModuleOptions, nuxt: Nuxt,
     return
 
   let viteDevServer: ViteDevServer
-  const collectionDirs = await Promise.all(options.customCollections.map(x => nuxtResolvePath(x.dir)))
+  const collectionDirs = await Promise.all(options.customCollections.filter(x => 'dir' in x).map(x => nuxtResolvePath(x.dir)))
 
   if (options.clientBundle?.includeCustomCollections) {
     addVitePlugin({

src/types.ts

@@ -44,7 +44,7 @@ export interface ModuleOptions extends Partial<Omit<NuxtIconRuntimeOptions, 'cus
   /**
    * Custom icon collections
    */
-  customCollections?: CustomCollection[]
+  customCollections?: (CustomCollection | IconifyJSON)[]
 
   /**
    * List of pre-compiled CSS classnames to be used for server-side CSS icon rendering