make-icon-data

Ingests SVG files from icon directories and generates an icon-data module (TypeScript or JavaScript). This is the build tool behind the icons system.

Usage

bun run bin/make-icon-data.js [options]

Options

• --input <dir1,dir2,...> — directories to scan (default: ./icons)
• --output <path> — output file (default: ./src/icon-data.ts)
• --optimize <true|false> — round coordinates based on viewBox size (default: true)

Examples

bun run bin/make-icon-data.js
bun run bin/make-icon-data.js --input ./my-icons --output ./dist/icons.js
bun run bin/make-icon-data.js --optimize false

Directory conventions

Style classes

Folder names control CSS classes on the generated SVGs:

• color/ — icons with baked-in colors (class color, fill/stroke preserved)
• stroked/ — stroke-only icons (class stroked, fill styles removed)
• filled/ — fill-only icons (class filled, stroke styles removed)

Directional folders

Place icons in specially named folders to auto-generate directional redirects, eliminating redundant SVG files:

• right-left/ — base icon points right; generates a flipped left variant
• up-down/ — base icon points up; generates a flipped down variant
• up-down-right-left/ — base icon points right; generates down (90°), left (180°), and up (270°) rotation variants

For example, chevron-right.svg in an up-down-right-left/ folder produces chevronRight (SVG) plus chevronDown, chevronLeft, chevronUp (redirects).

Comma-separated names

For icons where the directional variant has a different name (not just a direction swap), use commas in the filename:

skip-forward,skip-back.svg    → skipForward (SVG) + skipBack (redirect)
refresh-cw,refresh-ccw.svg    → refreshCw (SVG) + refreshCcw (redirect)

The first name is the base, additional names are mapped to the folder's variant suffixes in order.

SVG processing

The tool automatically:

• Strips XML declarations, namespaces, IDs, and comments
• Removes redundant attributes (default fills, strokes)
• Collapses whitespace
• Rounds coordinates based on viewBox size (larger viewBox = fewer decimals)
• Converts filenames to camelCase (arrow-right.svg → arrowRight)

Output formatting

The generated module is written as ordinary, readable source: single-quoted strings (SVG markup is full of class="stroked", so single quotes mean no escaping), one icon per line. If prettier is resolvable from the output path, the module is formatted through it in memory before being written, using your prettier config — so generated data matches the rest of your project rather than ours. Prettier is entirely optional; without it the output is already clean.

The generator's output is stable: running it twice on the same icons produces byte-identical files, so it never shows up as spurious diff noise.

Add your generated icon data to .prettierignore.

Even with matching output, treat generated files as generated: a formatter run that rewrites them means the next build reverts the formatting, which is a permanent two-way diff in every git status. If the style bothers you, change the generator's config (or your prettier config, which it now honours) — not the output.