fix: CSP policy missing front components like icons, nextui color mode, wasm

web/src/lucideSubset.d.ts

@@ -0,0 +1,5 @@
+declare module 'virtual:lucide-subset' {
+	import type { IconifyJSON } from '@iconify/types'
+	const subset: IconifyJSON
+	export default subset
+}

web/src/main.ts

@@ -1,12 +1,16 @@
 import { createApp } from 'vue'
 import { createPinia } from 'pinia'
 import ui from '@nuxt/ui/vue-plugin'
+import { addCollection } from '@iconify/vue'
+import lucide from 'virtual:lucide-subset'
 
 import App from './App.vue'
 import router from './router'
 
 import '@/assets/main.css'
 
+addCollection(lucide)
+
 const app = createApp(App)
 
 app.use(createPinia())

web/tsconfig.node.json

@@ -2,6 +2,7 @@
   "extends": "@tsconfig/node24/tsconfig.json",
   "include": [
     "vite.config.*",
+    "vite/**/*.ts",
     "vitest.config.*",
     "cypress.config.*",
     "nightwatch.conf.*",

web/vite.config.ts

@@ -5,6 +5,7 @@ import vue from '@vitejs/plugin-vue'
 import vueDevTools from 'vite-plugin-vue-devtools'
 import ui from '@nuxt/ui/vite'
 import { renewUi } from './src/theme/ui.config'
+import { lucideSubset } from './vite/lucideSubset'
 
 export default defineConfig({
 	build: {
@@ -21,6 +22,10 @@ export default defineConfig({
 	plugins: [
 		vue(),
 		vueDevTools(),
+		lucideSubset([
+			fileURLToPath(new URL('./src', import.meta.url)),
+			fileURLToPath(new URL('./node_modules/@nuxt/ui/dist', import.meta.url)),
+		]),
 		ui({
 			ui: renewUi,
 			colorMode: true,

web/vite/lucideSubset.ts

@@ -0,0 +1,41 @@
+import { readdirSync, readFileSync, statSync } from 'node:fs'
+import { join } from 'node:path'
+import { icons } from '@iconify-json/lucide'
+import { getIcons } from '@iconify/utils'
+import type { Plugin } from 'vite'
+
+const virtualId = 'virtual:lucide-subset'
+const resolvedId = `\0${virtualId}`
+const iconPattern = /i-lucide-([a-z0-9]+(?:-[a-z0-9]+)*)/g
+const sourceExtensions = /\.(vue|ts|js|mjs)$/
+
+function walk(dir: string, found: Set<string>) {
+	for (const entry of readdirSync(dir)) {
+		const full = join(dir, entry)
+		const stat = statSync(full)
+		if (stat.isDirectory()) {
+			if (entry !== '__tests__') walk(full, found)
+			continue
+		}
+		if (!sourceExtensions.test(entry)) continue
+		for (const match of readFileSync(full, 'utf8').matchAll(iconPattern)) {
+			found.add(match[1]!)
+		}
+	}
+}
+
+export function lucideSubset(roots: string[]): Plugin {
+	return {
+		name: 'lucide-subset',
+		resolveId(id) {
+			return id === virtualId ? resolvedId : null
+		},
+		load(id) {
+			if (id !== resolvedId) return null
+			const found = new Set<string>()
+			for (const root of roots) walk(root, found)
+			const subset = getIcons(icons, [...found].sort())
+			return `export default ${JSON.stringify(subset)}`
+		},
+	}
+}