feat(icon): add type support for local SVG collection

playground/nuxt.config.ts

@@ -36,6 +36,7 @@ export default defineNuxtConfig({
   // ssr: false,
 
   icon: {
+    generateLocalSVGTypes: false,
     customCollections: [
       {
         prefix: 'custom1',

src/collections.ts

@@ -1,11 +1,13 @@
 import { basename, join, isAbsolute } from 'node:path'
-import fs from 'node:fs/promises'
-import { logger } from '@nuxt/kit'
+import fs from 'node:fs'
+import fsPromises from 'node:fs/promises'
+import { logger, addTypeTemplate, createResolver } from '@nuxt/kit'
 import type { Nuxt } from '@nuxt/schema'
 import { glob } from 'tinyglobby'
 import type { IconifyJSON } from '@iconify/types'
 import { parseSVGContent, convertParsedSVG } from '@iconify/utils/lib/svg/parse'
 import { isPackageExists } from 'local-pkg'
+import { watch } from 'chokidar'
 import { collectionNames } from './collection-names'
 import type { CustomCollection, ServerBundleOptions, RemoteCollection } from './types'
 
@@ -24,6 +26,109 @@ export async function resolveCollection(
   return collection
 }
 
+export function setupIconTypes(nuxt: Nuxt) {
+  const { resolve } = createResolver(import.meta.url)
+  const outputFile = 'types/local-nuxt-icons.d.ts'
+  // Get collections from @nuxt/icon config
+  const iconConfig = nuxt.options.icon || {}
+  const collections = iconConfig.customCollections || []
+  // Resolve all icon directories
+  const resolvedCollections = collections.map(collection => ({
+    dir: resolve(nuxt.options.srcDir, collection.dir),
+    prefix: collection.prefix,
+  }))
+  // Check for missing directories
+  const missingDirs = resolvedCollections
+    .filter(({ dir }) => !fs.existsSync(dir))
+    .map(({ dir }) => dir)
+  if (missingDirs.length > 0) {
+    console.warn(`Some icon directories do not exist:`, missingDirs)
+  }
+
+  // Function to generate types
+  const generateLocalSVGTypes = () => {
+    // Collect icons from all collections
+    const iconNames = resolvedCollections
+      .filter(({ dir }) => fs.existsSync(dir))
+      .flatMap(({ dir, prefix }) => {
+        const iconFiles = fs.readdirSync(dir)
+        return iconFiles
+          .filter(file => file.endsWith('.svg'))
+          .map(file => `'${prefix}:${basename(file, '.svg')}'`)
+      })
+      .join(' | ')
+
+    addTypeTemplate({
+      filename: outputFile,
+      write: true,
+      getContents: () => `
+// Generated by @nuxt/icon
+import { DefineComponent } from 'vue'
+declare module '@vue/runtime-core' {
+  interface GlobalComponents {
+    'Icon': DefineComponent<{
+      name: ${iconNames}
+    }>
+  }
+}
+declare module '#components' {
+  interface NuxtIconNames {
+${resolvedCollections
+  .filter(({ dir }) => fs.existsSync(dir))
+  .flatMap(({ dir, prefix }) => {
+    const iconFiles = fs.readdirSync(dir)
+    return iconFiles
+      .filter(file => file.endsWith('.svg'))
+      .map(file => `'${prefix}:${basename(file, '.svg')}': true`)
+  })
+  .join(',\n    ')}
+  }
+}
+export {}
+      `.trim(),
+    })
+  }
+
+  // Generate types during dev server preparation
+  nuxt.hook('prepare:types', ({ references }) => {
+    generateLocalSVGTypes()
+    references.push({ path: outputFile })
+  })
+
+  // Generate types on build
+  nuxt.hook('build:before', () => {
+    generateLocalSVGTypes()
+  })
+
+  // Watch for changes in development
+  if (nuxt.options.dev) {
+    // Watch all icon directories
+    const watchers = resolvedCollections
+      .filter(({ dir }) => fs.existsSync(dir))
+      .map(({ dir }) =>
+        watch(dir, {
+          ignoreInitial: true,
+          ignored: /(^|[/\\])\../,
+        }),
+      )
+
+    // Set up watchers for all directories
+    watchers.forEach((watcher) => {
+      watcher.on('all', (event, filepath) => {
+        if (filepath.endsWith('.svg')) {
+          console.log('Icon files changed, regenerating types...')
+          generateLocalSVGTypes()
+        }
+      })
+    })
+
+    // Clean up all watchers on close
+    nuxt.hook('close', () => {
+      watchers.forEach(watcher => watcher.close())
+    })
+  }
+}
+
 export function getCollectionPath(collection: string) {
   return isFullCollectionExists
     ? `@iconify/json/json/${collection}.json`
@@ -67,7 +172,7 @@ export async function loadCustomCollection(collection: CustomCollection, nuxt: N
       name = normalized
     }
 
-    let svg = await fs.readFile(join(dir, file), 'utf-8')
+    let svg = await fsPromises.readFile(join(dir, file), 'utf-8')
     const cleanupIdx = svg.indexOf('<svg')
     if (cleanupIdx > 0)
       svg = svg.slice(cleanupIdx)

src/module.ts

@@ -10,7 +10,7 @@ import { unocssIntegration } from './integrations/unocss'
 import { registerServerBundle } from './bundle-server'
 import { registerClientBundle } from './bundle-client'
 import { NuxtIconModuleContext } from './context'
-import { getCollectionPath } from './collections'
+import { getCollectionPath, setupIconTypes } from './collections'
 
 export type { ModuleOptions, NuxtIconRuntimeOptions as RuntimeOptions }
 
@@ -27,6 +27,7 @@ export default defineNuxtModule<ModuleOptions>({
     componentName: 'Icon',
     serverBundle: 'auto',
     serverKnownCssClasses: [],
+    generateLocalSVGTypes: false,
     clientBundle: {
       icons: [],
     },
@@ -86,6 +87,10 @@ export default defineNuxtModule<ModuleOptions>({
 
     await setupCustomCollectionsWatcher(options, nuxt, ctx)
 
+    if (options.generateLocalSVGTypes) {
+      setupIconTypes(nuxt)
+    }
+
     // Merge options to app.config
     const runtimeOptions = Object.fromEntries(
       Object.entries(options)

src/schema.ts

@@ -103,6 +103,13 @@ export const schema = {
       tsType: 'string[] | null',
     },
   },
+  generateLocalSVGTypes: {
+    $default: false,
+    $schema: {
+      type: 'boolean',
+      description: 'Enable type generation for local custom SVG collections',
+    },
+  },
   provider: {
     $default: undefined,
     $schema: {

src/types.ts

@@ -50,6 +50,12 @@ export interface ModuleOptions extends Partial<Omit<NuxtIconRuntimeOptions, 'cus
    * List of pre-compiled CSS classnames to be used for server-side CSS icon rendering
    */
   serverKnownCssClasses?: string[]
+
+  /**
+   * Enable type generation for local custom SVG collections
+   * @default false
+   */
+  generateLocalSVGTypes?: boolean
 }
 
 export interface CustomCollection extends Pick<IconifyJSON, 'prefix' | 'width' | 'height'> {