@generation/icons

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	build:umd + build:esm (run by CI on release)
pnpm run build:umd	Webpack: bundles src/index.js into the UMD/CJS dist/index.js (main / require)
pnpm run build:esm	Babel: one ESM module per icon in dist/esm/Icons/*.js + dist/esm/index.js (module / import, tree-shakeable)
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.