@mrzr/react-svg-icons 0.1.0 → 0.1.1

package/CHANGELOG.md

@@ -1,10 +1,17 @@
 # Changelog
 
+## 0.1.1
+
+- **`Icon` keeps the stroke width of the SVG.** It no longer passes `strokeWidth`, so an icon loaded by name is drawn with the width it has when imported directly (`logout` at 1.5, not 2). `defaultStrokeWidth` now only applies to an SVG that has no `stroke-width`. If you relied on `Icon` forcing the width, pass `strokeWidth` to it.
+- **The full package name** is in the output: the banner of the generated files and the start of every message say `@mrzr/react-svg-icons`, and the docs write `npx @mrzr/react-svg-icons`. A bare `npx react-svg-icons` would run a different package of that name from npm. Files with the old banner are still recognised as generated.
+- The README and the wiki say what the tool does, and no longer mention Figma or other frameworks.
+- A test no longer depends on whether `tsc` prints colours, which failed `npm publish` in a terminal that forces them.
+
 ## 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.
+- Turns a folder of SVGs 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).

package/README.md

@@ -1,12 +1,6 @@
 # @mrzr/react-svg-icons
 
-[![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)
+Turn a folder of SVG files into typed React components (TSX). Every icon gets props for its size and colours, so you can restyle it without editing the SVG.
 
 ```bash
 npm install --save-dev @mrzr/react-svg-icons
@@ -15,30 +9,14 @@ 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`:
+Put your SVG files 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
@@ -46,29 +24,27 @@ 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
 ```
 
+Use an icon by name, loaded on demand, or import it directly:
+
 ```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 */}
+<Icon name="bold.logout" size={20} />
+<Logout size={20} color="crimson" />
 ```
 
-The config can also be `.yml`, `.json` or an rc file (`.react-svg-iconsrc`). It is always data, never a script.
+The config can also be `.yml`, `.json` or an rc file (`.react-svg-iconsrc`).
 
 ---
 
-## 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
+## What you get
 
-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.
+- **A typed component per SVG**, optimised with SVGO, with a forwarded `ref`
+- **Props to customise it**: `size`, `color`, `stroke`, `fill`, `strokeWidth`, `opacity`, `title`, and `colors`, `opacities`, `strokeWidths` lists that set the colours of the drawing one by one
+- **A typed `name`** for `Icon`: `name="bold.logut"` is a type error, and each icon loads as its own chunk
+- **Output formatted by your own prettier**, so it matches what your formatting would leave
+- **`--check`** for CI, and cleanup of generated files whose SVG you removed. A file the tool did not write is never touched
 
 ---
 
@@ -83,7 +59,7 @@ Everything is in the **[Wiki](https://github.com/mohammadreza-zr/react-svg-icons
 
 ## 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.
+Node.js 20 or newer. The generated code needs React (tested with 19) and, in TypeScript, `"moduleResolution": "bundler"`, because its imports have no file extension.
 
 ## License
 

package/dist/build.js

@@ -3,7 +3,7 @@ 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 { HEADER, MARKER_PATTERN } from "./header.js";
 import { cleanIconName, toCamelCase, toKebabCase } from "./names.js";
 import { iconComponentCode, registryCode } from "./registry.js";
 function buildTree(dir, basePath = []) {
@@ -34,7 +34,7 @@ function walkTree(node, isRoot, outDir, config, out) {
         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`);
+            throw new Error(`@mrzr/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 });
@@ -53,7 +53,7 @@ function walkTree(node, isRoot, outDir, config, out) {
         // 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) });
+        out.push({ path: path.join(currentDir, "icon.tsx"), content: iconComponentCode(config.defaultSize) });
         index += `export * from "./registry";\nexport * from "./icon";\n`;
     }
     else {
@@ -72,16 +72,16 @@ export async function generate(input, cwd = process.cwd()) {
     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}`);
+        throw new Error(`@mrzr/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})`);
+        throw new Error(`@mrzr/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}`);
+        throw new Error(`@mrzr/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");
@@ -93,7 +93,7 @@ function existingGenerated(dir) {
         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))
+        else if (/\.tsx?$/.test(entry.name) && MARKER_PATTERN.test(readFileSync(full, "utf8").slice(0, 200)))
             found.push(full);
     }
     return found;

package/dist/cli.js

@@ -3,10 +3,10 @@ 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
+const HELP = `@mrzr/react-svg-icons — SVG icons to typed React components
 
 Usage:
-  react-svg-icons [build] [--config <file>] [--check]
+  npx @mrzr/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)
@@ -30,11 +30,11 @@ function parse(argv) {
         else if (arg === "--config") {
             const value = rest[++i];
             if (!value)
-                throw new Error("react-svg-icons: --config needs a file");
+                throw new Error("@mrzr/react-svg-icons: --config needs a file");
             args.config = value;
         }
         else
-            throw new Error(`react-svg-icons: unknown argument "${arg}" (see --help)`);
+            throw new Error(`@mrzr/react-svg-icons: unknown argument "${arg}" (see --help)`);
     }
     return args;
 }

package/dist/component.js

