@jiwambe/icons

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

Installation

pnpm add @jiwambe/icons

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

Usage

Direct import (tree-shakeable)

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 after generation, so they follow the SVG color (for example from the Icon wrapper or a parent with color: …).

With the Icon wrapper

The Icon wrapper component adds Jiwambe design-token support:

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. (resolved to var(--color-…) when your app defines those custom properties)
• Any valid CSS color string — 'white', '#ffffff', 'rgb(0,0,0)', etc.

Adding new icons

1. Export SVGs from Figma (24×24, stroke-based; use #000, black, or the default #181B1B swatch for any stroke or fill that should follow currentColor after generation)
2. Place .svg files in the /svg directory
3. Run the generator:

pnpm generate

4. Build the package:

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 and #181B1B / #181b1b 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 audit | Check dependency advisories (run before release when bumping dev tooling) | | pnpm release | Version bump, changelog, git tag, GitHub release, and npm publish (release-it) |

Versioning and publishing

Versions follow Semantic Versioning (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, black, or #181B1B for strokes and fills that must follow currentColor after pnpm generate. Literal fill="white" on masks and clips is left unchanged; see Adding new icons.

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

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). Library builds use Vite 6 and @vitejs/plugin-react 5 in devDependencies; consumers only need the published dist/ output. 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).