feat: update build icon wrapper

Author: Austin1serb

README.md

@@ -148,7 +148,6 @@ This runs the full pipeline:
 | `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 |
-| `config.js` | Loads your `zero-ui.config.js` if present |
 
 
 --- 
@@ -159,20 +158,6 @@ This runs the full pipeline:
 * **Only ships the icons you actually use** — smallest possible sprite.
 * **Minimal install**: No runtime dependency tree. Just React + Lucide.
 
----
-
-## 🔧 Configuration (`zero-ui.config.js`)
-
-You can override defaults with a root config file:
-
-```ts
-// zero-ui.config.js
-export default {
-  ROOT_DIR: "src", // where to scan for custom icon usage (default: "")
-  SPRITE_PATH: "icons.svg", // emitted to /public/icons.svg
-  CUSTOM_SVG_DIR: "zero-ui-icons",  // folder for your custom SVGs at project root
-}
-```
 
 ---
 

icon-sprite/README.md

@@ -148,8 +148,7 @@ This runs the full pipeline:
 | `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 |
-| `config.js` | Loads your `zero-ui.config.js` if present |
-
+ 
 
 --- 
 ## ✨ Why This Is Better
@@ -159,20 +158,6 @@ This runs the full pipeline:
 * **Only ships the icons you actually use** — smallest possible sprite.
 * **Minimal install**: No runtime dependency tree. Just React + Lucide.
 
----
-
-## 🔧 Configuration (`zero-ui.config.js`)
-
-You can override defaults with a root config file:
-
-```ts
-// zero-ui.config.js
-export default {
-  ROOT_DIR: "src", // where to scan for custom icon usage (default: "")
-  SPRITE_PATH: "icons.svg", // emitted to /public/icons.svg
-  CUSTOM_SVG_DIR: "zero-ui-icons",  // folder for your custom SVGs at project root
-}
-```
 
 ---
 

icon-sprite/scripts/gen-wrappers.js