@@ -41,11 +41,11 @@ export function generateComponentCode(rawSvg, componentName, file, options) {
         ast = parseSync(optimizeSvg(rawSvg));
     }
     catch (error) {
-        throw new Error(`react-svg-icons: ${file} is not a valid SVG (${error.message})`);
+        throw new Error(`@mrzr/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}`);
+        throw new Error(`@mrzr/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");

package/dist/config.d.ts

@@ -3,7 +3,7 @@ export interface ReactSvgIconsConfig {
     input: string;
     /** Folder the components are written to. */
     outDir: string;
-    /** Words dropped from every icon name, in any case: `[vuesax, icon]`. */
+    /** Words dropped from every icon name, in any case: `[ic, icon]`. */
     removeWords?: string[];
     /** The `size` an icon has when none is given. Default 24. */
     defaultSize?: number;

package/dist/config.js

@@ -8,26 +8,26 @@ export function defineConfig(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(", ")})`);
+            throw new Error(`@mrzr/react-svg-icons: unknown option "${key}" (options: ${OPTIONS.join(", ")})`);
         }
     }
     if (!config.input)
-        throw new Error("react-svg-icons: `input` is required");
+        throw new Error("@mrzr/react-svg-icons: `input` is required");
     if (!config.outDir)
-        throw new Error("react-svg-icons: `outDir` is required");
+        throw new Error("@mrzr/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`);
+            throw new Error(`@mrzr/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");
+        throw new Error("@mrzr/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');
+        throw new Error('@mrzr/react-svg-icons: `format` must be "prettier" or false');
     }
     return {
         input: config.input,
@@ -52,7 +52,7 @@ 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}`);
+            throw new Error(`@mrzr/react-svg-icons: no config at ${file}`);
         return file;
     }
     for (const name of CONFIG_NAMES) {
@@ -60,11 +60,11 @@ export function findConfig(cwd, explicit) {
         if (existsSync(file))
             return file;
     }
-    throw new Error(`react-svg-icons: no config found; create ${CONFIG_NAMES[0]} (see the README)`);
+    throw new Error(`@mrzr/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`);
+        throw new Error(`@mrzr/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");
@@ -73,10 +73,10 @@ export async function loadConfig(file) {
         parsed = isJson ? JSON.parse(text) : parseYaml(text);
     }
     catch (error) {
-        throw new Error(`react-svg-icons: ${file} is not valid ${isJson ? "JSON" : "YAML"} (${error.message})`);
+        throw new Error(`@mrzr/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`);
+        throw new Error(`@mrzr/react-svg-icons: ${file} must hold a mapping of options`);
     }
     return parsed;
 }

package/dist/format.js

@@ -21,7 +21,7 @@ export async function formatFiles(files, cwd, format) {
         return files;
     const prettier = await loadPrettier(cwd);
     if (!prettier) {
-        console.warn("react-svg-icons: prettier is not installed, so the output is not formatted. " +
+        console.warn("@mrzr/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;
     }
@@ -35,7 +35,7 @@ export async function formatFiles(files, cwd, format) {
             });
         }
         catch (error) {
-            throw new Error(`react-svg-icons: the generated ${file.path} does not parse (${error.message})`);
+            throw new Error(`@mrzr/react-svg-icons: the generated ${file.path} does not parse (${error.message})`);
         }
     }
     return out;

package/dist/header.d.ts

@@ -1,2 +1,4 @@
-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";
+export declare const MARKER = "auto-generated by @mrzr/react-svg-icons";
+/** Also the banner of 0.1.0, which did not carry the scope. */
+export declare const MARKER_PATTERN: RegExp;
+export declare const HEADER = "/* eslint-disable */\n/* This file is auto-generated by @mrzr/react-svg-icons. Do not edit manually. */\n\n";

package/dist/header.js

@@ -1,2 +1,4 @@
-export const MARKER = "auto-generated by react-svg-icons";
+export const MARKER = "auto-generated by @mrzr/react-svg-icons";
+/** Also the banner of 0.1.0, which did not carry the scope. */
+export const MARKER_PATTERN = /auto-generated by (@mrzr\/)?react-svg-icons/;
 export const HEADER = `/* eslint-disable */\n/* This file is ${MARKER}. Do not edit manually. */\n\n`;

package/dist/registry.d.ts

@@ -7,4 +7,4 @@ export interface IconFile {
 /** `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;
+export declare function iconComponentCode(defaultSize: number): string;

package/dist/registry.js

@@ -11,7 +11,7 @@ export function registryCode(files) {
         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}`);
+            throw new Error(`@mrzr/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}),`;
@@ -25,7 +25,7 @@ ${entries.join("\n")}
 export type IconName = keyof typeof iconRegistry;
 `;
 }
-export function iconComponentCode(defaultSize, defaultStrokeWidth) {
+export function iconComponentCode(defaultSize) {
     return `${HEADER}
 "use client";
 
@@ -52,7 +52,6 @@ export type IconProps = Omit<
 const DEFAULT_ICON_PROPS = {
   size: ${defaultSize},
   color: "currentColor",
-  strokeWidth: ${defaultStrokeWidth},
 };
 
 type RegistryLoader = (typeof iconRegistry)[IconName];

package/package.json

@@ -1,9 +1,8 @@
 {
   "name": "@mrzr/react-svg-icons",
-  "version": "0.1.0",
+  "version": "0.1.1",
   "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",