add support for tabler icons

Author: Austin1serb

icon-sprite/package.json

@@ -53,6 +53,8 @@
     "@babel/preset-react": "^7.28.5",
     "@babel/preset-typescript": "^7.28.5",
     "@babel/traverse": "^7.28.5",
+    "@tabler/icons": "^3.35.0",
+    "@tabler/icons-react": "^3.35.0",
     "lucide-react": "^0.555.0",
     "lucide-static": "^0.555.0",
     "svgstore": "^3.0.1"

icon-sprite/scripts/build-sprite.js

@@ -1,23 +1,123 @@
 #!/usr/bin/env node
+/**
+ * Build SVG sprite from used icons (Lucide + Tabler + custom)
+ */
 import fs from "fs";
 import path from "path";
 import { createRequire } from "module";
 import svgstore from "svgstore";
 import { ICONS } from "./used-icons.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)
+// Load user config
 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);
+// ============================================================================
+// Icon pack directories
+// ============================================================================
+
+function resolveLucideIconsDir() {
+	try {
+		// First try to find lucide-static package.json
+		const pkgPath = require.resolve("lucide-static/package.json");
+		const pkgDir = path.dirname(pkgPath);
+		const iconsDir = path.join(pkgDir, "icons");
+		if (fs.existsSync(iconsDir)) {
+			return iconsDir;
+		}
+	} catch {}
+	
+	// Fallback: check in process.cwd()/node_modules
+	const fallbackPath = path.join(process.cwd(), "node_modules", "lucide-static", "icons");
+	if (fs.existsSync(fallbackPath)) {
+		return fallbackPath;
+	}
+	
+	return null;
+}
+
+function resolveTablerIconsDir() {
+	try {
+		// First try to find @tabler/icons package.json
+		const pkgPath = require.resolve("@tabler/icons/package.json");
+		const pkgDir = path.dirname(pkgPath);
+		const outlineDir = path.join(pkgDir, "icons", "outline");
+		if (fs.existsSync(outlineDir)) {
+			return outlineDir;
+		}
+	} catch {}
+	
+	// Fallback: check in process.cwd()/node_modules
+	const fallbackPath = path.join(process.cwd(), "node_modules", "@tabler", "icons", "icons", "outline");
+	if (fs.existsSync(fallbackPath)) {
+		return fallbackPath;
+	}
+	
+	return null;
+}
+
+const lucideDir = resolveLucideIconsDir();
+const tablerDir = resolveTablerIconsDir();
+
+// ============================================================================
+// Load component → sprite mapping (generated by gen-wrappers.js)
+// ============================================================================
+
+import { fileURLToPath } from "url";
+const __dirname = path.dirname(fileURLToPath(import.meta.url));
+
+function loadSpriteMapping() {
+	const mappingFile = path.join(__dirname, "component-sprite-map.json");
+	if (fs.existsSync(mappingFile)) {
+		const content = fs.readFileSync(mappingFile, "utf8");
+		return JSON.parse(content);
+	}
+	console.warn("⚠️ component-sprite-map.json not found. Run `npm run build` first.");
+	return {};
+}
+
+const spriteMapping = loadSpriteMapping();
+
+function componentNameToSpriteId(name) {
+	// Use the mapping from gen-wrappers.js (source of truth)
+	if (spriteMapping[name]) {
+		return spriteMapping[name];
+	}
+	
+	// Fallback for custom icons or unknown components
+	console.warn(`⚠️ No mapping found for ${name}, using fallback conversion`);
+	const kebab = name
+		.replace(/([a-z])([A-Z])/g, "$1-$2")
+		.replace(/([A-Z])([A-Z][a-z])/g, "$1-$2")
+		.replace(/([a-zA-Z])(\d)/g, "$1-$2")
+		.replace(/(\d)([a-zA-Z])/g, "$1-$2")
+		.toLowerCase();
+	return { pack: "custom", spriteId: kebab, svgFile: `${kebab}.svg` };
+}
+
+// ============================================================================
+// SVG Processing: Replace hardcoded values with CSS variables
+// ============================================================================
+
+function processSvgForCssVars(svgContent) {
+	// Only handle stroke-width with CSS variable (most useful, predictable)
+	// stroke="currentColor" already works via CSS color property
+	// fill is too complex - leave it alone
+	
+	let processed = svgContent.replace(
+		/stroke-width="([^"]+)"/g,
+		(match, value) => `stroke-width="var(--icon-stroke-width, ${value})"`
+	);
+	
+	return processed;
+}
+
+// ============================================================================
+// Build sprite
+// ============================================================================
 
-// 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: {
@@ -26,38 +126,91 @@ const store = svgstore({
 		focusable: "false",
 	},
 });
