@iconsroom/react 0.1.0

package/README.md

@@ -0,0 +1,63 @@
+# @iconsroom/react
+
+276,000+ open source icons for React — two ways to use them, both free.
+
+## 1. Runtime component (all 276K, nothing bundled)
+
+```bash
+npm install @iconsroom/react react
+```
+
+```jsx
+import { Icon } from '@iconsroom/react';
+
+<Icon pack="heroicons" name="academic-cap" size={24} color="#0f172a" />
+```
+
+The icon's SVG is fetched from the IconsRoom CDN on first use and cached in
+memory (deduped across every instance). Recoloring is knockout-safe — white
+detail is preserved, multicolor icons are left alone. SSR-safe; reserves its
+box before load so nothing shifts.
+
+Props: `pack`, `name`, `size` (default 24), `color` (optional hex),
+`title` (accessible label), plus any `<span>` props.
+
+## 2. Vendor icons as local components (zero runtime dependency)
+
+Prefer to own the code and ship nothing extra? Generate a standalone component
+per icon — tree-shakeable, offline forever, no dependency on this package:
+
+```bash
+npx @iconsroom/react add heroicons/academic-cap
+npx @iconsroom/react add tabler/home tabler/settings --ts --out src/icons
+```
+
+```jsx
+import { AcademicCapIcon } from './src/icons/AcademicCapIcon';
+
+<AcademicCapIcon size={20} className="text-slate-700" />
+```
+
+`--ts` emits typed `.tsx`; `--out` sets the directory (default `src/icons`).
+
+## Which one?
+
+| | Runtime `<Icon>` | Vendored (CLI) |
+|---|---|---|
+| Bundle size | tiny (one component) | only what you add |
+| Works offline | needs the CDN | yes |
+| Access all 276K | instantly | one command each |
+| Own the code | no | yes |
+
+## Licensing
+
+Every icon is open source; most packs are MIT / Apache 2.0 / CC BY, a few are
+CC BY-NC (non-commercial). Check the pack on [iconsroom.com](https://iconsroom.com).
+
+## Development
+
+```bash
+npm test    # framework-free core + codegen (10 checks)
+```
+
+MIT © IconsRoom

package/bin/cli.js

@@ -0,0 +1,76 @@
+#!/usr/bin/env node
+// @iconsroom/react CLI — vendor icons as local React components.
+//
+//   npx @iconsroom/react add heroicons/academic-cap
+//   npx @iconsroom/react add tabler/home tabler/settings --ts --out src/icons
+//
+// Writes a standalone component per icon (no runtime dependency). You own the
+// code; it's tree-shakeable and offline forever.
+import { mkdirSync, writeFileSync } from 'node:fs';
+import { join } from 'node:path';
+import { iconUrl, toComponentSource, pascalCase } from '../src/core.js';
+
+function parseArgs(argv) {
+    const args = { icons: [], ts: false, out: 'src/icons' };
+    for (let i = 0; i < argv.length; i++) {
+        const a = argv[i];
+        if (a === '--ts' || a === '--typescript') args.ts = true;
+        else if (a === '--out') args.out = argv[++i];
+        else if (a === 'add') continue;
+        else args.icons.push(a);
+    }
+    return args;
+}
+
+async function fetchSvg(pack, name) {
+    const res = await fetch(iconUrl(pack, name));
+    if (!res.ok) throw new Error(`not found (HTTP ${res.status})`);
+    const svg = await res.text();
+    if (!svg.includes('<svg')) throw new Error('did not return SVG');
+    return svg;
+}
+
+async function main() {
+    const [, , ...argv] = process.argv;
+    if (argv[0] !== 'add' || argv.length < 2) {
+        console.log(`@iconsroom/react — vendor open source icons as local components
+
+Usage:
+  npx @iconsroom/react add <pack>/<name> [more…] [--ts] [--out DIR]
+
+Examples:
+  npx @iconsroom/react add heroicons/academic-cap
+  npx @iconsroom/react add tabler/home tabler/settings --ts --out src/icons
+
+Find icons at https://iconsroom.com`);
+        process.exit(argv.length ? 1 : 0);
+    }
+
+    const { icons, ts, out } = parseArgs(argv);
+    mkdirSync(out, { recursive: true });
+
+    const ext = ts ? 'tsx' : 'jsx';
+    let ok = 0;
+    for (const spec of icons) {
+        const [pack, name] = spec.split('/');
+        if (!pack || !name) {
+            console.error(`✗ ${spec} — use pack/name (e.g. tabler/home)`);
+            continue;
+        }
+        try {
+            // eslint-disable-next-line no-await-in-loop
+            const svg = await fetchSvg(pack, name);
+            const source = toComponentSource(svg, name, { typescript: ts });
+            const file = join(out, `${pascalCase(name)}Icon.${ext}`);
+            writeFileSync(file, source);
+            console.log(`✓ ${spec} → ${file}`);
+            ok++;
+        } catch (err) {
+            console.error(`✗ ${spec} — ${err.message}`);
+        }
+    }
+    console.log(`\n${ok}/${icons.length} icon${icons.length === 1 ? '' : 's'} added to ${out}/`);
+    process.exit(ok === icons.length ? 0 : 1);
+}
+
+main();

package/package.json

@@ -0,0 +1,31 @@
+{
+    "name": "@iconsroom/react",
+    "version": "0.1.0",
+    "description": "276,000+ open source icons for React — a runtime <Icon> component, plus a CLI to vendor any icon as a local component.",
+    "type": "module",
+    "main": "src/index.js",
+    "module": "src/index.js",
+    "exports": {
+        ".": "./src/index.js",
+        "./core": "./src/core.js"
+    },
+    "bin": {
+        "iconsroom-react": "bin/cli.js"
+    },
+    "files": ["src/", "bin/", "README.md"],
+    "sideEffects": false,
+    "keywords": ["react", "icons", "svg", "iconsroom", "heroicons", "tabler", "lucide", "open-source"],
+    "author": "IconsRoom (https://iconsroom.com)",
+    "license": "MIT",
+    "homepage": "https://iconsroom.com",
+    "repository": { "type": "git", "url": "https://github.com/iconsroom/react" },
+    "peerDependencies": {
+        "react": ">=17"
+    },
+    "peerDependenciesMeta": {
+        "react": { "optional": true }
+    },
+    "scripts": {
+        "test": "node test.mjs"
+    }
+}

package/src/Icon.jsx

@@ -0,0 +1,77 @@
+// @iconsroom/react — runtime <Icon> component.
+// Fetches an icon's SVG from the IconsRoom CDN on first use, caches it in
+// memory (deduped across all instances), optionally recolors it, and renders
+// it inline. Works for all 276,000+ icons without bundling any of them.
+//
+//   import { Icon } from '@iconsroom/react';
+//   <Icon pack="heroicons" name="academic-cap" size={24} color="#0f172a" />
+import * as React from 'react';
+import { iconUrl, colorizeSvg, normalizeSvg } from './core.js';
+
+const cache = new Map(); // "pack/name" -> Promise<string svg> | string svg
+
+function loadSvg(pack, name) {
+    const key = `${pack}/${name}`;
+    if (cache.has(key)) return cache.get(key);
+    const promise = fetch(iconUrl(pack, name))
+        .then((res) => {
+            if (!res.ok) throw new Error(`Icon ${key} not found`);
+            return res.text();
+        })
+        .then((svg) => {
+            const normalized = normalizeSvg(svg);
+            cache.set(key, normalized); // replace promise with resolved value
+            return normalized;
+        })
+        .catch((err) => {
+            cache.delete(key);
+            throw err;
+        });
+    cache.set(key, promise);
+    return promise;
+}
+
+export function Icon({ pack, name, size = 24, color, title, className, style, ...rest }) {
+    const key = `${pack}/${name}`;
+    const cached = cache.get(key);
+    const initial = typeof cached === 'string' ? cached : '';
+    const [svg, setSvg] = React.useState(initial);
+
+    React.useEffect(() => {
+        let active = true;
+        const result = loadSvg(pack, name);
+        if (typeof result === 'string') {
+            setSvg(result);
+            return undefined;
+        }
+        result.then((markup) => active && setSvg(markup)).catch(() => active && setSvg(''));
+        return () => {
+            active = false;
+        };
+    }, [pack, name]);
+
+    const markup = svg && color ? colorizeSvg(svg, color) : svg;
+
+    // Reserve the box before load so layout doesn't shift.
+    const boxStyle = {
+        display: 'inline-flex',
+        width: size,
+        height: size,
+        color,
+        ...style,
+    };
+
+    return (
+        <span
+            className={className}
+            style={boxStyle}
+            role="img"
+            aria-label={title || `${name} icon`}
+            aria-hidden={title ? undefined : 'true'}
+            {...rest}
+            dangerouslySetInnerHTML={markup ? { __html: markup } : undefined}
+        />
+    );
+}
+
+export default Icon;

package/src/core.js

@@ -0,0 +1,88 @@
+// @iconsroom/react — framework-free core (no React import here, so it's
+// unit-testable in plain Node). Shared by the runtime <Icon> component and
+// the vendoring CLI.
+
+export const CDN = 'https://files.svgcdn.io';
+
+export function iconUrl(pack, name) {
+    return `${CDN}/${pack}/${name}.svg`;
+}
+
+// Knockout-safe recolor (same rules as the rest of IconsRoom): white paint is
+// protected detail; multicolor icons are left untouched.
+const isKnockout = (v) => /^(#fff(?:fff)?|white|rgb\(\s*255\s*,\s*255\s*,\s*255\s*\))$/i.test((v || '').trim());
+
+export function colorizeSvg(svg, color) {
+    if (!svg || !color) return svg;
+
+    const fills = new Set();
+    const strokes = new Set();
+    let m;
+    const attrRe = /\s(fill|stroke)="([^"]+)"/g;
+    while ((m = attrRe.exec(svg))) {
+        const [, kind, value] = m;
+        if (value === 'none' || value === 'currentColor' || value.startsWith('url') || isKnockout(value)) continue;
+        (kind === 'fill' ? fills : strokes).add(value.trim());
+    }
+    const hasDuotone = /opacity="\.?0?\.2"/.test(svg);
+    if ((fills.size > 1 || strokes.size > 1) && !hasDuotone) return svg;
+
+    let out = svg.replace(/fill="currentColor"/g, `fill="${color}"`);
+    out = out.replace(/stroke="([^"]*)"/g, (mm, v) => (v === 'none' || isKnockout(v) ? mm : `stroke="${color}"`));
+    for (const tag of ['path', 'circle', 'rect', 'polygon', 'polyline', 'ellipse', 'line', 'g']) {
+        const re = new RegExp(`<${tag}([^>]*)fill="([^"]*)"`, 'g');
+        out = out.replace(re, (mm, a, v) => (v !== 'none' && !isKnockout(v) ? `<${tag}${a}fill="${color}"` : mm));
+    }
+    if (fills.size === 0 && strokes.size === 0) {
+        out = out.replace(/<svg([^>]*)>/, (mm, a) => (a.includes('fill=') ? mm : `<svg${a} fill="${color}">`));
+    }
+    return out;
+}
+
+// Strip fixed width/height and ensure a viewBox so the SVG scales to its box.
+export function normalizeSvg(svg) {
+    return svg.replace(/<svg([^>]*)>/, (match, attrs) => {
+        let a = attrs;
+        if (!/viewBox=/i.test(a)) {
+            const w = (a.match(/\swidth="([0-9.]+)(?:px)?"/i) || [])[1];
+            const h = (a.match(/\sheight="([0-9.]+)(?:px)?"/i) || [])[1];
+            if (w && h) a += ` viewBox="0 0 ${w} ${h}"`;
+        }
+        a = a.replace(/\swidth="[^"]*"/i, '').replace(/\sheight="[^"]*"/i, '');
+        return `<svg${a}>`;
+    });
+}
+
+export function pascalCase(name) {
+    return name
+        .split(/[-_/]/)
+        .filter(Boolean)
+        .map((w) => w[0].toUpperCase() + w.slice(1))
+        .join('');
+}
+
+// Generate a standalone React component source string from raw SVG markup.
+// Used by the CLI to vendor icons (no runtime dependency in the user's app).
+export function toComponentSource(svg, name, { typescript = false } = {}) {
+    const componentName = `${pascalCase(name)}Icon`;
+    const inner = normalizeSvg(svg)
+        .replace(/<svg([^>]*)>/, '<svg$1 width={size} height={size} {...props}>')
+        .replace(/\sclass="/g, ' className="')
+        .replace(
+            /\s(stroke-width|stroke-linecap|stroke-linejoin|fill-rule|clip-rule|clip-path|stroke-miterlimit|stroke-dasharray|stroke-dashoffset|fill-opacity|stroke-opacity)=/g,
+            (mm, attr) => ` ${attr.replace(/-([a-z])/g, (x, c) => c.toUpperCase())}=`
+        );
+
+    if (typescript) {
+        return (
+            `import * as React from 'react';\n\n` +
+            `export function ${componentName}(\n` +
+            `  { size = 24, ...props }: React.SVGProps<SVGSVGElement> & { size?: number | string }\n` +
+            `) {\n  return (\n    ${inner}\n  );\n}\n`
+        );
+    }
+    return (
+        `export function ${componentName}({ size = 24, ...props }) {\n` +
+        `  return (\n    ${inner}\n  );\n}\n`
+    );
+}

package/src/index.js

@@ -0,0 +1,2 @@
+export { Icon, default } from './Icon.jsx';
+export { iconUrl, colorizeSvg } from './core.js';