# @generation/icons

> SVG bases React icon components

Latest version **1.3.0** (published 2026-10-22) · ISC license · 0 weekly downloads

## Install

```sh
npm install @generation/icons
pnpm add @generation/icons
yarn add @generation/icons
bun add @generation/icons
```

## Health

**Score 60/100 (C)** — status: active.

Positive: esm support; no vulnerabilities; recently updated; high maintenance score.

Warnings: low downloads; no types.

## Facts

| | |
|---|---|
| Version | 1.3.0 |
| Published | 2026-10-22 |
| First published | 2024-07-30 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Dependencies | 0 |
| Unpacked size | 1.6 MB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | digital-generation |
| Maintainers | generation |
| Keywords | react, svg, svgr, webpack |

## Links

- npm: https://www.npmjs.com/package/@generation/icons
- npm.io page: https://npm.io/package/@generation/icons

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 1.3.0 (latest) — 2026-10-22
- 1.2.0 — 2026-06-26
- 1.1.17 — 2026-05-27
- 1.1.16 — 2026-05-27
- 1.1.15 — 2026-05-26
- 1.1.13 — 2026-01-21
- 1.1.12 — 2026-01-19
- 1.1.11 — 2026-01-15
- 1.1.10 — 2025-09-03
- 1.1.9 — 2025-06-03
- 1.1.8 — 2024-12-10
- 1.1.7 — 2024-12-09
- 1.1.6 — 2024-12-09
- 1.1.5 — 2024-12-09
- 1.1.4 — 2024-12-09
- … 6 more at https://npm.io/package/@generation/icons/versions

## README

# 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:

   ```bash
   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](scripts/icon-categories.json) (it always wins over the heuristic). Names containing `colored` always map to the `colored` category.

### Or run the steps individually

```bash
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](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](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

```bash
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](https://www.conventionalcommits.org). 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.

---
_Source: https://npm.io/package/@generation/icons · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._