@aiqbalsyah/sygnaal-icon-pack

Strongly-typed React icon pack for the Sygnaal app.

import { SygnaalIcon } from '@aiqbalsyah/sygnaal-icon-pack';

<SygnaalIcon name="AED" size={24} className="text-red-500" />

The name prop is a union of every available icon, and each value carries a JSDoc preview — hover or autocomplete in VS Code / Cursor / JetBrains and the actual icon renders inline in the tooltip.

className, style, event handlers, and any other SVG attribute are forwarded straight through to the underlying <svg>. ref is also supported.

Adding or updating an icon

1. Drop the SVG into icons/ following the naming convention:

   Icon_<Name>.svg

   • Words can be separated by spaces, underscores, or hyphens — the codegen PascalCases them. Examples:
     • Icon_AED.svg → AED
     • Icon_Pie Chart.svg → PieChart
     • Icon_Baggage Carry On.svg → BaggageCarryOn
   • To update an existing icon, replace the file in icons/ (keep the same filename so the public name <SygnaalIcon name="..." /> is unchanged).
   • To rename an icon, rename the file — the type union changes accordingly, so all consumer call sites become type errors until they're updated.
   • To remove an icon, delete the file.

2. Regenerate the typed components and registry:

   npm run build:icons

   This rewrites src/icons/ and src/registry.ts from scratch. Both are committed so the package works without re-running codegen.

3. Type-check to catch any consumer call sites that need updating:

   npm run typecheck

4. Build the publishable bundle:

   npm run build

   npm run build runs build:icons first, so step 2 is optional if you go straight to building.

Note: never edit files in src/icons/ or src/registry.ts by hand — they're overwritten on every codegen run. The source of truth is icons/.

How it works

1. Source SVGs live in icons/.
2. scripts/build-icons.mjs reads each file and emits:
   • src/icons/<Name>.tsx — typed React component (via SVGR + SVGO)
   • src/icons/index.ts — barrel export
   • src/registry.ts — { name → component } map. Each entry has a JSDoc preview generated by rasterizing the SVG to a 64×64 PNG so the tooltip stays light even when the source SVG is multi-MB.
3. tsup bundles src/index.ts to dist/ (ESM + CJS + .d.ts).

Tree-shaking

<SygnaalIcon name="..." /> references the registry, which imports every icon — so using it pulls all icons into the bundle. For builds where size matters, import the individual component instead:

import { Icons } from '@aiqbalsyah/sygnaal-icon-pack';
<Icons.AED width={24} />

sideEffects: false is set, so unused per-icon imports are dropped.

Bundle size note

Several source SVGs are multi-MB because they embed raster images. SVGO can't optimize embedded bitmaps — if bundle weight matters, redraw those icons as pure vector paths or run them through SVGOMG with the embedded images extracted.

Scripts

| Command | What it does | | --- | --- | | npm run build:icons | Regenerate src/icons/ + src/registry.ts from icons/ | | npm run build | build:icons, then bundle to dist/ | | npm run typecheck | tsc --noEmit | | npm run clean | Remove dist/, src/icons/, src/registry.ts |