+
 const found = new Set();
+const missing = [];
+
+// Map component names to sprite info
+const neededIcons = ICONS.map((name) => ({
+	name,
+	...componentNameToSpriteId(name),
+}));
 
-// 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);
-	if (!needed.has(id)) continue;
-	found.add(id);
-	store.add(id, fs.readFileSync(path.join(iconsDir, file), "utf8"));
+// Add Lucide icons
+if (lucideDir) {
+	const lucideFiles = new Set(fs.readdirSync(lucideDir).filter((f) => f.endsWith(".svg")));
+	
+	for (const icon of neededIcons) {
+		if (icon.pack !== "lucide") continue;
+		
+		if (lucideFiles.has(icon.svgFile)) {
+			const svg = fs.readFileSync(path.join(lucideDir, icon.svgFile), "utf8");
+			store.add(icon.spriteId, processSvgForCssVars(svg));
+			found.add(icon.name);
+		} else {
+			// Try case-insensitive match
+			const match = [...lucideFiles].find((f) => f.toLowerCase() === icon.svgFile.toLowerCase());
+			if (match) {
+				const svg = fs.readFileSync(path.join(lucideDir, match), "utf8");
+				store.add(icon.spriteId, processSvgForCssVars(svg));
+				found.add(icon.name);
+			}
+		}
+	}
 }
 
-// 4️⃣ Optionally include *all* SVGs from your custom folder
+// Add Tabler icons
+if (tablerDir) {
+	const tablerFiles = new Set(fs.readdirSync(tablerDir).filter((f) => f.endsWith(".svg")));
+	
+	for (const icon of neededIcons) {
+		if (icon.pack !== "tabler") continue;
+		
+		if (tablerFiles.has(icon.svgFile)) {
+			const svg = fs.readFileSync(path.join(tablerDir, icon.svgFile), "utf8");
+			store.add(icon.spriteId, processSvgForCssVars(svg));
+			found.add(icon.name);
+		} else {
+			// Try case-insensitive match
+			const match = [...tablerFiles].find((f) => f.toLowerCase() === icon.svgFile.toLowerCase());
+			if (match) {
+				const svg = fs.readFileSync(path.join(tablerDir, match), "utf8");
+				store.add(icon.spriteId, processSvgForCssVars(svg));
+				found.add(icon.name);
+			}
+		}
+	}
+}
+
+// Add custom icons
 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;
-		const id = file.slice(0, -4); // "my-icon"
+		const id = file.slice(0, -4);
 		const svg = fs.readFileSync(path.join(customDir, file), "utf8");
-		store.add(id, svg); // <symbol id="my-icon">…
-		// Mark custom icons as found so they don't appear as missing
+		store.add(id, processSvgForCssVars(svg));
 		found.add(id);
 		console.log(`🔧 Added custom icon: ${id}`);
 	}
 }
 
-// 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(", ")}`);
+// Check for missing icons
+for (const icon of neededIcons) {
+	if (!found.has(icon.name)) {
+		missing.push(`${icon.name} (${icon.pack}: ${icon.svgFile})`);
+	}
 }
 
-// 6️⃣ Write a fresh sprite (inline: true drops xml/doctype)
+if (missing.length > 0) {
+	console.warn(`⚠️ Missing ${missing.length} icons:`);
+	missing.slice(0, 10).forEach((m) => console.warn(`   - ${m}`));
+	if (missing.length > 10) {
+		console.warn(`   ... and ${missing.length - 10} more`);
+	}
+}
+
+// Write sprite
 const sprite = store.toString({ inline: true });
 const outDir = path.join(process.cwd(), OUTPUT_DIR);
 const outFile = path.join(outDir, SPRITE_PATH);
@@ -66,4 +219,12 @@ fs.mkdirSync(outDir, { recursive: true });
 if (fs.existsSync(outFile)) fs.unlinkSync(outFile);
 fs.writeFileSync(outFile, sprite, "utf8");
 
-console.log(`✅ Built ${SPRITE_PATH} with ${found.size} Lucide + custom icons.`);
+// Summary
+const lucideCount = neededIcons.filter((i) => i.pack === "lucide" && found.has(i.name)).length;
+const tablerCount = neededIcons.filter((i) => i.pack === "tabler" && found.has(i.name)).length;
+console.log(`✅ Built ${SPRITE_PATH} with ${found.size} icons`);
+console.log(`   📦 Lucide: ${lucideCount}`);
+console.log(`   📦 Tabler: ${tablerCount}`);
+if (found.size - lucideCount - tablerCount > 0) {
+	console.log(`   📦 Custom: ${found.size - lucideCount - tablerCount}`);
+}