fix: register custom collections handler, fix #322

Author: antfu

Diff for: playground/nuxt.config.ts

@@ -63,7 +63,7 @@ export default defineNuxtConfig({
         'logos:vitejs',
         'ph:acorn-bold',
       ],
-      includeCustomCollections: true,
+      includeCustomCollections: false,
       scan: true,
     },
   },

Diff for: src/module.ts

@@ -96,6 +96,9 @@ export default defineNuxtModule<ModuleOptions>({
     nuxt.options.appConfig.icon = Object.assign(
       nuxt.options.appConfig.icon || {},
       runtimeOptions,
+      {
+        customCollections: options.customCollections?.map(i => i.prefix),
+      },
     )
     // Define types for the app.config compatible with Nuxt Studio
     nuxt.hook('schema:extend', (schemas) => {

Diff for: src/runtime/plugin.ts

@@ -1,12 +1,13 @@
-import { addAPIProvider, _api, disableCache } from '@iconify/vue'
+import { addAPIProvider, _api, disableCache, setCustomIconsLoader } from '@iconify/vue'
 import type { Plugin } from 'nuxt/app'
+import type { IconifyJSON } from '@iconify/types'
 import type { NuxtIconRuntimeOptions } from '../types'
 import { defineNuxtPlugin, useAppConfig, useRuntimeConfig } from '#imports'
 
 export default defineNuxtPlugin({
   name: '@nuxt/icon',
   setup() {
-    const config = useRuntimeConfig()
+    const configs = useRuntimeConfig()
     const options = useAppConfig().icon as NuxtIconRuntimeOptions
 
     // eslint-disable-next-line @typescript-eslint/ban-ts-comment
@@ -17,7 +18,7 @@ export default defineNuxtPlugin({
 
     const resources: string[] = []
     if (options.provider === 'server') {
-      const baseURL = config.app?.baseURL?.replace(/\/$/, '') ?? ''
+      const baseURL = configs.app?.baseURL?.replace(/\/$/, '') ?? ''
 
       resources.push(baseURL + (options.localApiEndpoint || '/api/_nuxt_icon'))
       if (options.fallbackToApi === true || options.fallbackToApi === 'client-only') {
@@ -28,6 +29,30 @@ export default defineNuxtPlugin({
       resources.push(options.iconifyApiEndpoint!)
     }
 
+    async function customIconLoader(icons: string[], prefix: string): Promise<IconifyJSON | null> {
+      try {
+        const data = await $fetch(resources[0] + '/' + prefix + '.json', {
+          query: {
+            icons: icons.join(','),
+          },
+        }) as IconifyJSON
+        // Simple data validation
+        if (!data || data.prefix !== prefix || !data.icons)
+          throw new Error('Invalid data' + JSON.stringify(data))
+        return data as IconifyJSON
+      }
+      catch (e) {
+        console.error('Failed to load custom icons', e)
+        return null
+      }
+    }
+
     addAPIProvider('', { resources })
+
+    // Register custom collections handlers
+    for (const prefix of options.customCollections || []) {
+      if (prefix)
+        setCustomIconsLoader(customIconLoader, prefix)
+    }
   },
 }) as Plugin

Diff for: src/schema-types.ts

@@ -86,6 +86,12 @@ export interface NuxtIconRuntimeOptions {
    */
   collections: string[] | null
 
+  /**
+   * Custom Icon Collections
+   *
+   */
+  customCollections: string[] | null
+
   /**
    * Icon Provider
    *
@@ -133,7 +139,7 @@ export interface NuxtIconRuntimeOptions {
   /**
    * Fetch Timeout
    *
-   * Set the timeout for fetching icons on SSR.
+   * Set the timeout for fetching icons.
    *
    * @default 1500
    */

Diff for: src/schema.ts

@@ -95,6 +95,14 @@ export const schema = {
       tsType: 'string[] | null',
     },
   },
+  customCollections: {
+    $default: null,
+    $schema: {
+      title: 'Custom Icon Collections',
+      tags: ['@studioIcon material-symbols:format-list-bulleted'],
+      tsType: 'string[] | null',
+    },
+  },
   provider: {
     $default: undefined,
     $schema: {

Diff for: src/types.ts

@@ -17,7 +17,7 @@ export interface NuxtIconRuntimeServerOptions {
   serverKnownCssClasses?: string[]
 }
 
-export interface ModuleOptions extends Partial<Omit<NuxtIconRuntimeOptions, 'customize'>> {
+export interface ModuleOptions extends Partial<Omit<NuxtIconRuntimeOptions, 'customize' | 'customCollections'>> {
   /**
    * Name of the component to be registered
    * @default 'Icon'