npm package: @jiwambe/icons
Description: Tree-shakeable React icon components for the Jiwambe design system. Generated from SVG source files via SVGR.
Author: Jiwambe
Latest version: 0.3.1

# @jiwambe/icons

Tree-shakeable React icon components for the Jiwambe design system. Generated from SVG source files via SVGR.

## Installation

```bash
pnpm add @jiwambe/icons
```

**Peer dependency:** React `^19.2.4` (see `package.json` → `peerDependencies`)

## Usage

### Direct import (tree-shakeable)

```tsx
import { ChevronRight, AlertCircle } from '@jiwambe/icons';

function Example() {
  return (
    <button>
      Next <ChevronRight size={20} />
    </button>
  );
}
```

Each icon accepts all standard SVG props plus:

| Prop    | Type               | Default          | Description                                              |
| ------- | ------------------ | ---------------- | -------------------------------------------------------- |
| `size`  | `number \| string` | `24`             | Sets both width and height                               |
| `title` | `string`           | `undefined`      | Accessible label; sets `role="img"` when provided        |
| `...`   | `SVGProps`         | —                | All standard SVG attributes (className, style, etc.)     |

Icons use `currentColor` for stroke/fill, so they inherit the parent's text color.

### With the Icon wrapper

The `Icon` wrapper component adds Jiwambe design-token support:

```tsx
import { Icon, ChevronRight } from '@jiwambe/icons';

function Example() {
  return (
    <Icon
      icon={<ChevronRight />}
      size={20}
      color="icon-primary"
      title="Go to next page"
    />
  );
}
```

The `color` prop accepts:
- `'currentColor'` — inherit from parent (default)
- Jiwambe token names — `'icon-primary'`, `'icon-inverse'`, `'icon-err'`, etc.
- Any CSS color string — `'#ff0000'`, `'rgb(0,0,0)'`, etc.

## Adding new icons

1. Export SVGs from Figma (24×24, stroke-based, using `#000` or `currentColor`)
2. Place `.svg` files in the `/svg` directory
3. Run the generator:

```bash
pnpm generate
```

4. Build the package:

```bash
pnpm build
```

### Naming convention

SVG filenames are converted to PascalCase component names:

| Filename            | Component name   |
| ------------------- | ---------------- |
| `chevron-right.svg` | `ChevronRight`   |
| `alert-circle.svg`  | `AlertCircle`    |
| `upload-01.svg`     | `Upload01`       |
| `x-close.svg`       | `XClose`         |
| `company-logo-plain.svg` | `CompanyLogoPlain` |
| `company-logo-horizontal.svg` | `CompanyLogoHorizontal` |
| `company-logo-vertical.svg` | `CompanyLogoVertical` |
| `socials-whatsapp.svg` | `SocialsWhatsapp` |

### Generator details

The `pnpm generate` script:
- Reads all `.svg` files from `/svg`
- Optimizes SVGs via SVGO (preserves viewBox, removes dimensions)
- Converts `#000` / `#000000` / `black` fills/strokes to `currentColor`
- Generates typed React components in `src/icons/`
- Creates a barrel export at `src/icons/index.ts`

## Build output

The build uses Vite in library mode with `preserveModules`, so each icon is a separate ES module in `dist/icons/`. Bundlers like Webpack, Vite, and esbuild will tree-shake unused icons automatically.

## Scripts

| Script         | Description                               |
| -------------- | ----------------------------------------- |
| `pnpm generate`   | Generate React components from SVGs       |
| `pnpm build`      | Generate + typecheck + Vite build         |
| `pnpm build:only` | Typecheck + Vite build (skip generation)  |
| `pnpm typecheck`  | TypeScript type checking only             |
| `pnpm release`    | Version bump, changelog, git tag, GitHub release, and npm publish ([release-it](https://github.com/release-it/release-it)) |

## Versioning and publishing

Versions follow [Semantic Versioning](https://semver.org/) (`MAJOR.MINOR.PATCH`):

| Kind of change | Bump |
| -------------- | ---- |
| Breaking changes to the public API or export surface | **Major** |
| New icons or backwards-compatible additions | **Minor** |
| Bug fixes, SVG/source corrections, non-breaking doc tweaks | **Patch** |

Icon SVGs should use `#000` (or `black`) for strokes and fills that must follow `currentColor` after `pnpm generate`; see [Adding new icons](#adding-new-icons).

**Recommended flow:** use [Conventional Commits](https://www.conventionalcommits.org/) in git history (for example `feat(icons): …`, `fix(icons): …`) so `pnpm release` can extend `CHANGELOG.md` via `@release-it/conventional-changelog`.

```bash
pnpm release
```

Ensure you are logged in to npm (`npm login`), have permission to publish `@jiwambe/icons`, and a clean working tree (commit SVG and source changes first). The `prepare` script runs `pnpm build` on install, which regenerates icons from `/svg` and produces `dist/`.

**Manual alternative:** set `"version"` in `package.json`, edit `CHANGELOG.md`, commit, tag `v<version>`, then run `pnpm build` and `pnpm publish` (the package is configured for public access in `publishConfig`).