v0.2.0 - Add config file option + new lucid icons to lib

Author: Austin1serb

icon-sprite/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@react-zero-ui/icon-sprite",
-  "version": "0.1.6",
+  "version": "0.2.0",
   "description": "Generate a single SVG sprite containing only the icons you used (Lucide + custom). Lucid to SVG sprite solution for React.",
   "keywords": [
     "react",
@@ -38,6 +38,7 @@
   "scripts": {
     "build": "rm -rf dist && node scripts/gen-wrappers.js && tsc && node scripts/gen-dist.js",
     "test": "node tests/run-all-tests.js",
+    "test:integration": "node tests/integration-test.js",
     "prepare": "npm run build && npm run test",
     "type-check": "tsc --noEmit | tee type-errors.log"
   },
@@ -48,18 +49,18 @@
     "react": ">=17"
   },
   "dependencies": {
-    "@babel/core": "^7.28.0",
-    "@babel/preset-react": "^7.27.1",
-    "@babel/preset-typescript": "^7.27.1",
-    "@babel/traverse": "^7.28.0",
-    "lucide-react": "^0.525.0",
-    "lucide-static": "^0.525.0",
+    "@babel/core": "^7.28.5",
+    "@babel/preset-react": "^7.28.5",
+    "@babel/preset-typescript": "^7.28.5",
+    "@babel/traverse": "^7.28.5",
+    "lucide-react": "^0.555.0",
+    "lucide-static": "^0.555.0",
     "svgstore": "^3.0.1"
   },
   "devDependencies": {
-    "@types/node": "^24.2.0",
+    "@types/node": "^24.10.1",
     "@types/parse5": "^6.0.3",
-    "@types/react": "^19.1.9",
-    "typescript": "^5.0.0"
+    "@types/react": "^19.2.7",
+    "typescript": "^5.9.3"
   }
-}
+}

icon-sprite/scripts/build-sprite.js

@@ -4,11 +4,14 @@ import path from "path";
 import { createRequire } from "module";
 import svgstore from "svgstore";
 import { ICONS } from "./used-icons.js";
-import { SPRITE_PATH, CUSTOM_SVG_DIR } from "../dist/config.js";
+import { loadConfig } from "../dist/loadConfig.js";
 import { componentNameToStaticId } from "../dist/utils.js";
 
 const require = createRequire(import.meta.url);
 
+// Load user config (merged with defaults)
+const { SPRITE_PATH, CUSTOM_SVG_DIR, OUTPUT_DIR } = await loadConfig();
+
 // 1️⃣ Resolve lucide-static icons
 const sample = require.resolve("../../../lucide-static/icons/mail.svg");
 const iconsDir = path.dirname(sample);
@@ -35,7 +38,7 @@ for (const file of fs.readdirSync(iconsDir)) {
 }
 
 // 4️⃣ Optionally include *all* SVGs from your custom folder
