added tests

Author: Austin1serb

README.md

@@ -187,4 +187,36 @@ This is one of the **most optimized** icon systems for serious frontends:
 * Fully compatible with Next.js 15+, Vite, or any modern React stack.
 
 ---
- 
+ 
+
+
+ <!-- 
+ 📂 icon-sprite/
+├── 📂 node_modules
+│   └── 📂 lucide-static
+│   │   └── 📂 icons
+│   │       └── *icon-name*.svg
+├── 📂 dist
+│   │── config.js
+│   │── index.js
+│   │── used-icons.js
+│   │── utils.js
+│   └── icons.svg
+│── 📂 scripts
+│   │── build-sprite.js
+│   │── gen-dist.js
+│   │── gen-wrappers.js
+│   │── index.js
+│   │── scan-icons.js
+│   └── used-icons.js
+│── 📂 src
+│   │── 📂 icons
+│   │   │── *IconName*.tsx
+│   │── config.ts
+│   └── utils.ts
+│── README.md
+│── package-lock.json
+│── package.json
+│── react-zero-ui-icon-sprite-0.1.3.tgz
+└── tsconfig.json
+ -->

icon-sprite/package.json

@@ -23,7 +23,7 @@
   "sideEffects": false,
   "license": "MIT",
   "private": false,
-  "version": "0.1.3",
+  "version": "0.1.4",
   "type": "module",
   "main": "dist/index.js",
   "module": "dist/index.js",
