Generation Icons

React icon library (@generation/icons) generated from raw SVGs. The SVGs in assets/ are the source of truth; the scripts turn each one into a React component, build the export barrel, and regenerate the demo gallery.

This project uses pnpm (pinned via the packageManager field). Enable it with corepack enable if you don't have it, then install deps with pnpm install.

Note: create and list collide with built-in pnpm commands, so run those scripts as pnpm run create / pnpm run list (not pnpm create). The other scripts work as pnpm <script>.

The pipeline at a glance

assets/*.svg  ──transform──▶  src/Icons/*.jsx  ──create──▶  src/Icons/index.js
                                                 └─create:gallery──▶  packages/demo/src/data/iconManifest.js

Everything under src/Icons/ is generated — never edit those files by hand, they get overwritten on the next build.

Add new icons

1. Add the SVG file to the assets/ folder. Use a kebab-case filename (e.g. thumbs-up.svg); it becomes the PascalCase component name (ThumbsUp).

2. Change the fill value to currentColor so the icon inherits the surrounding text color.

3. Run the whole pipeline at once:

   pnpm build-all

   This runs clean → transform → create → create:gallery in order. The new icon flows into the gallery automatically: its style (Outline / Fill / Fill-out) comes from the filename suffix (-fill / -fill-out), and its sidebar category is auto-guessed by a keyword heuristic. To force a category, add a "ComponentName": "category-id" entry to scripts/icon-categories.json (it always wins over the heuristic). Names containing colored always map to the colored category.

Or run the steps individually

pnpm transform      # assets/*.svg  →  React components in src/Icons/
pnpm run create     # writes src/Icons/index.js (one export per icon)
pnpm run create:gallery   # regenerates the demo icon manifest (src/data/iconManifest.js)

Update the gallery

The gallery is the demo app under packages/demo/ that previews every icon (search, style/category filters, size, light/dark, and a per-icon detail drawer). The UI is hand-written in packages/demo/src/components/Gallery/; only its data is generated.

• pnpm run create:gallery regenerates packages/demo/src/data/iconManifest.js — the per-icon metadata (kebab name, PascalCase component, variant, base, category) the gallery consumes. Categories come from scripts/icon-categories.json with a keyword-heuristic fallback (see "Add new icons" below). It already runs as part of pnpm build-all.
• The demo imports @generation/icons from the published npm package — the exact version pinned in packages/demo/package.json, not local source — and only renders icons present in that build. CI builds the gallery against the pinned version (pnpm install --frozen-lockfile), not @latest, to avoid a race with npm registry propagation right after a release. So newly published icons appear in the deployed gallery once you bump the pin (and merge).

Preview the gallery locally

cd packages/demo
pnpm install
pnpm dev          # Vite dev server at http://localhost:5173

Because the demo uses the published package, local preview shows the currently published icons. To preview an unreleased icon you'd have to point the demo at the local build manually.

All scripts (root)

| Command | What it does | | --- | --- | | pnpm build-all | clean + transform + create + create:gallery (the full generation pass) | | pnpm transform | SVGR: assets/*.svg → React components in src/Icons/ | | pnpm run create | Generates src/Icons/index.js (the export barrel) | | pnpm run create:gallery | Regenerates the demo icon manifest (packages/demo/src/data/iconManifest.js) | | pnpm run build | Webpack: bundles src/index.js into the UMD dist/index.js (run by CI on release) | | pnpm run list | Writes dist/Icons.txt and dist/IconsGallery.txt (plain icon-name lists) | | pnpm run clean | Removes the generated src/Icons/* |

Commit conventions

Releases are automated by semantic-release, which derives the version bump from Conventional Commits. Because the demo lives in this same package, the commit type must reflect whether a change touches the published library:

| Change | Type | Release effect | | --- | --- | --- | | New or updated icons | fix(icons): (or fix(assets), fix(timer), … by area) | patch | | Demo / gallery | chore(demo): / chore(gallery): | none | | CI | fix(ci): | none | | Build tooling | build: | none | | Deps / package.json | chore(package): | none | | Other maintenance | chore: | none |

• We don't use feat — icons ship as patch bumps (versions stay 1.1.x).
• Always include a scope in parentheses — never a bare type: (e.g. chore(package):, docs(readme):, fix(icons):).
• Keep library changes in their own commits, separate from demo-only changes, so demo work never bumps the published package.
• Use a single short type(scope): description subject line.