-const customDir = path.resolve(process.cwd(), "public", CUSTOM_SVG_DIR);
+const customDir = path.resolve(process.cwd(), OUTPUT_DIR, CUSTOM_SVG_DIR);
 if (fs.existsSync(customDir)) {
 	for (const file of fs.readdirSync(customDir)) {
 		if (!file.endsWith(".svg")) continue;
@@ -56,7 +59,7 @@ if (missing.length) {
 
 // 6️⃣ Write a fresh sprite (inline: true drops xml/doctype)
 const sprite = store.toString({ inline: true });
-const outDir = path.join(process.cwd(), "public");
+const outDir = path.join(process.cwd(), OUTPUT_DIR);
 const outFile = path.join(outDir, SPRITE_PATH);
 
 fs.mkdirSync(outDir, { recursive: true });

icon-sprite/scripts/gen-dist.js

@@ -11,17 +11,19 @@ const dtsOut = path.join(distDir, "index.d.ts");
 
 // 1. Find every compiled icon wrapper
 const files = fs.readdirSync(iconsDir).filter((f) => f.endsWith(".js") && f !== "index.js");
-// 2. Build the JS barrel
+// 2. Build the JS barrel (icons only - types don't exist at runtime)
 const jsLines = files.map((file) => {
 	const name = path.basename(file, ".js");
 	return `export { ${name} } from "./icons/${name}.js";`;
 });
 
-// 3. Build the TS declaration barrel
+// 3. Build the TS declaration barrel (icons + type export)
 const dtsLines = files.map((file) => {
 	const name = path.basename(file, ".js");
 	return `export { ${name} } from "./icons/${name}";`;
 });
+// Re-export ZeroUIConfig type for user config files (type-only, .d.ts only)
+dtsLines.push(`export type { ZeroUIConfig } from "./config";`);
 
 // 4. Write both barrels
 fs.writeFileSync(jsOut, jsLines.join("\n") + "\n", "utf8");

icon-sprite/scripts/gen-wrappers.js

@@ -9,7 +9,21 @@ const ICON_SVG_DIR = path.resolve(__dirname, "node_modules/lucide-static/icons")
 
 // 2️⃣ Where to write your wrappers
 const OUT_DIR = path.resolve("src/icons");
-fs.mkdirSync(OUT_DIR, { recursive: true });
+
+// Preserve manually maintained files
+const PRESERVE_FILES = ["CustomIcon.tsx"];
+
+// Clean old generated files before regenerating
+if (fs.existsSync(OUT_DIR)) {
+	const existing = fs.readdirSync(OUT_DIR);
+	for (const file of existing) {
+		if (!PRESERVE_FILES.includes(file)) {
+			fs.rmSync(path.join(OUT_DIR, file));
+		}
+	}
+} else {
+	fs.mkdirSync(OUT_DIR, { recursive: true });
+}
 
 // 3️⃣ Read every SVG filename
 const files = fs.readdirSync(ICON_SVG_DIR).filter((f) => f.endsWith(".svg"));
@@ -21,10 +35,23 @@ const toPascal = (s) =>
 		.map((w) => w[0].toUpperCase() + w.slice(1))
 		.join("");
 
-// 5️⃣ Generate one .tsx per icon
+// 5️⃣ Track generated names to detect case collisions (macOS is case-insensitive)
+const generatedNames = new Map(); // lowercase -> original pascal name
+
+// 6️⃣ Generate one .tsx per icon
+let skippedCount = 0;
 for (const file of files) {
 	const id = file.replace(".svg", ""); // e.g. "arrow-right"
 	const pascal = toPascal(id); // "ArrowRight"
+	const lowerPascal = pascal.toLowerCase();
+
+	// Skip case collisions (e.g., ArrowDownAZ vs ArrowDownAz on case-insensitive filesystems)
+	if (generatedNames.has(lowerPascal)) {
+		skippedCount++;
+		continue;
+	}
+	generatedNames.set(lowerPascal, pascal);
+
 	const wrapperTsx = `\
 import { SPRITE_PATH } from "../config.js";
 import { warnMissingIconSize } from "../utils.js";
@@ -52,4 +79,4 @@ export function ${pascal}({ size, width, height, ...props }: IconProps) {
 	fs.writeFileSync(path.join(OUT_DIR, `${pascal}.tsx`), wrapperTsx);
 }
 
-console.log(`✅ Generated ${files.length} icon wrappers in ${OUT_DIR}`);
+console.log(`✅ Generated ${generatedNames.size} icon wrappers in ${OUT_DIR}${skippedCount > 0 ? ` (skipped ${skippedCount} case-collision aliases)` : ""}`);

icon-sprite/scripts/scan-icons.js

@@ -5,12 +5,15 @@ 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, EXCLUDE_DIRS } from "../dist/config.js";
+import { loadConfig } from "../dist/loadConfig.js";
 
 // ESM __dirname shim
 const __dirname = path.dirname(fileURLToPath(import.meta.url));
 const ICONS = new Set();
 
+// Load user config (merged with defaults)
+const { IMPORT_NAME, ROOT_DIR, IGNORE_ICONS, EXCLUDE_DIRS } = await loadConfig();
+
 // 1️⃣ Find the consuming app's root
 function findProjectRoot(dir = process.cwd()) {
 	let current = dir;

icon-sprite/src/config.ts

@@ -1,37 +1,29 @@
 // src/config.ts
-import fs from "fs";
-import path from "path";
-import { pathToFileURL } from "url";
+// Client-safe config - NO fs, NO Node.js modules
+// These are the default values. User overrides are applied at build time via CLI.
 
-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");
-
-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);
-	}
+/** Configuration options for zero-ui.config.js or zero-ui.config.ts */
+export interface ZeroUIConfig {
+	/** Package import name (default: "@react-zero-ui/icon-sprite") */
+	IMPORT_NAME?: string;
+	/** Path to the sprite file relative to public dir (default: "/icons.svg") */
+	SPRITE_PATH?: string;
+	/** Root directory to scan for icon imports (default: auto-detected from "src", "app", or "pages") */
+	ROOT_DIR?: string;
+	/** Directory for custom SVG icons inside OUTPUT_DIR (default: "zero-ui-icons") */
+	CUSTOM_SVG_DIR?: string;
+	/** Output directory for built assets (default: "public") */
+	OUTPUT_DIR?: string;
+	/** Icon names to ignore during scanning (default: ["CustomIcon"]) */
+	IGNORE_ICONS?: string[];
+	/** Directories to exclude from scanning (default: ["node_modules", ".git", "dist", "build", ".next", "out"]) */
+	EXCLUDE_DIRS?: string[];
 }
 
-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 EXCLUDE_DIRS = merged.EXCLUDE_DIRS;
+export const IMPORT_NAME = "@react-zero-ui/icon-sprite";
+export const SPRITE_PATH = "/icons.svg";
+export const ROOT_DIR = "src";
+export const CUSTOM_SVG_DIR = "zero-ui-icons";
+export const OUTPUT_DIR = "public";
+export const IGNORE_ICONS = ["CustomIcon"];
+export const EXCLUDE_DIRS = ["node_modules", ".git", "dist", "build", ".next", "out"];

icon-sprite/src/icons/ActivitySquare.tsx

@@ -0,0 +1,21 @@
+import { SPRITE_PATH } from "../config.js";
+import { warnMissingIconSize } from "../utils.js";
+import { ActivitySquare as DevIcon } from "lucide-react"
+import { renderUse,type IconProps,} from "../_shared.js";
+
+
+
+export function ActivitySquare({ size, width, height, ...props }: IconProps) {
+  warnMissingIconSize("ActivitySquare", size, width, height);
+  if (process.env.NODE_ENV !== "production" && DevIcon) {
+    return (
+      <DevIcon
+        {...(props as any)}
+        {...(size != null ? { size } : {})}
+        {...(width != null ? { width } : {})}
+        {...(height != null ? { height } : {})}
+      />
+    );
+  }
+  return  renderUse("activity-square", width, height, size, SPRITE_PATH, props)
+}

icon-sprite/src/icons/AlarmCheck.tsx

@@ -0,0 +1,21 @@
+import { SPRITE_PATH } from "../config.js";
+import { warnMissingIconSize } from "../utils.js";
+import { AlarmCheck as DevIcon } from "lucide-react"
+import { renderUse,type IconProps,} from "../_shared.js";
+
+
+
+export function AlarmCheck({ size, width, height, ...props }: IconProps) {
+  warnMissingIconSize("AlarmCheck", size, width, height);
+  if (process.env.NODE_ENV !== "production" && DevIcon) {
+    return (
+      <DevIcon
+        {...(props as any)}
+        {...(size != null ? { size } : {})}
+        {...(width != null ? { width } : {})}
+        {...(height != null ? { height } : {})}
+      />
+    );
+  }
+  return  renderUse("alarm-check", width, height, size, SPRITE_PATH, props)
+}

icon-sprite/src/icons/AlarmMinus.tsx

@@ -0,0 +1,21 @@
+import { SPRITE_PATH } from "../config.js";
+import { warnMissingIconSize } from "../utils.js";
+import { AlarmMinus as DevIcon } from "lucide-react"
+import { renderUse,type IconProps,} from "../_shared.js";
+
+
+
+export function AlarmMinus({ size, width, height, ...props }: IconProps) {
+  warnMissingIconSize("AlarmMinus", size, width, height);
+  if (process.env.NODE_ENV !== "production" && DevIcon) {
+    return (
+      <DevIcon
+        {...(props as any)}
+        {...(size != null ? { size } : {})}
+        {...(width != null ? { width } : {})}
+        {...(height != null ? { height } : {})}
+      />
+    );
+  }
+  return  renderUse("alarm-minus", width, height, size, SPRITE_PATH, props)
+}

icon-sprite/src/icons/AlarmPlus.tsx

@@ -0,0 +1,21 @@
+import { SPRITE_PATH } from "../config.js";
+import { warnMissingIconSize } from "../utils.js";
+import { AlarmPlus as DevIcon } from "lucide-react"
+import { renderUse,type IconProps,} from "../_shared.js";
+
+
+
+export function AlarmPlus({ size, width, height, ...props }: IconProps) {
+  warnMissingIconSize("AlarmPlus", size, width, height);
+  if (process.env.NODE_ENV !== "production" && DevIcon) {
+    return (
+      <DevIcon
+        {...(props as any)}
+        {...(size != null ? { size } : {})}
+        {...(width != null ? { width } : {})}
+        {...(height != null ? { height } : {})}
+      />
+    );
+  }
+  return  renderUse("alarm-plus", width, height, size, SPRITE_PATH, props)
+}