@@ -37,7 +37,8 @@
   ],
   "scripts": {
     "build": "rm -rf dist && node scripts/gen-wrappers.js && tsc && node scripts/gen-dist.js",
-    "prepare": "npm run build",
+    "test": "node tests/test-mapping.test.js",
+    "prepare": "npm run build && npm run test",
     "type-check": "tsc --noEmit | tee type-errors.log"
   },
   "bin": {

icon-sprite/scripts/build-sprite.js

@@ -5,23 +5,16 @@ 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 { componentNameToStaticId } from "../dist/utils.js";
 
 const require = createRequire(import.meta.url);
 
 // 1️⃣ Resolve lucide-static icons
 const sample = require.resolve("../../../lucide-static/icons/mail.svg");
 const iconsDir = path.dirname(sample);
 
-// 2️⃣ pascal→kebab
-function toKebab(s) {
-	return s
-		.replace(/([a-z0-9])([A-Z])/g, "$1-$2")
-		.replace(/([A-Z])([A-Z][a-z])/g, "$1-$2")
-		.toLowerCase();
-}
-
-// 3️⃣ Gather your needed Lucide IDs
-const needed = new Set(ICONS.map(toKebab));
+// 2️⃣ Gather your needed Lucide IDs
+const needed = new Set(ICONS.map(componentNameToStaticId));
 const store = svgstore({
 	copyAttrs: ["viewBox", "fill", "stroke", "stroke-width", "stroke-linecap", "stroke-linejoin", "style", "size"],
 	svgAttrs: {
@@ -32,7 +25,7 @@ const store = svgstore({
 });
 const found = new Set();
 
-// 4️⃣ Add only the Lucide icons you actually use
+// 3️⃣ Add only the Lucide icons you actually use
 for (const file of fs.readdirSync(iconsDir)) {
 	if (!file.endsWith(".svg")) continue;
 	const id = file.slice(0, -4);
@@ -41,7 +34,7 @@ for (const file of fs.readdirSync(iconsDir)) {
 	store.add(id, fs.readFileSync(path.join(iconsDir, file), "utf8"));
 }
 
-// 5️⃣ Optionally include *all* SVGs from your custom folder
+// 4️⃣ Optionally include *all* SVGs from your custom folder
 const customDir = path.resolve(process.cwd(), CUSTOM_SVG_DIR);
 if (fs.existsSync(customDir)) {
 	for (const file of fs.readdirSync(customDir)) {
@@ -55,13 +48,13 @@ if (fs.existsSync(customDir)) {
 	}
 }
 
-// 6️⃣ Error on any missing Lucide icon
+// 5️⃣ Error on any missing Lucide icon
 const missing = [...needed].filter((id) => !found.has(id));
 if (missing.length) {
 	throw new Error(`❌ Missing icons: ${missing.join(", ")}`);
 }
 
-// 7️⃣ Write a fresh sprite (inline: true drops xml/doctype)
+// 6️⃣ Write a fresh sprite (inline: true drops xml/doctype)
 const sprite = store.toString({ inline: true });
 const outDir = path.join(process.cwd(), "public");
 const outFile = path.join(outDir, SPRITE_PATH);

icon-sprite/src/utils.ts

@@ -21,3 +21,77 @@ export function warnMissingIconSize(name: string, size: number | string | undefi
 		);
 	}
 }
+
+// Tokenize PascalCase + digits with Lucide quirks
+export // src/utils.ts
+/**
+ * Generate the lucide-static filename for a given Lucide React component.
+ * If `available` is provided, returns the first candidate that exists.
+ */
+function componentNameToStaticId(name: string, available?: Set<string>): string {
+	// 1) Tokenize PascalCase + digits + lowercase, preserving special forms
+	//    - "3d" stays as "3d"
+	//    - uppercase runs "AZ" become ["a","z"] (primary), but we’ll also try keeping them
+	//    - digits "10" default to per-digit ["1","0"] (primary), but we also try keeping "10"
+	//    - merge pattern DIGITS + 'x' + DIGITS into "2x2" (primary)
+	const re = /(\d+d)|([A-Z]+(?![a-z]))|([A-Z][a-z]+)|(\d+)|([a-z])/g;
+	const raw: string[] = [];
+	let m: RegExpExecArray | null;
+	while ((m = re.exec(name))) {
+		const [, dPlusD, upperRun, capWord, digits, lower] = m;
+		if (dPlusD) raw.push(dPlusD.toLowerCase());
+		else if (upperRun) raw.push(upperRun); // keep run for now, lower later
+		else if (capWord) raw.push(capWord);
+		else if (digits) raw.push(digits);
+		else if (lower) raw.push(lower);
+	}
+
+	// Merge DIGITS 'x' DIGITS -> "2x2"
+	const merged: string[] = [];
+	for (let i = 0; i < raw.length; i++) {
+		const a = raw[i],
+			b = raw[i + 1],
+			c = raw[i + 2];
+		if (a && b === "x" && c && /^\d+$/.test(a) && /^\d+$/.test(c)) {
+			merged.push(`${a}x${c}`);
+			i += 2;
+		} else {
+			merged.push(a);
+		}
+	}
+
+	// helper transforms
+	const lower = (t: string) => t.toLowerCase();
+	const splitUpperRun = (t: string) => (/^[A-Z]+$/.test(t) ? t.toLowerCase().split("") : [t]);
+	const splitDigits = (t: string) => (/^\d+$/.test(t) ? t.split("") : [t]);
+	const keepDigits = (t: string) => [t]; // no-op, kept as is
+	const keepUpperRun = (t: string) => (/^[A-Z]+$/.test(t) ? [t.toLowerCase()] : [t]);
+
+	// Build candidate variants in descending preference
+	// Primary matches ArrowUp10 (1-0) & AZ (a-z) & 2x2 merged
+	const v1 = merged.flatMap(splitUpperRun).flatMap(splitDigits).map(lower).join("-");
+	// Keep digit groups (Clock10 -> 10), split caps (AZ -> a-z)
+	const v2 = merged.flatMap(splitUpperRun).flatMap(keepDigits).map(lower).join("-");
+	// Split digits, keep cap runs (AZ -> az)
+	const v3 = merged.flatMap(keepUpperRun).flatMap(splitDigits).map(lower).join("-");
+	// Keep both caps & digits
+	const v4 = merged.flatMap(keepUpperRun).flatMap(keepDigits).map(lower).join("-");
+
+	const candidates = dedupe([v1, v2, v3, v4]);
+
+	if (available && available.size) {
+		for (const id of candidates) if (available.has(id)) return id;
+	}
+	return candidates[0]; // deterministic fallback
+}
+
+function dedupe<T>(arr: T[]): T[] {
+	const s = new Set<T>();
+	const out: T[] = [];
+	for (const x of arr)
+		if (!s.has(x)) {
+			s.add(x);
+			out.push(x);
+		}
+	return out;
+}

icon-sprite/tests/test-mapping.test.js

@@ -0,0 +1,68 @@
+#!/usr/bin/env node
+import fs from "fs";
+import path from "path";
+import { createRequire } from "module";
+import { fileURLToPath } from "url";
+
+const require = createRequire(import.meta.url);
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+
+// --- mapper (same logic your lib uses) -------------------------------------
+import { componentNameToStaticId } from "../dist/utils.js";
+// --- locate dirs ------------------------------------------------------------
+function resolveLucideStaticIconsDir() {
+	const anyIcon = require.resolve("lucide-static/icons/arrow-up.svg");
+	return path.dirname(anyIcon);
+}
+
+const SRC_ICONS_DIR = path.resolve(__dirname, "../src/icons");
+const STATIC_DIR = resolveLucideStaticIconsDir();
+
+// --- read component names from filenames -----------------------------------
+function getReactIconComponentNames() {
+	if (!fs.existsSync(SRC_ICONS_DIR)) {
+		throw new Error(`Missing dir: ${SRC_ICONS_DIR}. Generate wrappers first.`);
+	}
+	const exts = new Set([".tsx", ".jsx", ".ts", ".js"]);
+	return (
+		fs
+			.readdirSync(SRC_ICONS_DIR)
+			.filter((f) => exts.has(path.extname(f)))
+			.map((f) => path.basename(f, path.extname(f)))
+			// exclude non-lucide helpers if present
+			.filter((n) => n !== "CustomIcon" && n !== "index")
+	);
+}
+
+// --- run checks -------------------------------------------------------------
+const availableStatic = new Set(
+	fs
+		.readdirSync(STATIC_DIR)
+		.filter((f) => f.endsWith(".svg"))
+		.map((f) => f.slice(0, -4))
+);
+
+const reactNames = getReactIconComponentNames();
+const missing = [];
+for (const comp of reactNames) {
+	const id = componentNameToStaticId(comp, availableStatic);
+	if (!availableStatic.has(id)) missing.push(`${comp} -> ${id} (no svg)`);
+
+	// format sanity
+	if (!/^[a-z0-9-]+$/.test(id)) {
+		missing.push(`${comp} -> ${id} (invalid chars)`);
+		continue;
+	}
+	if (!availableStatic.has(id)) {
+		missing.push(`${comp} -> ${id} (no svg)`);
+	}
+}
+
+if (missing.length) {
+	const sample = missing.slice(0, 50).join("\n  ");
+	console.error(`❌ Mapping failures (${missing.length}):\n  ${sample}\n` + `Search path: ${STATIC_DIR}\n` + `Wrappers dir: ${SRC_ICONS_DIR}`);
+	process.exit(1);
+}
+
+console.log(`✅ ${reactNames.length} components map to existing lucide-static SVGs.`);