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)