@mrzr/react-svg-icons 0.0.0-stage → 0.1.0

package/CHANGELOG.md

@@ -0,0 +1,15 @@
+# Changelog
+
+## 0.1.0
+
+First release.
+
+- Turns a folder of SVGs (for example exported from Figma) into React components: SVGO-optimised, typed, with `size`, `color`, `stroke`, `fill`, `strokeWidth`, `opacity`, `title`, a forwarded `ref`, and `colors`, `opacities` and `strokeWidths` lists with one entry per colour of the drawing.
+- Writes a typed registry (`variant.name`, one lazy import per icon) and a lazy `Icon` component. A nested folder is part of the name, and two icons with one name stop the run.
+- The config is data, never a script: YAML (`react-svg-icons.config.yaml`, `.yml`), JSON (`react-svg-icons.config.json`) or an rc file (`.react-svg-iconsrc` and its `.yaml`, `.yml` and `.json` variants). Options: `input`, `outDir`, `removeWords`, `defaultSize`, `defaultStrokeWidth`, `format`. An unknown option is an error.
+- Formats the output with the project's own prettier and config (`format: prettier`, or `false` for raw text).
+- `react-svg-icons --check` reports `missing`, `changed` and `leftover` files and exits with 1; line endings are ignored.
+- Never wipes the output folder: only a generated file that a run no longer produces is deleted, with the folder it leaves empty.
+- Folders with no SVG are ignored, and an SVG that would overwrite a generated file (`icon`, `registry`, `index`) is an error.
+- `generate`, `write` and `compare` for use from a script.
+- Requires Node.js 20 or newer.

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 mrzr
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -1,3 +1,90 @@
-# Temporary Holding Version
+# @mrzr/react-svg-icons
 
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
+[![npm](https://img.shields.io/npm/v/@mrzr/react-svg-icons)](https://www.npmjs.com/package/@mrzr/react-svg-icons)
+[![types](https://img.shields.io/npm/types/@mrzr/react-svg-icons)](https://www.npmjs.com/package/@mrzr/react-svg-icons)
+[![license](https://img.shields.io/npm/l/@mrzr/react-svg-icons)](LICENSE)
+
+Turn the SVG icons you export from Figma into typed React components. Each icon takes `size`, `color` and a prop per colour in the drawing, and a lazy `Icon` loads any of them by name.
+
+**[Wiki](https://github.com/mohammadreza-zr/react-svg-icons/wiki)** · [Quick start](https://github.com/mohammadreza-zr/react-svg-icons/wiki/Quick-Start) · [Components](https://github.com/mohammadreza-zr/react-svg-icons/wiki/Components) · [Configuration](https://github.com/mohammadreza-zr/react-svg-icons/wiki/Configuration) · [Changelog](https://github.com/mohammadreza-zr/react-svg-icons/blob/main/CHANGELOG.md)
+
+```bash
+npm install --save-dev @mrzr/react-svg-icons
+npx @mrzr/react-svg-icons
+```
+
+---
+
+## Is this for you?
+
+**Use it if**
+
+- Your icons are SVG files exported from Figma, grouped in folders (`bold/`, `linear/`, …)
+- You use React, and want an icon to be a component that takes `size` and `color`
+- You want two-tone icons whose colours you can set one by one
+- You want CI to fail when someone adds an SVG but forgets to regenerate
+
+**Use something else if not.** It writes React components only: no Vue, Svelte or sprite sheet. For a single icon set from npm, use that set's own package.
+
+---
+
+## Quick start
+
+Put the exported SVGs in a folder (subfolders are variants) and add `react-svg-icons.config.yaml` next to your `package.json`:
+
+<!-- verbatim: examples/basic/react-svg-icons.config.yaml -->
+```yaml
+input: icons
+outDir: generated
+
+# Words dropped from every icon name.
+removeWords: [vuesax, icon]
+```
+
+```bash
+npx @mrzr/react-svg-icons           # writes the components into generated/
+npx @mrzr/react-svg-icons --check   # writes nothing; exit code 1 when they are out of date
+```
+
+```tsx
+import { Icon } from "./generated";
+import { Logout } from "./generated/bold";
+
+<Icon name="bold.logout" size={20} />   {/* loaded on demand, the name is typed */}
+<Logout size={20} color="crimson" />    {/* imported directly */}
+```
+
+The config can also be `.yml`, `.json` or an rc file (`.react-svg-iconsrc`). It is always data, never a script.
+
+---
+
+## What it does
+
+- **One component per SVG**, optimised with SVGO, with `size`, `color`, `stroke`, `fill`, `strokeWidth`, `opacity`, a `title` for accessibility, and a forwarded `ref`
+- **A prop per colour**: `colors={["red", "blue"]}` sets the first and the second colour of the drawing, and `opacities` and `strokeWidths` do the same
+- **A lazy `Icon`** and a typed registry: `name="bold.logout"`, one chunk per icon
+- **Prettier-formatted output** with your project's prettier and its config, so `--check` passes after your own formatting
+- **`--check`** and cleanup: a generated file for an SVG you removed is deleted, and nothing else is ever deleted
+
+## What it does not do
+
+No Vue, Svelte or sprite output. Gradients, masks and ids are kept as they are, so two icons that use the same id can clash on one page. The `style` attribute of an SVG is dropped, and `stroke-width` becomes one prop for the whole icon. The [Home](https://github.com/mohammadreza-zr/react-svg-icons/wiki) page lists every limit.
+
+---
+
+## Documentation
+
+Everything is in the **[Wiki](https://github.com/mohammadreza-zr/react-svg-icons/wiki)**:
+
+- **Start:** [Installation](https://github.com/mohammadreza-zr/react-svg-icons/wiki/Installation) · [Quick start](https://github.com/mohammadreza-zr/react-svg-icons/wiki/Quick-Start)
+- **Guides:** [Input format](https://github.com/mohammadreza-zr/react-svg-icons/wiki/Input-Format) · [Naming](https://github.com/mohammadreza-zr/react-svg-icons/wiki/Naming) · [Components](https://github.com/mohammadreza-zr/react-svg-icons/wiki/Components) · [The Icon component](https://github.com/mohammadreza-zr/react-svg-icons/wiki/Icon-Component)
+- **Reference:** [Configuration](https://github.com/mohammadreza-zr/react-svg-icons/wiki/Configuration) · [CLI](https://github.com/mohammadreza-zr/react-svg-icons/wiki/CLI) · [API](https://github.com/mohammadreza-zr/react-svg-icons/wiki/API-Reference)
+- **Help:** [Troubleshooting](https://github.com/mohammadreza-zr/react-svg-icons/wiki/Troubleshooting) · [FAQ](https://github.com/mohammadreza-zr/react-svg-icons/wiki/FAQ) · [Contributing](https://github.com/mohammadreza-zr/react-svg-icons/wiki/Contributing)
+
+## Requirements
+
+Node.js 20 or newer. The generated code needs React (tested with 19) and a bundler-style module resolution (`"moduleResolution": "bundler"` in TypeScript), because its imports have no file extension.
+
+## License
+
+MIT

package/dist/build.d.ts

@@ -0,0 +1,17 @@
+import { type ReactSvgIconsConfig } from "./config.js";
+export interface OutputFile {
+    path: string;
+    content: string;
+}
+export interface Output {
+    outDir: string;
+    files: OutputFile[];
+}
+export interface Difference {
+    path: string;
+    reason: "missing" | "changed" | "leftover";
+}
+export declare function generate(input: ReactSvgIconsConfig, cwd?: string): Promise<Output>;
+export declare function compare(output: Output): Difference[];
+/** Writes the files, and removes only generated files that are no longer produced. */
+export declare function write(output: Output): void;

package/dist/build.js

@@ -0,0 +1,137 @@
+import { existsSync, mkdirSync, readFileSync, readdirSync, rmdirSync, unlinkSync, writeFileSync } from "node:fs";
+import path from "node:path";
+import { formatFiles } from "./format.js";
+import { generateComponentCode } from "./component.js";
+import { resolveConfig } from "./config.js";
+import { HEADER, MARKER } from "./header.js";
+import { cleanIconName, toCamelCase, toKebabCase } from "./names.js";
+import { iconComponentCode, registryCode } from "./registry.js";
+function buildTree(dir, basePath = []) {
+    const node = { name: path.basename(dir), path: basePath, files: [], children: [] };
+    const entries = readdirSync(dir, { withFileTypes: true }).sort((a, b) => (a.name < b.name ? -1 : a.name > b.name ? 1 : 0));
+    for (const entry of entries) {
+        const fullPath = path.join(dir, entry.name);
+        if (entry.isDirectory())
+            node.children.push(buildTree(fullPath, [...basePath, entry.name]));
+        else if (entry.isFile() && entry.name.toLowerCase().endsWith(".svg"))
+            node.files.push({ name: entry.name, fullPath });
+    }
+    return node;
+}
+const hasIcons = (node) => node.files.length > 0 || node.children.some(hasIcons);
+function walkTree(node, isRoot, outDir, config, out) {
+    const currentDir = isRoot ? outDir : path.join(outDir, ...node.path);
+    const generated = [];
+    const used = new Set();
+    const allFiles = [];
+    for (const file of node.files) {
+        let componentName = cleanIconName(file.name, node.name, config.removeWords);
+        const wanted = componentName;
+        let counter = 2;
+        while (used.has(componentName))
+            componentName = `${wanted}${counter++}`;
+        used.add(componentName);
+        const fileName = `${toKebabCase(componentName)}.tsx`;
+        const stem = fileName.replace(".tsx", "");
+        if (stem === "index" || (isRoot && (stem === "icon" || stem === "registry"))) {
+            throw new Error(`react-svg-icons: ${file.fullPath} would be written to ${fileName}, a name the generated ${stem} file already uses; rename the SVG`);
+        }
+        const code = generateComponentCode(readFileSync(file.fullPath, "utf8"), componentName, file.fullPath, config);
+        out.push({ path: path.join(currentDir, fileName), content: code });
+        generated.push({ componentName, fileName });
+        allFiles.push({ componentName, fileName, folderName: node.name, path: node.path });
+    }
+    const children = [];
+    for (const child of node.children.filter(hasIcons)) {
+        const result = walkTree(child, false, outDir, config, out);
+        children.push(result);
+        allFiles.push(...result.allFiles);
+    }
+    let index = HEADER;
+    if (isRoot) {
+        // No root-level namespace export on purpose: a static `export * from` of a
+        // variant would pull every icon of it into one chunk and defeat the lazy
+        // imports of the registry.
+        out.push({ path: path.join(currentDir, "registry.ts"), content: registryCode(allFiles) });
+        out.push({ path: path.join(currentDir, "icon.tsx"), content: iconComponentCode(config.defaultSize, config.defaultStrokeWidth) });
+        index += `export * from "./registry";\nexport * from "./icon";\n`;
+    }
+    else {
+        for (const file of generated) {
+            const base = file.fileName.replace(".tsx", "");
+            index += `export { ${file.componentName} } from "./${base}";\nexport type { ${file.componentName}Props } from "./${base}";\n`;
+        }
+        for (const child of children)
+            index += `export * as ${child.camelName} from "./${child.name}";\n`;
+    }
+    out.push({ path: path.join(currentDir, "index.ts"), content: index });
+    return { name: node.name, camelName: toCamelCase(node.name), allFiles };
+}
+export async function generate(input, cwd = process.cwd()) {
+    const config = resolveConfig(input);
+    const inputDir = path.resolve(cwd, config.input);
+    const outDir = path.resolve(cwd, config.outDir);
+    if (!existsSync(inputDir))
+        throw new Error(`react-svg-icons: input folder not found: ${inputDir}`);
+    if (outDir === inputDir || inputDir.startsWith(outDir + path.sep)) {
+        throw new Error(`react-svg-icons: outDir (${outDir}) must not hold the input folder (${inputDir})`);
+    }
+    const tree = buildTree(inputDir);
+    const files = [];
+    walkTree(tree, true, outDir, config, files);
+    const iconCount = files.filter((f) => f.path.endsWith(".tsx") && !f.path.endsWith(`${path.sep}icon.tsx`)).length;
+    if (iconCount === 0)
+        throw new Error(`react-svg-icons: no .svg files in ${inputDir}`);
+    return { outDir, files: await formatFiles(files, cwd, config.format) };
+}
+const lf = (text) => text.replace(/\r\n/g, "\n");
+function existingGenerated(dir) {
+    if (!existsSync(dir))
+        return [];
+    const found = [];
+    for (const entry of readdirSync(dir, { withFileTypes: true })) {
+        const full = path.join(dir, entry.name);
+        if (entry.isDirectory())
+            found.push(...existingGenerated(full));
+        else if (/\.tsx?$/.test(entry.name) && readFileSync(full, "utf8").slice(0, 200).includes(MARKER))
+            found.push(full);
+    }
+    return found;
+}
+export function compare(output) {
+    const wanted = new Set(output.files.map((f) => f.path));
+    const differences = [];
+    for (const file of output.files) {
+        if (!existsSync(file.path))
+            differences.push({ path: file.path, reason: "missing" });
+        else if (lf(readFileSync(file.path, "utf8")) !== lf(file.content))
+            differences.push({ path: file.path, reason: "changed" });
+    }
+    for (const file of existingGenerated(output.outDir)) {
+        if (!wanted.has(file))
+            differences.push({ path: file, reason: "leftover" });
+    }
+    return differences;
+}
+function removeEmptyDirs(dir, keep) {
+    if (!existsSync(dir))
+        return;
+    for (const entry of readdirSync(dir, { withFileTypes: true })) {
+        if (entry.isDirectory())
+            removeEmptyDirs(path.join(dir, entry.name), keep);
+    }
+    if (dir !== keep && readdirSync(dir).length === 0)
+        rmdirSync(dir);
+}
+/** Writes the files, and removes only generated files that are no longer produced. */
+export function write(output) {
+    for (const file of output.files) {
+        mkdirSync(path.dirname(file.path), { recursive: true });
+        writeFileSync(file.path, file.content);
+    }
+    for (const difference of compare(output)) {
+        if (difference.reason === "leftover")
+            unlinkSync(difference.path);
+    }
+    removeEmptyDirs(output.outDir, output.outDir);
+}

package/dist/cli.d.ts

@@ -0,0 +1,2 @@
+#!/usr/bin/env node
+export {};

package/dist/cli.js

@@ -0,0 +1,76 @@
+#!/usr/bin/env node
+import { readFileSync } from "node:fs";
+import path from "node:path";
+import { compare, generate, write } from "./build.js";
+import { findConfig, loadConfig } from "./config.js";
+const HELP = `react-svg-icons — SVG icons to typed React components
+
+Usage:
+  react-svg-icons [build] [--config <file>] [--check]
+
+Options:
+  --config <file>  Config file (default: react-svg-icons.config.yaml|yml|json or .react-svg-iconsrc in the cwd)
+  --check          Write nothing; exit 1 when the output on disk is out of date
+  -v, --version    Print the version
+  -h, --help       Show this help
+`;
+function parse(argv) {
+    const args = { check: false, help: false, version: false };
+    const rest = [...argv];
+    if (rest[0] === "build")
+        rest.shift();
+    for (let i = 0; i < rest.length; i++) {
+        const arg = rest[i];
+        if (arg === "--check")
+            args.check = true;
+        else if (arg === "-h" || arg === "--help")
+            args.help = true;
+        else if (arg === "-v" || arg === "--version")
+            args.version = true;
+        else if (arg === "--config") {
+            const value = rest[++i];
+            if (!value)
+                throw new Error("react-svg-icons: --config needs a file");
+            args.config = value;
+        }
+        else
+            throw new Error(`react-svg-icons: unknown argument "${arg}" (see --help)`);
+    }
+    return args;
+}
+async function main(argv) {
+    const args = parse(argv);
+    if (args.help) {
+        process.stdout.write(HELP);
+        return 0;
+    }
+    if (args.version) {
+        const pkg = new URL("../package.json", import.meta.url);
+        console.log(JSON.parse(readFileSync(pkg, "utf8")).version);
+        return 0;
+    }
+    const cwd = process.cwd();
+    const file = findConfig(cwd, args.config);
+    const config = await loadConfig(file);
+    const output = await generate(config, path.dirname(file));
+    if (args.check) {
+        const differences = compare(output);
+        if (differences.length === 0) {
+            console.log(`✔ icons are up to date (${output.files.length} files)`);
+            return 0;
+        }
+        for (const d of differences)
+            console.error(`✖ ${d.reason}: ${path.relative(cwd, d.path)}`);
+        console.error("Run `npx @mrzr/react-svg-icons` and commit the result.");
+        return 1;
+    }
+    write(output);
+    console.log(`✔ ${output.files.length} files in ${path.relative(cwd, output.outDir) || "."}`);
+    return 0;
+}
+main(process.argv.slice(2)).then((code) => {
+    process.exitCode = code;
+}, (error) => {
+    console.error(error instanceof Error ? error.message : error);
+    process.exitCode = 1;
+});

package/dist/color.d.ts

@@ -0,0 +1,22 @@
+import type { INode } from "svgson";
+export interface ColorInfo {
+    key: string;
+    normalizedColor: string;
+    value: string;
+    count: number;
+    firstOrder: number;
+    isTranslucent: boolean;
+}
+export declare function normalizeColor(value: unknown): string;
+export declare function isColorLike(value: unknown): boolean;
+export declare function isTranslucentColorValue(value: unknown): boolean;
+export declare function collectColorInfo(svgNode: INode): ColorInfo[];
+export interface IconContext {
+    colorSlots: string[];
+    getColorIndex(originalColor: unknown, isTranslucent: boolean): number;
+}
+/**
+ * Slot 0 is the most used opaque colour, then the other opaque ones, then the
+ * translucent ones; equal counts keep the order they first appear in.
+ */
+export declare function createIconContext(colorInfos: ColorInfo[]): IconContext;

package/dist/color.js

@@ -0,0 +1,132 @@
+export function normalizeColor(value) {
+    return String(value).trim().toLowerCase().replace(/\s+/g, " ");
+}
+export function isColorLike(value) {
+    if (value == null)
+        return false;
+    const v = normalizeColor(value);
+    if (!v)
+        return false;
+    if (["none", "transparent", "currentcolor", "inherit"].includes(v))
+        return false;
+    if (v.startsWith("url("))
+        return false;
+    return true;
+}
+export function isTranslucentColorValue(value) {
+    const v = normalizeColor(value);
+    if (!v)
+        return false;
+    if (v.includes("rgba")) {
+        const match = v.match(/rgba\(([^)]+)\)/);
+        if (match) {
+            const parts = match[1].split(",").map((p) => p.trim());
+            if (parts.length === 4) {
+                const a = Number.parseFloat(parts[3]);
+                if (Number.isFinite(a) && a < 1)
+                    return true;
+            }
+        }
+    }
+    const slashAlpha = v.match(/\/\s*([0-9]*\.?[0-9]+)\s*\)/);
+    if (slashAlpha) {
+        const a = Number.parseFloat(slashAlpha[1]);
+        if (Number.isFinite(a) && a < 1)
+            return true;
+    }
+    return false;
+}
+export function collectColorInfo(svgNode) {
+    const infos = new Map();
+    let firstOrder = 0;
+    function register(value, opacityHint) {
+        if (value == null)
+            return;
+        const normalized = normalizeColor(value);
+        if (normalized === "currentcolor" || !isColorLike(value))
+            return;
+        const isTranslucent = opacityHint < 1 || isTranslucentColorValue(value);
+        const key = `${normalized}__${isTranslucent ? "alpha" : "solid"}`;
+        if (!infos.has(key)) {
+            infos.set(key, {
+                key,
+                normalizedColor: normalized,
+                value: String(value),
+                count: 0,
+                firstOrder: firstOrder++,
+                isTranslucent,
+            });
+        }
+        infos.get(key).count += 1;
+    }
+    function visit(node, inheritedOpacity) {
+        if (node.type !== "element")
+            return;
+        const attrs = node.attributes || {};
+        let currentOpacity = inheritedOpacity;
+        if (attrs.opacity != null) {
+            const p = Number.parseFloat(attrs.opacity);
+            if (Number.isFinite(p))
+                currentOpacity *= p;
+        }
+        const fo = attrs["fill-opacity"] ?? attrs.fillOpacity;
+        const so = attrs["stroke-opacity"] ?? attrs.strokeOpacity;
+        if (attrs.fill != null) {
+            let fo2 = currentOpacity;
+            if (fo != null) {
+                const p = Number.parseFloat(fo);
+                if (Number.isFinite(p))
+                    fo2 *= p;
+            }
+            register(attrs.fill, fo2);
+        }
+        if (attrs.stroke != null) {
+            let so2 = currentOpacity;
+            if (so != null) {
+                const p = Number.parseFloat(so);
+                if (Number.isFinite(p))
+                    so2 *= p;
+            }
+            register(attrs.stroke, so2);
+        }
+        for (const child of node.children || [])
+            visit(child, currentOpacity);
+    }
+    visit(svgNode, 1);
+    return [...infos.values()];
+}
+/**
+ * Slot 0 is the most used opaque colour, then the other opaque ones, then the
+ * translucent ones; equal counts keep the order they first appear in.
+ */
+export function createIconContext(colorInfos) {
+    const sorted = [...colorInfos].sort((a, b) => {
+        if (a.isTranslucent !== b.isTranslucent)
+            return a.isTranslucent ? 1 : -1;
+        if (b.count !== a.count)
+            return b.count - a.count;
+        return a.firstOrder - b.firstOrder;
+    });
+    const colorIndex = new Map();
+    const colorSlots = [];
+    sorted.forEach((info, index) => {
+        colorIndex.set(info.key, index);
+        colorSlots.push(info.value);
+    });
+    return {
+        colorSlots,
+        getColorIndex(originalColor, isTranslucent) {
+            const normalized = normalizeColor(originalColor);
+            const key = `${normalized}__${isTranslucent ? "alpha" : "solid"}`;
+            if (colorIndex.has(key))
+                return colorIndex.get(key);
+            const other = `${normalized}__${isTranslucent ? "solid" : "alpha"}`;
+            if (colorIndex.has(other))
+                return colorIndex.get(other);
+            const index = colorSlots.length;
+            colorIndex.set(key, index);
+            colorSlots.push(String(originalColor));
+            return index;
+        },
+    };
+}

package/dist/component.d.ts

@@ -0,0 +1,5 @@
+export interface ComponentOptions {
+    defaultSize: number;
+    defaultStrokeWidth: number;
+}
+export declare function generateComponentCode(rawSvg: string, componentName: string, file: string, options: ComponentOptions): string;

package/dist/component.js

@@ -0,0 +1,162 @@
+import { optimize } from "svgo";
+import * as svgson from "svgson";
+import { collectColorInfo, createIconContext, isTranslucentColorValue, normalizeColor } from "./color.js";
+import { HEADER } from "./header.js";
+import { attributeToJsx, escapeJsString, nodeToJsx, transformNode } from "./jsx.js";
+const parseSync = svgson.parseSync ??
+    svgson.default.parseSync;
+function optimizeSvg(svg) {
+    return optimize(svg, {
+        multipass: true,
+        plugins: [
+            {
+                name: "preset-default",
+                params: { overrides: { cleanupIds: false } },
+            },
+        ],
+    }).data;
+}
+function walk(node, fn) {
+    if (!node)
+        return;
+    fn(node);
+    for (const child of node.children || [])
+        walk(child, fn);
+}
+function mostCommon(values) {
+    if (!values.length)
+        return undefined;
+    const counts = new Map();
+    let best = values[0];
+    for (const value of values) {
+        counts.set(value, (counts.get(value) || 0) + 1);
+        if (counts.get(value) > (counts.get(best) || 0))
+            best = value;
+    }
+    return best;
+}
+export function generateComponentCode(rawSvg, componentName, file, options) {
+    let ast;
+    try {
+        ast = parseSync(optimizeSvg(rawSvg));
+    }
+    catch (error) {
+        throw new Error(`react-svg-icons: ${file} is not a valid SVG (${error.message})`);
+    }
+    const svgNode = (ast.name === "svg" ? ast : (ast.children || []).find((n) => n.name === "svg"));
+    if (!svgNode)
+        throw new Error(`react-svg-icons: no <svg> root in ${file}`);
+    svgNode.attributes = svgNode.attributes || {};
+    const fallbackWidth = Number.parseFloat(svgNode.attributes.width || "24");
+    const fallbackHeight = Number.parseFloat(svgNode.attributes.height || "24");
+    const viewBox = svgNode.attributes.viewBox ||
+        svgNode.attributes.viewbox ||
+        `0 0 ${Number.isFinite(fallbackWidth) ? fallbackWidth : 24} ${Number.isFinite(fallbackHeight) ? fallbackHeight : 24}`;
+    const strokeWidthValues = [];
+    walk(svgNode, (node) => {
+        if (node.type !== "element")
+            return;
+        const v = node.attributes?.["stroke-width"] ?? node.attributes?.strokeWidth;
+        if (v != null)
+            strokeWidthValues.push(String(v));
+    });
+    const commonStrokeWidth = mostCommon(strokeWidthValues);
+    const parsedStrokeWidth = commonStrokeWidth == null ? options.defaultStrokeWidth : Number.parseFloat(commonStrokeWidth);
+    const strokeWidthJsDefault = Number.isFinite(parsedStrokeWidth)
+        ? parsedStrokeWidth
+        : escapeJsString(commonStrokeWidth);
+    const ctx = createIconContext(collectColorInfo(svgNode));
+    const rootFill = svgNode.attributes.fill;
+    const rootStroke = svgNode.attributes.stroke;
+    let rootFillAttribute;
+    if (rootFill == null || normalizeColor(rootFill) === "none" || normalizeColor(rootFill) === "transparent") {
+        rootFillAttribute = `fill="none"`;
+    }
+    else {
+        const index = ctx.getColorIndex(rootFill, isTranslucentColorValue(rootFill));
+        rootFillAttribute = `fill={colors?.[${index}] ?? fill ?? color ?? "currentColor"}`;
+    }
+    let rootStrokeAttribute = "";
+    if (rootStroke != null && normalizeColor(rootStroke) !== "none") {
+        const index = ctx.getColorIndex(rootStroke, isTranslucentColorValue(rootStroke));
+        rootStrokeAttribute = `stroke={colors?.[${index}] ?? stroke ?? color ?? "currentColor"}`;
+    }
+    for (const name of [
+        "width", "height", "viewBox", "viewbox", "fill", "stroke",
+        "stroke-width", "strokeWidth", "xmlns", "xmlns:xlink", "version", "style",
+    ]) {
+        delete svgNode.attributes[name];
+    }
+    transformNode(svgNode, ctx);
+    const rootExtraAttrs = Object.entries(svgNode.attributes || {})
+        .map(([name, value]) => attributeToJsx(name, value))
+        .filter(Boolean)
+        .join(" ");
+    const childrenJsx = (svgNode.children || []).map((child) => nodeToJsx(child, 3)).join("");
+    const colorComment = ctx.colorSlots.length
+        ? `/**\n * Original color slots:\n${ctx.colorSlots.map((slot, i) => ` * - colors[${i}] = ${slot}`).join("\n")}\n */\n`
+        : "";
+    const rootPropLines = [
+        "ref={ref}",
+        "width={size}",
+        "height={size}",
+        `viewBox={${escapeJsString(viewBox)}}`,
+        rootFillAttribute,
+        rootStrokeAttribute,
+        rootExtraAttrs,
+        `role={title ? "img" : undefined}`,
+        `aria-hidden={title ? undefined : true}`,
+        "{...props}",
+    ]
+        .filter(Boolean)
+        .map((line) => `        ${line}`)
+        .join("\n");
+    return `${HEADER}${colorComment}import * as React from "react";
+
+export type ${componentName}Props = Omit<
+  React.SVGProps<SVGSVGElement>,
+  "color" | "stroke" | "fill" | "strokeWidth" | "opacity"
+> & {
+  size?: number | string;
+  color?: string;
+  stroke?: string;
+  fill?: string;
+  strokeWidth?: number | string;
+  opacity?: number | string;
+  colors?: (string | undefined)[];
+  opacities?: (number | string | undefined)[];
+  strokeWidths?: (number | string | undefined)[];
+  title?: string;
+};
+
+export const ${componentName} = React.forwardRef<
+  SVGSVGElement,
+  ${componentName}Props
+>(
+  function ${componentName}(
+    {
+      size = ${options.defaultSize},
+      color = "currentColor",
+      stroke,
+      fill,
+      strokeWidth = ${strokeWidthJsDefault},
+      opacity,
+      colors,
+      opacities,
+      strokeWidths,
+      title,
+      ...props
+    },
+    ref
+  ) {
+    return (
+      <svg
+${rootPropLines}
+      >
+        {title ? <title>{title}</title> : null}
+${childrenJsx}      </svg>
+    );
+  }
+);
+`;
+}

package/dist/config.d.ts

@@ -0,0 +1,26 @@
+export interface ReactSvgIconsConfig {
+    /** Folder with the exported `*.svg` files. Subfolders become variants. */
+    input: string;
+    /** Folder the components are written to. */
+    outDir: string;
+    /** Words dropped from every icon name, in any case: `[vuesax, icon]`. */
+    removeWords?: string[];
+    /** The `size` an icon has when none is given. Default 24. */
+    defaultSize?: number;
+    /** The `strokeWidth` of an icon whose SVG has none. Default 2. */
+    defaultStrokeWidth?: number;
+    /** `"prettier"` formats with the project's prettier and its config; `false` writes raw. Default `"prettier"`. */
+    format?: "prettier" | false;
+}
+export interface ResolvedConfig {
+    input: string;
+    outDir: string;
+    removeWords: string[];
+    defaultSize: number;
+    defaultStrokeWidth: number;
+    format: "prettier" | false;
+}
+export declare function defineConfig(config: ReactSvgIconsConfig): ReactSvgIconsConfig;
+export declare function resolveConfig(config: ReactSvgIconsConfig): ResolvedConfig;
+export declare function findConfig(cwd: string, explicit?: string): string;
+export declare function loadConfig(file: string): Promise<ReactSvgIconsConfig>;

package/dist/config.js

@@ -0,0 +1,82 @@
+import { existsSync, readFileSync } from "node:fs";
+import path from "node:path";
+import { parse as parseYaml } from "yaml";
+const OPTIONS = ["input", "outDir", "removeWords", "defaultSize", "defaultStrokeWidth", "format"];
+export function defineConfig(config) {
+    return config;
+}
+export function resolveConfig(config) {
+    for (const key of Object.keys(config)) {
+        if (!OPTIONS.includes(key)) {
+            throw new Error(`react-svg-icons: unknown option "${key}" (options: ${OPTIONS.join(", ")})`);
+        }
+    }
+    if (!config.input)
+        throw new Error("react-svg-icons: `input` is required");
+    if (!config.outDir)
+        throw new Error("react-svg-icons: `outDir` is required");
+    const number = (name, value, fallback) => {
+        if (value === undefined)
+            return fallback;
+        if (typeof value !== "number" || !Number.isFinite(value) || value <= 0) {
+            throw new Error(`react-svg-icons: \`${name}\` must be a positive number`);
+        }
+        return value;
+    };
+    if (config.removeWords !== undefined && !Array.isArray(config.removeWords)) {
+        throw new Error("react-svg-icons: `removeWords` must be a list of words");
+    }
+    if (config.format !== undefined && config.format !== "prettier" && config.format !== false) {
+        throw new Error('react-svg-icons: `format` must be "prettier" or false');
+    }
+    return {
+        input: config.input,
+        outDir: config.outDir,
+        removeWords: (config.removeWords ?? []).map((w) => String(w).toLowerCase()),
+        defaultSize: number("defaultSize", config.defaultSize, 24),
+        defaultStrokeWidth: number("defaultStrokeWidth", config.defaultStrokeWidth, 2),
+        format: config.format ?? "prettier",
+    };
+}
+const CONFIG_NAMES = [
+    "react-svg-icons.config.yaml",
+    "react-svg-icons.config.yml",
+    "react-svg-icons.config.json",
+    ".react-svg-iconsrc",
+    ".react-svg-iconsrc.yaml",
+    ".react-svg-iconsrc.yml",
+    ".react-svg-iconsrc.json",
+];
+const SCRIPT = /\.(c|m)?(j|t)s$/;
+export function findConfig(cwd, explicit) {
+    if (explicit) {
+        const file = path.resolve(cwd, explicit);
+        if (!existsSync(file))
+            throw new Error(`react-svg-icons: no config at ${file}`);
+        return file;
+    }
+    for (const name of CONFIG_NAMES) {
+        const file = path.resolve(cwd, name);
+        if (existsSync(file))
+            return file;
+    }
+    throw new Error(`react-svg-icons: no config found; create ${CONFIG_NAMES[0]} (see the README)`);
+}
+export async function loadConfig(file) {
+    if (SCRIPT.test(file)) {
+        throw new Error(`react-svg-icons: ${file} is a script; the config must be YAML or JSON`);
+    }
+    const text = readFileSync(file, "utf8").replace(/^/, "");
+    const isJson = file.endsWith(".json");
+    let parsed;
+    try {
+        parsed = isJson ? JSON.parse(text) : parseYaml(text);
+    }
+    catch (error) {
+        throw new Error(`react-svg-icons: ${file} is not valid ${isJson ? "JSON" : "YAML"} (${error.message})`);
+    }
+    if (!parsed || typeof parsed !== "object" || Array.isArray(parsed)) {
+        throw new Error(`react-svg-icons: ${file} must hold a mapping of options`);
+    }
+    return parsed;
+}

package/dist/format.d.ts

@@ -0,0 +1,7 @@
+export declare function formatFiles(files: {
+    path: string;
+    content: string;
+}[], cwd: string, format: "prettier" | false): Promise<{
+    path: string;
+    content: string;
+}[]>;

package/dist/format.js

@@ -0,0 +1,42 @@
+import { createRequire } from "node:module";
+import path from "node:path";
+import { pathToFileURL } from "node:url";
+/** The project's own prettier first, then the one installed next to this package. */
+async function loadPrettier(cwd) {
+    try {
+        const found = createRequire(path.join(cwd, "noop.js")).resolve("prettier");
+        return (await import(pathToFileURL(found).href)).default;
+    }
+    catch {
+        try {
+            return (await import("prettier")).default;
+        }
+        catch {
+            return null;
+        }
+    }
+}
+export async function formatFiles(files, cwd, format) {
+    if (format === false)
+        return files;
+    const prettier = await loadPrettier(cwd);
+    if (!prettier) {
+        console.warn("react-svg-icons: prettier is not installed, so the output is not formatted. " +
+            "Install it in the project, or set `format: false` to silence this.");
+        return files;
+    }
+    const config = (await prettier.resolveConfig(path.join(cwd, "package.json"))) ?? {};
+    const out = [];
+    for (const file of files) {
+        try {
+            out.push({
+                path: file.path,
+                content: await prettier.format(file.content, { ...config, parser: "typescript", filepath: file.path }),
+            });
+        }
+        catch (error) {
+            throw new Error(`react-svg-icons: the generated ${file.path} does not parse (${error.message})`);
+        }
+    }
+    return out;
+}

package/dist/header.d.ts

@@ -0,0 +1,2 @@
+export declare const MARKER = "auto-generated by react-svg-icons";
+export declare const HEADER = "/* eslint-disable */\n/* This file is auto-generated by react-svg-icons. Do not edit manually. */\n\n";

package/dist/header.js

@@ -0,0 +1,2 @@
+export const MARKER = "auto-generated by react-svg-icons";
+export const HEADER = `/* eslint-disable */\n/* This file is ${MARKER}. Do not edit manually. */\n\n`;

package/dist/index.d.ts

@@ -0,0 +1,2 @@
+export { compare, generate, write, type Difference, type Output, type OutputFile } from "./build.js";
+export { defineConfig, findConfig, loadConfig, resolveConfig, type ReactSvgIconsConfig, type ResolvedConfig, } from "./config.js";

package/dist/index.js

@@ -0,0 +1,2 @@
+export { compare, generate, write } from "./build.js";
+export { defineConfig, findConfig, loadConfig, resolveConfig, } from "./config.js";

package/dist/jsx.d.ts

@@ -0,0 +1,13 @@
+import type { INode } from "svgson";
+import { type IconContext } from "./color.js";
+export interface IconNode extends INode {
+    mappedFill?: number;
+    mappedStroke?: number;
+    nativeOpacity?: number;
+    nativeFillOpacity?: number;
+    nativeStrokeOpacity?: number;
+}
+export declare const escapeJsString: (value: unknown) => string;
+export declare function attributeToJsx(name: string, value: unknown): string;
+export declare function transformNode(node: IconNode, ctx: IconContext, inheritedOpacity?: number): void;
+export declare function nodeToJsx(node: IconNode, indent?: number): string;

package/dist/jsx.js

@@ -0,0 +1,132 @@
+import { isColorLike, isTranslucentColorValue } from "./color.js";
+const IGNORE_ATTRS = new Set(["xmlns", "xmlns:xlink", "version", "style"]);
+const ATTR_ALIAS = {
+    class: "className",
+    "xlink:href": "href",
+    "xml:space": "xmlSpace",
+};
+export const escapeJsString = (value) => JSON.stringify(String(value));
+function camelize(name) {
+    return name.replace(/[-:](\w)/g, (_, c) => c.toUpperCase());
+}
+function toJsxAttributeName(name) {
+    if (name.startsWith("data-") || name.startsWith("aria-"))
+        return name;
+    if (ATTR_ALIAS[name])
+        return ATTR_ALIAS[name];
+    return camelize(name);
+}
+export function attributeToJsx(name, value) {
+    if (IGNORE_ATTRS.has(name))
+        return "";
+    const key = toJsxAttributeName(name);
+    if (value === true)
+        return `${key}=""`;
+    if (value == null || value === false)
+        return "";
+    return `${key}={${escapeJsString(value)}}`;
+}
+export function transformNode(node, ctx, inheritedOpacity = 1) {
+    if (node.type !== "element")
+        return;
+    const attrs = node.attributes || {};
+    let currentOpacity = inheritedOpacity;
+    if (attrs.opacity != null) {
+        const parsed = Number.parseFloat(attrs.opacity);
+        if (Number.isFinite(parsed)) {
+            node.nativeOpacity = parsed;
+            currentOpacity *= parsed;
+            delete attrs.opacity;
+        }
+    }
+    if (node.name !== "svg") {
+        const fillOpacityAttr = attrs["fill-opacity"] ?? attrs.fillOpacity;
+        const strokeOpacityAttr = attrs["stroke-opacity"] ?? attrs.strokeOpacity;
+        if (attrs.fill != null && isColorLike(attrs.fill)) {
+            let fillOpacity = currentOpacity;
+            let nativeFillOpacity = 1;
+            if (fillOpacityAttr != null) {
+                const p = Number.parseFloat(fillOpacityAttr);
+                if (Number.isFinite(p)) {
+                    fillOpacity *= p;
+                    nativeFillOpacity = p;
+                }
+            }
+            const isTranslucent = fillOpacity < 1 || isTranslucentColorValue(attrs.fill);
+            node.mappedFill = ctx.getColorIndex(attrs.fill, isTranslucent);
+            node.nativeFillOpacity = nativeFillOpacity < 1 ? nativeFillOpacity : undefined;
+            delete attrs.fill;
+            delete attrs["fill-opacity"];
+            delete attrs.fillOpacity;
+        }
+        if (attrs.stroke != null && isColorLike(attrs.stroke)) {
+            let strokeOpacity = currentOpacity;
+            let nativeStrokeOpacity = 1;
+            if (strokeOpacityAttr != null) {
+                const p = Number.parseFloat(strokeOpacityAttr);
+                if (Number.isFinite(p)) {
+                    strokeOpacity *= p;
+                    nativeStrokeOpacity = p;
+                }
+            }
+            const isTranslucent = strokeOpacity < 1 || isTranslucentColorValue(attrs.stroke);
+            node.mappedStroke = ctx.getColorIndex(attrs.stroke, isTranslucent);
+            node.nativeStrokeOpacity = nativeStrokeOpacity < 1 ? nativeStrokeOpacity : undefined;
+            delete attrs.stroke;
+            delete attrs["stroke-opacity"];
+            delete attrs.strokeOpacity;
+        }
+        delete attrs["stroke-width"];
+        delete attrs.strokeWidth;
+    }
+    for (const child of node.children || [])
+        transformNode(child, ctx, currentOpacity);
+}
+export function nodeToJsx(node, indent = 3) {
+    const pad = "  ".repeat(indent);
+    if (node.type === "text") {
+        const text = String(node.value || "").trim();
+        if (!text)
+            return "";
+        return `${pad}{${escapeJsString(text)}}\n`;
+    }
+    if (node.type !== "element")
+        return "";
+    const attrParts = Object.entries(node.attributes || {})
+        .map(([name, value]) => attributeToJsx(name, value))
+        .filter(Boolean);
+    const styleProps = [];
+    const hasMappedFill = node.mappedFill !== undefined;
+    const hasMappedStroke = node.mappedStroke !== undefined;
+    const mappedIndex = hasMappedStroke ? node.mappedStroke : hasMappedFill ? node.mappedFill : undefined;
+    if (hasMappedFill) {
+        styleProps.push(`fill: colors?.[${node.mappedFill}] ?? fill ?? color ?? "currentColor"`);
+    }
+    if (hasMappedStroke) {
+        styleProps.push(`stroke: colors?.[${node.mappedStroke}] ?? stroke ?? color ?? "currentColor"`);
+    }
+    if (mappedIndex !== undefined) {
+        let baseOpacity = node.nativeOpacity ?? 1;
+        if (hasMappedFill && node.nativeFillOpacity !== undefined)
+            baseOpacity *= node.nativeFillOpacity;
+        else if (hasMappedStroke && node.nativeStrokeOpacity !== undefined)
+            baseOpacity *= node.nativeStrokeOpacity;
+        if (baseOpacity !== 1) {
+            styleProps.push(`opacity: opacities?.[${mappedIndex}] ?? opacity ?? ${baseOpacity}`);
+        }
+        else {
+            styleProps.push(`opacity: opacities?.[${mappedIndex}] ?? opacity`);
+        }
+        attrParts.push(`strokeWidth={strokeWidths?.[${mappedIndex}] ?? strokeWidth}`);
+    }
+    else if (node.nativeOpacity !== undefined) {
+        styleProps.push(`opacity: opacity ?? ${node.nativeOpacity}`);
+    }
+    if (styleProps.length > 0)
+        attrParts.push(`style={{ ${styleProps.join(", ")} }}`);
+    const openingAttrs = attrParts.length ? ` ${attrParts.join(" ")}` : "";
+    const children = (node.children || []).map((child) => nodeToJsx(child, indent + 1)).join("");
+    if (!children.trim())
+        return `${pad}<${node.name}${openingAttrs} />\n`;
+    return `${pad}<${node.name}${openingAttrs}>\n${children}${pad}</${node.name}>\n`;
+}

package/dist/names.d.ts

@@ -0,0 +1,4 @@
+export declare function splitWords(value: string): string[];
+export declare function cleanIconName(fileName: string, folderName: string, removeWords: readonly string[]): string;
+export declare function toKebabCase(str: string): string;
+export declare function toCamelCase(str: string): string;

package/dist/names.js

@@ -0,0 +1,52 @@
+export function splitWords(value) {
+    const normalized = String(value)
+        .replace(/([a-z])([A-Z])/g, "$1 $2")
+        .replace(/([A-Z]+)([A-Z][a-z])/g, "$1 $2")
+        .replace(/(\d+)/g, " $1 ")
+        .replace(/[^a-zA-Z0-9]+/g, " ")
+        .trim();
+    if (!normalized)
+        return [];
+    return normalized.split(/\s+/).filter(Boolean);
+}
+function capitalizeWord(word) {
+    if (/^\d+$/.test(word))
+        return word;
+    return word.charAt(0).toUpperCase() + word.slice(1).toLowerCase();
+}
+export function cleanIconName(fileName, folderName, removeWords) {
+    let words = splitWords(fileName.replace(/\.svg$/i, ""));
+    if (words[0]?.toLowerCase() === "icon") {
+        words.shift();
+        while (words.length && /^\d+$/.test(words[0]))
+            words.shift();
+    }
+    words = words.filter((w) => !removeWords.includes(w.toLowerCase()));
+    const folderWords = new Set(splitWords(folderName).map((w) => w.toLowerCase()));
+    words = words.filter((w) => !folderWords.has(w.toLowerCase()));
+    if (!words.length)
+        return "Icon";
+    let pascal = words.map(capitalizeWord).join("");
+    if (/^[0-9]/.test(pascal))
+        pascal = `Icon${pascal}`;
+    pascal = pascal.replace(/[^a-zA-Z0-9]/g, "");
+    return pascal || "Icon";
+}
+export function toKebabCase(str) {
+    return String(str)
+        .replace(/([a-z])([A-Z])/g, "$1-$2")
+        .replace(/[\s_]+/g, "-")
+        .replace(/[^a-zA-Z0-9-]/g, "")
+        .toLowerCase();
+}
+export function toCamelCase(str) {
+    const pascal = String(str)
+        .replace(/[-_]+/g, " ")
+        .replace(/[^\w\s]/g, "")
+        .replace(/\s+(.)(\w*)/g, (_, $1, $2) => $1.toUpperCase() + $2.toLowerCase())
+        .replace(/^./, (s) => s.toUpperCase());
+    let camel = pascal.charAt(0).toLowerCase() + pascal.slice(1);
+    if (/^[0-9]/.test(camel) || !camel)
+        camel = `folder${camel || "Unknown"}`;
+    return camel;
+}

package/dist/registry.d.ts

@@ -0,0 +1,10 @@
+export interface IconFile {
+    componentName: string;
+    fileName: string;
+    folderName: string;
+    path: string[];
+}
+/** `bold.logout`, `a.b.x` for a nested folder; an icon at the top takes the input folder's name. */
+export declare function registryKey(file: IconFile): string;
+export declare function registryCode(files: IconFile[]): string;
+export declare function iconComponentCode(defaultSize: number, defaultStrokeWidth: number): string;

package/dist/registry.js

@@ -0,0 +1,120 @@
+import { HEADER } from "./header.js";
+/** `bold.logout`, `a.b.x` for a nested folder; an icon at the top takes the input folder's name. */
+export function registryKey(file) {
+    const base = file.fileName.replace(".tsx", "");
+    return `${file.path.length ? file.path.join(".") : file.folderName}.${base}`;
+}
+export function registryCode(files) {
+    const seen = new Map();
+    const entries = files.map((file) => {
+        const base = file.fileName.replace(".tsx", "");
+        const importPath = "./" + [...file.path, base].join("/");
+        const key = registryKey(file);
+        if (seen.has(key)) {
+            throw new Error(`react-svg-icons: two icons have the name "${key}": ${seen.get(key)} and ${importPath}`);
+        }
+        seen.set(key, importPath);
+        return `  "${key}": () => import("${importPath}").then((m) => m.${file.componentName}),`;
+    });
+    return `${HEADER}
+
+export const iconRegistry = {
+${entries.join("\n")}
+} as const;
+
+export type IconName = keyof typeof iconRegistry;
+`;
+}
+export function iconComponentCode(defaultSize, defaultStrokeWidth) {
+    return `${HEADER}
+"use client";
+
+import * as React from "react";
+import { iconRegistry, type IconName } from "./registry";
+
+export type IconProps = Omit<
+  React.SVGProps<SVGSVGElement>,
+  "color" | "stroke" | "fill" | "strokeWidth" | "opacity"
+> & {
+  name: IconName;
+  size?: number | string;
+  color?: string;
+  stroke?: string;
+  fill?: string;
+  strokeWidth?: number | string;
+  opacity?: number | string;
+  colors?: (string | undefined)[];
+  opacities?: (number | string | undefined)[];
+  strokeWidths?: (number | string | undefined)[];
+  title?: string;
+};
+
+const DEFAULT_ICON_PROPS = {
+  size: ${defaultSize},
+  color: "currentColor",
+  strokeWidth: ${defaultStrokeWidth},
+};
+
+type RegistryLoader = (typeof iconRegistry)[IconName];
+type ResolvedIconComponent = Awaited<ReturnType<RegistryLoader>>;
+type LazyIconComponent = React.LazyExoticComponent<ResolvedIconComponent>;
+
+// CRITICAL: React.lazy() must NEVER be called inside render — a fresh lazy
+// wrapper type on every render makes React unmount the icon, re-suspend and
+// remount it on every single parent render. Create one wrapper per icon
+// name and reuse it for the lifetime of the app.
+const lazyComponents = new Map<IconName, LazyIconComponent>();
+
+const getLazyIcon = (name: IconName): LazyIconComponent | null => {
+  const cached = lazyComponents.get(name);
+  if (cached) return cached;
+
+  const loader = iconRegistry[name];
+  if (!loader) return null;
+
+  const created = React.lazy(() =>
+    loader().then((Component) => ({ default: Component })),
+  ) as LazyIconComponent;
+  lazyComponents.set(name, created);
+  return created;
+};
+
+const IconBase = React.forwardRef<SVGSVGElement, IconProps>(
+  ({ name, ...props }, ref) => {
+    const LazyIcon = getLazyIcon(name);
+
+    if (!LazyIcon) {
+      if (process.env.NODE_ENV !== "production") {
+        console.warn(\`[Icon] Unknown icon name: "\${name}".\`);
+      }
+      return null;
+    }
+
+    const mergedProps = { ...DEFAULT_ICON_PROPS, ...props };
+    const size = mergedProps.size ?? ${defaultSize};
+
+    return (
+      <React.Suspense
+        fallback={
+          <svg
+            width={size}
+            height={size}
+            viewBox="0 0 24 24"
+            className={mergedProps.className}
+            aria-hidden="true"
+          />
+        }
+      >
+        <LazyIcon ref={ref} {...mergedProps} />
+      </React.Suspense>
+    );
+  }
+);
+
+IconBase.displayName = "Icon";
+
+// Only export the lazy component here
+export const Icon = IconBase;
+export type { IconName };
+`;
+}

package/package.json

@@ -1,6 +1,78 @@
 {
   "name": "@mrzr/react-svg-icons",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
-}
+  "version": "0.1.0",
+  "description": "Turn a folder of SVG icons into typed React components, with a prop per colour and a lazy-loaded Icon.",
+  "keywords": [
+    "figma",
+    "icons",
+    "svg",
+    "react",
+    "svgo",
+    "codegen",
+    "typescript"
+  ],
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/mohammadreza-zr/react-svg-icons.git"
+  },
+  "homepage": "https://github.com/mohammadreza-zr/react-svg-icons#readme",
+  "bugs": {
+    "url": "https://github.com/mohammadreza-zr/react-svg-icons/issues"
+  },
+  "type": "module",
+  "bin": {
+    "react-svg-icons": "dist/cli.js"
+  },
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "default": "./dist/index.js"
+    },
+    "./package.json": "./package.json"
+  },
+  "files": [
+    "dist",
+    "README.md",
+    "CHANGELOG.md",
+    "LICENSE"
+  ],
+  "engines": {
+    "node": ">=20"
+  },
+  "scripts": {
+    "build": "tsc -p .",
+    "typecheck": "tsc -p . --noEmit",
+    "test": "npm run build && node scripts/test.mjs",
+    "docs:sync": "bash scripts/sync-wiki.sh",
+    "prepublishOnly": "npm test"
+  },
+  "dependencies": {
+    "svgo": "^4.0.2",
+    "svgson": "^5.3.1",
+    "yaml": "^2.9.0"
+  },
+  "peerDependencies": {
+    "prettier": ">=3"
+  },
+  "peerDependenciesMeta": {
+    "prettier": {
+      "optional": true
+    }
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "devDependencies": {
+    "@types/node": "^26.6.5",
+    "@types/react": "^19.2.14",
+    "@types/react-dom": "^19.2.3",
+    "esbuild": "^0.28.2",
+    "prettier": "3.9.10",
+    "react": "^19.2.5",
+    "react-dom": "^19.2.5",
+    "typescript": "~6.0.2"
+  }
+}