Revert "[feat] improve custom icon build script with TypeScript and error handling (#5202)"

This reverts commit 7d6e252.

Author: benceruleanlu

CONTRIBUTING.md

@@ -265,7 +265,7 @@ The project supports three types of icons, all with automatic imports (no manual
 2. **Iconify Icons** - 200,000+ icons from various libraries: `<i-lucide:settings />`, `<i-mdi:folder />`
 3. **Custom Icons** - Your own SVG icons: `<i-comfy:workflow />`
 
-Icons are powered by the unplugin-icons system, which automatically discovers and imports icons as Vue components. Custom icons are stored in `src/assets/icons/custom/` and processed by `build/customIconCollection.ts` with automatic validation.
+Icons are powered by the unplugin-icons system, which automatically discovers and imports icons as Vue components. Custom icons are stored in `src/assets/icons/custom/`.
 
 For detailed instructions and code examples, see [src/assets/icons/README.md](src/assets/icons/README.md).
 

build/customIconCollection.js

@@ -0,0 +1,29 @@
+import { readFileSync, readdirSync } from 'fs'
+import { join } from 'path'
+import { dirname } from 'path'
+import { fileURLToPath } from 'url'
+
+const fileName = fileURLToPath(import.meta.url)
+const dirName = dirname(fileName)
+const customIconsPath = join(dirName, '..', 'src', 'assets', 'icons', 'custom')
+
+// Create an Iconify collection for custom icons
+export const iconCollection = {
+  prefix: 'comfy',
+  icons: {},
+  width: 16,
+  height: 16
+}
+
+// Read all SVG files from the custom icons directory
+const files = readdirSync(customIconsPath)
+files.forEach((file) => {
+  if (file.endsWith('.svg')) {
+    const name = file.replace('.svg', '')
+    const content = readFileSync(join(customIconsPath, file), 'utf-8')
+
+    iconCollection.icons[name] = {
+      body: content
+    }
+  }
+})

build/customIconCollection.ts

@@ -247,29 +247,9 @@ Icons are automatically imported using `unplugin-icons` - no manual imports need
 
 ### Configuration
 
-The icon system has two layers:
-
-1. **Build-time Processing** (`build/customIconCollection.ts`):
-   - Scans `src/assets/icons/custom/` for SVG files
-   - Validates SVG content and structure
-   - Creates Iconify collection for Tailwind CSS
-   - Provides error handling for malformed files
-
-2. **Vite Runtime** (`vite.config.mts`):
-   - Enables direct SVG import as Vue components
-   - Supports dynamic icon loading
+The icon system is configured in `vite.config.mts`:
 
 ```typescript
-// Build script creates Iconify collection
-export const iconCollection: IconifyCollection = {
-  prefix: 'comfy',
-  icons: {
-    'workflow': { body: '<svg>...</svg>' },
-    'node': { body: '<svg>...</svg>' }
-  }
-}
-
-// Vite configuration for component-based usage
 Icons({
   compiler: 'vue3',
   customCollections: {
@@ -291,9 +271,8 @@ Icons are fully typed. If TypeScript doesn't recognize a new custom icon:
 ### Icon Not Showing
 1. **Check filename**: Must be kebab-case without special characters
 2. **Restart dev server**: Required after adding new icons
-3. **Verify SVG**: Ensure it's valid SVG syntax (build script validates automatically)
+3. **Verify SVG**: Ensure it's valid SVG syntax
 4. **Check console**: Look for Vue component resolution errors
-5. **Build script errors**: Check console during build - malformed SVGs are logged but don't break builds
 
 ### Icon Wrong Color
 - Replace hardcoded colors with `currentColor`

package-lock.json

@@ -1,7 +1,7 @@
 /** @type {import('tailwindcss').Config} */
 import { addDynamicIconSelectors } from '@iconify/tailwind'
 
-import { iconCollection } from './build/customIconCollection.ts'
+import { iconCollection } from './build/customIconCollection.js'
 
 export default {
   content: ['./index.html', './src/**/*.{vue,js,ts,jsx,tsx}'],