@thefurdui/wic

wic (Wide-gamut Icon Compiler)

A CLI tool that generates modern wide-gamut (Display P3) web assets and legacy sRGB favicons from a single SVG source.

Why?

Most standard image processors (like ImageMagick or librsvg) rely on underlying C libraries that don't understand modern CSS color spaces like oklch() or display-p3. If your master SVG uses wide-gamut colors, traditional asset pipelines will clip, mute, or fail to render your icons.

wic solves this by running a headless Chromium browser to parse your CSS exactly as a real browser would:

1. It renders Apple Touch and PWA icons using a display-p3 color profile to preserve maximum color accuracy.
2. It safely converts your colors down to an srgb profile for legacy .ico fallbacks.
3. It can inject a pure-vector circular mask for desktop Chrome tabs without altering your original coordinate space.

Usage

npx @thefurdui/wic -s <source.svg> -n "<App Name>" -o <output_dir> [-r <radius_percentage>]

(Alternatively, use pnpm dlx @thefurdui/wic or bunx @thefurdui/wic)

Options:

• -s, --source : Path to your master SVG. Must be a sharp-cornered square.
• -n, --name : The application name (this is injected or updated in your manifest.json).
• -o, --output : Target directory for the generated assets (e.g., public or dist).
• -r, --radius : (Optional) Border radius percentage applied natively to Android/PWA icons and favicon.svg (e.g., 15). Note: The apple-touch-icon.png ignores this and stays sharp per Apple's guidelines.

Example:

npx @thefurdui/wic -s assets/master-logo.svg -n "Lode Beat" -o public -r 15

Note for pnpm users: If you are using pnpm, make sure to allow the puppeteer postinstall script to ensure your headless Chromium instance downloads properly.

Note for Linux users: If you are running this on a barebones Linux server (like a CI/CD pipeline) or WSL, Puppeteer may require standard Chromium system shared libraries (like libnss3 or libgbm1) to be installed via your package manager to prevent crash errors.

Generated Output

Running the command will generate the following assets in your target directory:

• favicon.svg (Display P3, masked if radius is provided)
• apple-touch-icon.png (180x180, Display P3, sharp corners)
• icon-192.png (192x192, Display P3, rounded if radius provided)
• icon-512.png (512x512, Display P3, rounded if radius provided)
• favicon.ico (Multi-layer 64/48/32/16, sRGB gamut-mapped)
• manifest.json (Bootstrapped or dynamically updated)

License

MIT