@@ -26,32 +26,31 @@ for (const file of files) {
 	const id = file.replace(".svg", ""); // e.g. "arrow-right"
 	const pascal = toPascal(id); // "ArrowRight"
 	const wrapperTsx = `\
-import { ${pascal} as DevIcon, type LucideProps } from "lucide-react"
 import { SPRITE_PATH } from "../config.js";
 import { warnMissingIconSize } from "../utils.js";
+import { createRequire } from "module";
+import { renderUse,type IconProps,} from "../_shared.js";
+
+let DevIcon: ((p: IconProps) => React.JSX.Element) | undefined;
+if (process.env.NODE_ENV !== "production") {
+  const require = createRequire(import.meta.url);
+  const mod = require("lucide-react");
+  DevIcon = mod.${pascal} as any;
+}
 
-interface Props extends LucideProps { size?: number | string | undefined; width?: number | string | undefined; height?: number | string | undefined; }
-
-export function ${pascal}({ size, width, height, ...props }: Props) {
+export function ${pascal}({ size, width, height, ...props }: IconProps) {
   warnMissingIconSize("${pascal}", size, width, height);
-
-  return process.env.NODE_ENV !== "production" ? (
-    <DevIcon
-      {...props}
-      {...(size != null ? { size } : {})}
-      {...(width != null ? { width } : {})}
-      {...(height != null ? { height } : {})}
-    />
-  ) : (
-    <svg
-      {...props}
-      {...(size != null ? { width: size, height: size } : {})}
-      {...(width != null ? { width } : {})}
-      {...(height != null ? { height } : {})}
-    >
-      <use href={\`\${SPRITE_PATH}#${id}\`} />
-    </svg>
-  );
+  if (process.env.NODE_ENV !== "production" && DevIcon) {
+    return (
+      <DevIcon
+        {...(props as any)}
+        {...(size != null ? { size } : {})}
+        {...(width != null ? { width } : {})}
+        {...(height != null ? { height } : {})}
+      />
+    );
+  }
+  return  renderUse("${id}", width, height, size, SPRITE_PATH, props)
 }
 `;
 

icon-sprite/scripts/scan-icons.js

@@ -12,7 +12,7 @@ const __dirname = path.dirname(fileURLToPath(import.meta.url));
 const ICONS = new Set();
 
 // 1️⃣ Find the consuming app's root
-export function findProjectRoot(dir = process.cwd()) {
+function findProjectRoot(dir = process.cwd()) {
 	let current = dir;
 	while (true) {
 		if (fs.existsSync(path.join(current, "package.json"))) return current;

icon-sprite/src/_shared.tsx

@@ -0,0 +1,14 @@
+export type Dim = number | string | undefined;
+export type IconProps = React.SVGProps<SVGSVGElement> & { size?: Dim; width?: Dim; height?: Dim };
+export function renderUse(id: string, width: Dim, height: Dim, size: Dim, SPRITE_PATH: string, props: IconProps) {
+	return (
+		<svg
+			{...props}
+			{...(size != null ? { width: size, height: size } : {})}
+			{...(width != null ? { width } : {})}
+			{...(height != null ? { height } : {})}
+		>
+			<use href={`${SPRITE_PATH}#${id}`} />
+		</svg>
+	);
+}

icon-sprite/src/config.ts

@@ -1,35 +1,42 @@
 // 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: "",
+// 	CUSTOM_SVG_DIR: "zero-ui-icons",
+// 	OUTPUT_DIR: "public",
+// 	IGNORE_ICONS: ["CustomIcon"],
+// };
 
-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 = 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"];

icon-sprite/src/icons/AArrowDown.tsx

@@ -1,27 +1,26 @@
-import { AArrowDown as DevIcon, type LucideProps } from "lucide-react"
 import { SPRITE_PATH } from "../config.js";
 import { warnMissingIconSize } from "../utils.js";
+import { createRequire } from "module";
+import { renderUse,type IconProps,} from "../_shared.js";
 
-interface Props extends LucideProps { size?: number | string | undefined; width?: number | string | undefined; height?: number | string | undefined; }
+let DevIcon: ((p: IconProps) => React.JSX.Element) | undefined;
+if (process.env.NODE_ENV !== "production") {
+  const require = createRequire(import.meta.url);
+  const mod = require("lucide-react");
+  DevIcon = mod.AArrowDown as any;
+}
 
-export function AArrowDown({ size, width, height, ...props }: Props) {
+export function AArrowDown({ size, width, height, ...props }: IconProps) {
   warnMissingIconSize("AArrowDown", size, width, height);
-
-  return process.env.NODE_ENV !== "production" ? (
-    <DevIcon
-      {...props}
-      {...(size != null ? { size } : {})}
-      {...(width != null ? { width } : {})}
-      {...(height != null ? { height } : {})}
-    />
-  ) : (
-    <svg
-      {...props}
-      {...(size != null ? { width: size, height: size } : {})}
-      {...(width != null ? { width } : {})}
-      {...(height != null ? { height } : {})}
-    >
-      <use href={`${SPRITE_PATH}#a-arrow-down`} />
-    </svg>
-  );
+  if (process.env.NODE_ENV !== "production" && DevIcon) {
+    return (
+      <DevIcon
+        {...(props as any)}
+        {...(size != null ? { size } : {})}
+        {...(width != null ? { width } : {})}
+        {...(height != null ? { height } : {})}
+      />
+    );
+  }
+  return  renderUse("a-arrow-down", width, height, size, SPRITE_PATH, props)
 }

icon-sprite/src/icons/AArrowUp.tsx

@@ -1,27 +1,26 @@
-import { AArrowUp as DevIcon, type LucideProps } from "lucide-react"
 import { SPRITE_PATH } from "../config.js";
 import { warnMissingIconSize } from "../utils.js";
+import { createRequire } from "module";
+import { renderUse,type IconProps,} from "../_shared.js";
 
-interface Props extends LucideProps { size?: number | string | undefined; width?: number | string | undefined; height?: number | string | undefined; }
+let DevIcon: ((p: IconProps) => React.JSX.Element) | undefined;
+if (process.env.NODE_ENV !== "production") {
+  const require = createRequire(import.meta.url);
+  const mod = require("lucide-react");
+  DevIcon = mod.AArrowUp as any;
+}
 
-export function AArrowUp({ size, width, height, ...props }: Props) {
+export function AArrowUp({ size, width, height, ...props }: IconProps) {
   warnMissingIconSize("AArrowUp", size, width, height);
-
-  return process.env.NODE_ENV !== "production" ? (
-    <DevIcon
-      {...props}
-      {...(size != null ? { size } : {})}
-      {...(width != null ? { width } : {})}
-      {...(height != null ? { height } : {})}
-    />
-  ) : (
-    <svg
-      {...props}
-      {...(size != null ? { width: size, height: size } : {})}
-      {...(width != null ? { width } : {})}
-      {...(height != null ? { height } : {})}
-    >
-      <use href={`${SPRITE_PATH}#a-arrow-up`} />
-    </svg>
-  );
+  if (process.env.NODE_ENV !== "production" && DevIcon) {
+    return (
+      <DevIcon
+        {...(props as any)}
+        {...(size != null ? { size } : {})}
+        {...(width != null ? { width } : {})}
+        {...(height != null ? { height } : {})}
+      />
+    );
+  }
+  return  renderUse("a-arrow-up", width, height, size, SPRITE_PATH, props)
 }

icon-sprite/src/icons/ALargeSmall.tsx

@@ -1,27 +1,26 @@
-import { ALargeSmall as DevIcon, type LucideProps } from "lucide-react"
 import { SPRITE_PATH } from "../config.js";
 import { warnMissingIconSize } from "../utils.js";
+import { createRequire } from "module";
+import { renderUse,type IconProps,} from "../_shared.js";
 
-interface Props extends LucideProps { size?: number | string | undefined; width?: number | string | undefined; height?: number | string | undefined; }
+let DevIcon: ((p: IconProps) => React.JSX.Element) | undefined;
+if (process.env.NODE_ENV !== "production") {
+  const require = createRequire(import.meta.url);
+  const mod = require("lucide-react");
+  DevIcon = mod.ALargeSmall as any;
+}
 
-export function ALargeSmall({ size, width, height, ...props }: Props) {
+export function ALargeSmall({ size, width, height, ...props }: IconProps) {
   warnMissingIconSize("ALargeSmall", size, width, height);
-
-  return process.env.NODE_ENV !== "production" ? (
-    <DevIcon
-      {...props}
-      {...(size != null ? { size } : {})}
-      {...(width != null ? { width } : {})}
-      {...(height != null ? { height } : {})}
-    />
-  ) : (
-    <svg
-      {...props}
-      {...(size != null ? { width: size, height: size } : {})}
-      {...(width != null ? { width } : {})}
-      {...(height != null ? { height } : {})}
-    >
-      <use href={`${SPRITE_PATH}#a-large-small`} />
-    </svg>
-  );
+  if (process.env.NODE_ENV !== "production" && DevIcon) {
+    return (
+      <DevIcon
+        {...(props as any)}
+        {...(size != null ? { size } : {})}
+        {...(width != null ? { width } : {})}
+        {...(height != null ? { height } : {})}
+      />
+    );
+  }
+  return  renderUse("a-large-small", width, height, size, SPRITE_PATH, props)
 }