Type safety

package.json

@@ -30,10 +30,13 @@
     "prepack": "nuxt-module-build",
     "dev": "nuxi dev playground",
     "dev:build": "nuxi build playground",
-    "dev:prepare": "nuxt-module-build --stub && nuxi prepare playground"
+    "dev:prepare": "nuxt-module-build --stub && nuxi prepare playground",
+    "lint": "nuxi typecheck && eslint ."
   },
   "dependencies": {
-    "@nuxt/kit": "^3.0.0"
+    "@nuxt/kit": "^3.0.0",
+    "glob": "^10.2.2",
+    "mkdirp": "^3.0.1"
   },
   "devDependencies": {
     "@nuxt/module-builder": "^0.2.1",

playground/nuxt.config.ts

@@ -5,7 +5,7 @@ export default defineNuxtConfig({
   modules: [
     NuxtIcons
   ],
-  NuxtIcons: {
+  nuxtIcons: {
     addPlugin: true
   }
 })

src/generator/index.ts

@@ -0,0 +1,45 @@
+import { Nuxt } from '@nuxt/schema/dist/index'
+import chalk from 'chalk'
+import { saveGeneratedFile } from './output'
+import { constructIconNames } from './parser'
+
+type CreateTypedIconsArgs = {
+  nuxt: Nuxt;
+  location: string | null;
+  fileExtension: string;
+  isHookCall?: boolean;
+};
+
+export async function CreateTypedIcons ({
+  nuxt,
+  location,
+  fileExtension,
+  isHookCall = false
+}: CreateTypedIconsArgs): Promise<void> {
+  try {
+    if (!isHookCall) {
+      if (location) {
+        nuxt.hook('builder:watch', (event, watchedPath) => {
+          if (watchedPath.startsWith(location)) {
+            CreateTypedIcons({ nuxt, location, fileExtension, isHookCall: true })
+          }
+        })
+      }
+
+      nuxt.hook('modules:done', () => {
+        CreateTypedIcons({ nuxt, location, fileExtension, isHookCall: true })
+      })
+
+      return
+    }
+
+    if (location) {
+      const iconNames = await constructIconNames(nuxt.options.rootDir, location, fileExtension)
+      await saveGeneratedFile(nuxt, iconNames)
+    } else {
+      await saveGeneratedFile(nuxt, null)
+    }
+  } catch (e) {
+    console.error(chalk.red('Error while generating icons definition model'), '\n' + e)
+  }
+}

src/generator/output.ts

@@ -0,0 +1,22 @@
+import { Nuxt } from '@nuxt/schema/dist/index'
+import { addTemplate } from '@nuxt/kit'
+
+export const saveGeneratedFile = (nuxt: Nuxt, iconNames: string[] | null) => {
+  addTemplate({
+    filename: 'nuxt-icons.d.ts',
+    getContents: () => {
+      return `// @ts-nocheck
+// eslint-disable
+/** 
+ * ---------------------------------------------------
+ * 🚗 Generated by nuxt-icons. Do not modify !
+ * ---------------------------------------------------
+ * */
+
+declare module '#app' {
+  type NuxtIconName = ${iconNames === null ? 'string' : iconNames.map(p => `"${p.replace(/[\\"]/g, '\\$&')}"`).join(' | ')}
+}
+`
+    }
+  })
+}

src/generator/parser.ts

@@ -0,0 +1,3 @@
+import { glob } from 'glob'
+
+export const constructIconNames = async (path: string, location: string, fileExtension: string) => (await glob(`${location}/**/**.${fileExtension}`, { cwd: path })).map(p => p.substring(location.length + 1)).map(p => p.substring(0, p.length - 4))

src/module.ts

@@ -1,7 +1,14 @@
 import { defineNuxtModule, createResolver, addComponent } from '@nuxt/kit'
+import { CreateTypedIcons } from './generator'
 
 export interface ModuleOptions {
   // dir: string
+  /**
+   * Enables path autocomplete and path validity for programmatic validation
+   *
+   *  @default true
+   */
+  pathCheck?: boolean;
 }
 
 export default defineNuxtModule<ModuleOptions>({
@@ -12,12 +19,26 @@ export default defineNuxtModule<ModuleOptions>({
       nuxt: '^3.0.0'
     }
   },
+  defaults: {
+    pathCheck: true
+  },
   setup (options, nuxt) {
     const { resolve } = createResolver(import.meta.url)
     addComponent({
       name: 'nuxt-icon',
       global: true,
       filePath: resolve('./runtime/components/nuxt-icon.vue')
     })
+
+    // Force register of type declaration
+    nuxt.hook('prepare:types', ({ references }) => {
+      references.push({ path: resolve(nuxt.options.buildDir, 'nuxt-icons.d.ts') })
+    })
+
+    if (options.pathCheck) {
+      CreateTypedIcons({ nuxt, location: 'assets/icons', fileExtension: 'svg' })
+    } else {
+      CreateTypedIcons({ nuxt, location: null, fileExtension: '' })
+    }
   }
 })

src/runtime/components/nuxt-icon.vue

@@ -7,10 +7,11 @@
 </template>
 
 <script setup lang="ts">
+import { NuxtIconName } from '#app'
 import { ref, watchEffect } from '#imports'
 
 const props = withDefaults(defineProps<{
-  name: string;
+  name: NuxtIconName;
   filled?: boolean
 }>(), { filled: false })
 
@@ -24,11 +25,11 @@ async function getIcon () {
       as: 'raw',
       eager: false
     })
-    const rawIcon = await iconsImport[`/assets/icons/${props.name}.svg`]()
-    if (rawIcon.includes('stroke')) { hasStroke = true }
-    icon.value = rawIcon
+    const rawIcon = await iconsImport[`/assets/icons/${props.name}.svg`]?.()
+    if (rawIcon?.includes('stroke')) { hasStroke = true }
+    icon.value = rawIcon || ''
   } catch {
-    console.error(
+    throw new Error(
       `[nuxt-icons] Icon '${props.name}' doesn't exist in 'assets/icons'`
     )
   }

tsconfig.json

@@ -1,3 +1,6 @@
 {
-  "extends": "./playground/.nuxt/tsconfig.json"
+  "extends": "./playground/.nuxt/tsconfig.json",
+  "compilerOptions": {
+    "noUncheckedIndexedAccess": true
+  }
 }