react-zero-ui · sclark-bycore · Oct 22, 2025
diff --git a/icon-sprite/README.md b/icon-sprite/README.md
@@ -1,19 +1,15 @@
 <div align="center">
 
-  # @react-zero-ui/icon-sprite
+# @react-zero-ui/icon-sprite
 
-  [![MIT](https://img.shields.io/badge/License-MIT-green.svg)](https://github.com/react-zero-ui/icon-sprite/blob/main/LICENSE) [![npm](https://img.shields.io/npm/v/@react-zero-ui/icon-sprite.svg)](https://www.npmjs.com/package/@react-zero-ui/icon-sprite)
+[![MIT](https://img.shields.io/badge/License-MIT-green.svg)](https://github.com/react-zero-ui/icon-sprite/blob/main/LICENSE) [![npm](https://img.shields.io/npm/v/@react-zero-ui/icon-sprite.svg)](https://www.npmjs.com/package/@react-zero-ui/icon-sprite)
 
-
-
 </div>
 
-> ![Note](https://img.shields.io/badge/Note-blue)
-> **Generates one SVG sprite containing only the icons you used** - Lucide + custom SVGs.
+> ![Note](https://img.shields.io/badge/Note-blue) > **Generates one SVG sprite containing only the icons you used** - Lucide + custom SVGs.
 > DX with real `<Icon/>` in dev ➡️ zero-runtime `<use/>` in prod.
 
 > Part of the [React Zero-UI](https://github.com/react-zero-ui) ecosystem.
-
 
 ---
 
@@ -34,26 +30,26 @@
    Only icons actually used in your app are included.
 
 ## 🙏 Custom Icon Support
+
 Drop SVGs into **`/public/zero-ui-icons/`**, then use `<CustomIcon />` with the filename (no `.svg`).
 
->![Tip](https://img.shields.io/badge/Tip-green)
->```txt
->📁/public
+> ![Tip](https://img.shields.io/badge/Tip-green)
+>
+> ```txt
+> 📁/public
 >   └──📁/zero-ui-icons/
 >       └──dog.svg
 > ```
+>
 > ```tsx
->import { CustomIcon } from "@react-zero-ui/icon-sprite";
->//❗The name MUST match the name of the  file name (no .svg extension).
-><CustomIcon name="dog" size={24} />
->```
-
+> import { CustomIcon } from '@react-zero-ui/icon-sprite';
+> //❗The name MUST match the name of the  file name (no .svg extension).
+> <CustomIcon name='dog' size={24} />;
+> ```
 
->![Info](https://img.shields.io/badge/Info-blue)
+> ![Info](https://img.shields.io/badge/Info-blue)
 > In dev you may see a brief FOUC using custom icons; this is removed in production.
 
-
-
 ---
 
 ## 📦 Installation
@@ -65,15 +61,18 @@ npm install @react-zero-ui/icon-sprite
 ---
 
 ## ❗ Build Command
+
 > ![Caution](https://img.shields.io/badge/Caution-red)
 > Run this before your app build so the sprite exists.
->```bash
->npx zero-icons
->```
+>
+> ```bash
+> npx zero-icons
+> ```
 
 This command builds the icons sprite for production.
 
 Or add this to your `package.json` scripts:
+
 ```json
 {
   "scripts": {
@@ -82,14 +81,14 @@ Or add this to your `package.json` scripts:
   }
 }
 ```
+
 That's it!
 
 ---
 
 ## 🔨 Usage
 
-> ![Warning](https://img.shields.io/badge/Warning-orange)
-> **Pass `size`, or both `width` and `height`, to ensure identical dev/prod rendering.**  
+> ![Warning](https://img.shields.io/badge/Warning-orange) > **Pass `size`, or both `width` and `height`, to ensure identical dev/prod rendering.**  
 > Dev defaults (Lucide 24×24) differ from sprite viewBoxes in production. Missing these props will **very likely** change the visual size in prod.
 
 ### For Lucide Icons:
@@ -104,14 +103,13 @@ import { ArrowRight, Mail } from "@react-zero-ui/icon-sprite";
 ### Custom Icons:
 
 Drop SVGs into **`/public/zero-ui-icons/`**, then use `<CustomIcon />` with the filename (no `.svg`).
+
 ```tsx
-import { CustomIcon } from "@react-zero-ui/icon-sprite";
+import { CustomIcon } from '@react-zero-ui/icon-sprite';
 //❗The name MUST match the name of the file name (without .svg).
-<CustomIcon name="dog" size={32} />
+<CustomIcon name='dog' size={32} />;
 ```
 
-
-
 ---
 
 ## 🧪 How It Works (Under the Hood)
@@ -121,10 +119,10 @@ import { CustomIcon } from "@react-zero-ui/icon-sprite";
 In dev, each icon wrapper looks like this:
 
 ```tsx
-import { ArrowRight as DevIcon } from "lucide-react";
+import { ArrowRight as DevIcon } from 'lucide-react';
 
-export const ArrowRight = (props) =>
-  process.env.NODE_ENV === "development" ? (
+export const ArrowRight = props =>
+  process.env.NODE_ENV === 'development' ? (
     <DevIcon {...props} />
   ) : (
     <svg {...props}>
@@ -135,10 +133,10 @@ export const ArrowRight = (props) =>
 
 This ensures:
 
-* Dev uses Lucide's real React components (`lucide-react`)
-* Full props support (e.g. `strokeWidth`, `className`)
-* No caching issues from SVG sprites
-* No FOUC (Flash of Unstyled Content)
+- Dev uses Lucide's real React components (`lucide-react`)
+- Full props support (e.g. `strokeWidth`, `className`)
+- No caching issues from SVG sprites
+- No FOUC (Flash of Unstyled Content)
 
 ### ⚙️ Production Mode: Minimal Runtime, Maximum Speed
 
@@ -150,6 +148,41 @@ At build time:
 
 ---
 
+## ⚙️ Configuration
+
+You can customize the scanner behavior by creating a `zero-ui.config.js` file in your project root:
+
+```js
+// zero-ui.config.js
+export default {
+  // Package name to scan for (default: "@react-zero-ui/icon-sprite")
+  IMPORT_NAME: '@react-zero-ui/icon-sprite',
+
+  // Path where the sprite will be served (default: "/icons.svg")
+  SPRITE_PATH: '/icons.svg',
+
+  // Directory to scan for icon usage (default: "src")
+  ROOT_DIR: 'src',
+
+  // Directory containing custom SVG files (default: "zero-ui-icons")
+  CUSTOM_SVG_DIR: 'zero-ui-icons',
+
+  // Output directory for the sprite (default: "public")
+  OUTPUT_DIR: 'public',
+
+  // Icon names to ignore during scanning (default: ["CustomIcon"])
+  IGNORE_ICONS: ['CustomIcon'],
+
+  // Directories to exclude from scanning (default: ["node_modules", ".git", "dist", "build", ".next", "out"])
+  EXCLUDE_DIRS: ['node_modules', '.git', 'dist', 'build', '.next', 'out'],
+};
+```
+
+> ![Note](https://img.shields.io/badge/Note-blue)
+> The scanner now defaults to scanning only the `src` directory and automatically excludes `node_modules` and other common build directories. This prevents build failures from dependencies with unsupported syntax (e.g., TypeScript decorators).
+
+---
+
 ## ⚡️ Tooling
 
 To generate everything:
@@ -160,22 +193,19 @@ npx zero-icons
 
 This runs the full pipeline:
 
-| Script | Purpose |
-| --- | --- |
-| `scan-icons.js`   | Parse your codebase for used icons (`Icon` usage or named imports) |
-| `used-icons.js`   | Collects a list of unique icon names |
+| Script            | Purpose                                                                                                      |
+| ----------------- | ------------------------------------------------------------------------------------------------------------ |
+| `scan-icons.js`   | Parse your codebase for used icons (`Icon` usage or named imports)                                           |
+| `used-icons.js`   | Collects a list of unique icon names                                                                         |
 | `build-sprite.js` | Uses [`svgstore`](https://github.com/DIYgod/svgstore) to generate `icons.svg` from used Lucide + custom SVGs |
-
 
---- 
+---
 
 ## ✨ Why This Beats Icon Libraries Everywhere
 
-* **DX-first in dev**: No flicker. No sprite caching. Live updates.
-* **Zero-runtime in production**: Sprites are native, fast, lightweight & highly Cached.
-* **Only ships the icons you actually use** - smallest possible sprite.
-* **Custom icon support**: Drop SVGs into `/public/zero-ui-icons/` and use `<CustomIcon />`
-
+- **DX-first in dev**: No flicker. No sprite caching. Live updates.
+- **Zero-runtime in production**: Sprites are native, fast, lightweight & highly Cached.
+- **Only ships the icons you actually use** - smallest possible sprite.
+- **Custom icon support**: Drop SVGs into `/public/zero-ui-icons/` and use `<CustomIcon />`
 
 Made with ❤️ for the React community by [@austin1serb](https://github.com/austin1serb)
-
diff --git a/icon-sprite/package.json b/icon-sprite/package.json
@@ -37,7 +37,7 @@
   ],
   "scripts": {
     "build": "rm -rf dist && node scripts/gen-wrappers.js && tsc && node scripts/gen-dist.js",
-    "test": "node tests/test-mapping.test.js",
+    "test": "node tests/run-all-tests.js",
     "prepare": "npm run build && npm run test",
     "type-check": "tsc --noEmit | tee type-errors.log"
   },

diff --git a/icon-sprite/scripts/scan-icons.js b/icon-sprite/scripts/scan-icons.js
@@ -5,7 +5,7 @@ import { fileURLToPath } from "url";
 import * as babel from "@babel/core";
 import traverseImport from "@babel/traverse";
 import * as t from "@babel/types";
-import { IMPORT_NAME, ROOT_DIR, IGNORE_ICONS } from "../dist/config.js";
+import { IMPORT_NAME, ROOT_DIR, IGNORE_ICONS, EXCLUDE_DIRS } from "../dist/config.js";
 
 // ESM __dirname shim
 const __dirname = path.dirname(fileURLToPath(import.meta.url));
@@ -30,6 +30,10 @@ function collect(dir) {
 	for (const file of fs.readdirSync(dir)) {
 		const full = path.join(dir, file);
 		if (fs.statSync(full).isDirectory()) {
+			// Skip excluded directories
+			if (EXCLUDE_DIRS.includes(file)) {
+				continue;
+			}
 			collect(full);
 			continue;
 		}

diff --git a/icon-sprite/src/config.ts b/icon-sprite/src/config.ts
@@ -1,42 +1,37 @@
 // src/config.ts
-// import fs from "fs";
-// import path from "path";
-// import { pathToFileURL } from "url";
+import fs from "fs";
+import path from "path";
+import { pathToFileURL } from "url";
 
-// const DEFAULT_CONFIG = {
-// 	IMPORT_NAME: "@react-zero-ui/icon-sprite",
-// 	SPRITE_PATH: "/icons.svg",
-// 	ROOT_DIR: "",
-// 	CUSTOM_SVG_DIR: "zero-ui-icons",
-// 	OUTPUT_DIR: "public",
-// 	IGNORE_ICONS: ["CustomIcon"],
-// };
+const DEFAULT_CONFIG = {
+	IMPORT_NAME: "@react-zero-ui/icon-sprite",
+	SPRITE_PATH: "/icons.svg",
+	ROOT_DIR: "src",
+	CUSTOM_SVG_DIR: "zero-ui-icons",
+	OUTPUT_DIR: "public",
+	IGNORE_ICONS: ["CustomIcon"],
+	EXCLUDE_DIRS: ["node_modules", ".git", "dist", "build", ".next", "out"],
+};
 
-// let userConfig = {};
-// const configFile = path.resolve(process.cwd(), "zero-ui.config.js");
+let userConfig = {};
+const configFile = path.resolve(process.cwd(), "zero-ui.config.js");
 
-// if (fs.existsSync(configFile)) {
-// 	try {
-// 		const mod = await import(pathToFileURL(configFile).href);
-// 		userConfig = mod.default ?? mod;
-// 	} catch (e) {
-// 		// @ts-expect-error
-// 		console.warn("⚠️ Failed to load zero-ui.config.js:", e.message);
-// 	}
-// }
+if (fs.existsSync(configFile)) {
+	try {
+		const mod = await import(pathToFileURL(configFile).href);
+		userConfig = mod.default ?? mod;
+	} catch (e) {
+		// @ts-expect-error
+		console.warn("⚠️ Failed to load zero-ui.config.js:", e.message);
+	}
+}
 
-// const merged = { ...DEFAULT_CONFIG, ...userConfig };
+const merged = { ...DEFAULT_CONFIG, ...userConfig };
 
-// export const IMPORT_NAME = merged.IMPORT_NAME;
-// export const SPRITE_PATH = merged.SPRITE_PATH;
-// export const ROOT_DIR = merged.ROOT_DIR;
-// export const CUSTOM_SVG_DIR = merged.CUSTOM_SVG_DIR;
-// export const OUTPUT_DIR = merged.OUTPUT_DIR;
-// export const IGNORE_ICONS = merged.IGNORE_ICONS;
-
-export const IMPORT_NAME = "@react-zero-ui/icon-sprite";
-export const SPRITE_PATH = "/icons.svg";
-export const ROOT_DIR = "";
-export const CUSTOM_SVG_DIR = "zero-ui-icons";
-export const OUTPUT_DIR = "public";
-export const IGNORE_ICONS = ["CustomIcon"];
+export const IMPORT_NAME = merged.IMPORT_NAME;
+export const SPRITE_PATH = merged.SPRITE_PATH;
+export const ROOT_DIR = merged.ROOT_DIR;
+export const CUSTOM_SVG_DIR = merged.CUSTOM_SVG_DIR;
+export const OUTPUT_DIR = merged.OUTPUT_DIR;
+export const IGNORE_ICONS = merged.IGNORE_ICONS;
+export const EXCLUDE_DIRS = merged.EXCLUDE_DIRS;