101 lines
3.5 KiB
JavaScript
101 lines
3.5 KiB
JavaScript
#!/usr/bin/env node
|
||
/*
|
||
Generates extension and toolbar PNG icons from the base SVG with transparent
|
||
background and configurable stroke colors. Requires ImageMagick (`magick`).
|
||
|
||
Theme defaults (aligned with project palette):
|
||
Primary 2 (deep): #223544 → add-on icon strokes (default)
|
||
Primary 1 (light): #5AC3D6 → toolbar icon strokes (default)
|
||
|
||
Override via environment variables (optional):
|
||
ICON_COLOR_ADDON – hex color for add-on icons (48/96/128). Default: #223544
|
||
ICON_COLOR_TOOLBAR – hex color for toolbar icons (16/32). Default: #5AC3D6
|
||
|
||
Usage:
|
||
node scripts/build-icons.js
|
||
*/
|
||
const fs = require('fs');
|
||
const path = require('path');
|
||
const { spawnSync } = require('child_process');
|
||
|
||
const REPO_ROOT = path.join(__dirname, '..');
|
||
const ICONS_DIR = path.join(REPO_ROOT, 'icons');
|
||
const SRC_SVG = path.join(ICONS_DIR, 'file-search.svg');
|
||
|
||
const ADDON_SIZES = [48, 96, 128];
|
||
const TOOLBAR_SIZES = [16, 32];
|
||
|
||
const COLOR_ADDON = process.env.ICON_COLOR_ADDON || '#223544';
|
||
const COLOR_TOOLBAR = process.env.ICON_COLOR_TOOLBAR || '#5AC3D6';
|
||
|
||
function ensureMagick() {
|
||
try {
|
||
let res = spawnSync('magick', ['-version'], { stdio: 'ignore' });
|
||
if (res && res.status === 0) return 'magick';
|
||
res = spawnSync('convert', ['-version'], { stdio: 'ignore' });
|
||
if (res && res.status === 0) return 'convert';
|
||
} catch (_) {}
|
||
return null;
|
||
}
|
||
|
||
function readSvg() {
|
||
if (!fs.existsSync(SRC_SVG)) {
|
||
console.error(`Base SVG not found: ${path.relative(REPO_ROOT, SRC_SVG)}`);
|
||
process.exit(1);
|
||
}
|
||
return fs.readFileSync(SRC_SVG, 'utf8');
|
||
}
|
||
|
||
function colorize(svg, color) {
|
||
// Replace currentColor with explicit hex color and inject explicit stroke attributes on each path
|
||
let s = svg.replace(/currentColor/gi, color);
|
||
// Ensure each <path> has explicit stroke and fill to avoid inheritance issues in some renderers
|
||
s = s.replace(/<path\b([^>]*?)\/>/g, (m, attrs) => {
|
||
let a = attrs;
|
||
if (!/\bstroke\s*=/.test(a)) a = ` stroke=\"${color}\"` + a;
|
||
if (!/\bstroke-width\s*=/.test(a)) a = ` stroke-width=\"1.8\"` + a;
|
||
if (!/\bstroke-linecap\s*=/.test(a)) a = ` stroke-linecap=\"round\"` + a;
|
||
if (!/\bstroke-linejoin\s*=/.test(a)) a = ` stroke-linejoin=\"round\"` + a;
|
||
if (!/\bfill\s*=/.test(a)) a = ` fill=\"none\"` + a;
|
||
return `<path${a}/>`;
|
||
});
|
||
return s;
|
||
}
|
||
|
||
function rasterize(magickBin, svgString, size, outPath) {
|
||
const args = ['-background', 'none', '-density', '384', 'svg:-', '-resize', `${size}x${size}`, outPath];
|
||
const proc = spawnSync(magickBin, args, { input: svgString, stdio: ['pipe', 'inherit', 'inherit'] });
|
||
if (proc.status !== 0) {
|
||
console.error(`Failed to generate ${outPath} using ${magickBin}.`);
|
||
process.exit(proc.status || 1);
|
||
}
|
||
}
|
||
|
||
function main() {
|
||
const magick = ensureMagick();
|
||
if (!magick) {
|
||
console.error('ImageMagick not found. Please install ImageMagick (magick or convert) and ensure SVG support is available.');
|
||
process.exit(1);
|
||
}
|
||
if (!fs.existsSync(ICONS_DIR)) fs.mkdirSync(ICONS_DIR, { recursive: true });
|
||
|
||
const base = readSvg();
|
||
|
||
// Add-on icons
|
||
const addonSvg = colorize(base, COLOR_ADDON);
|
||
for (const s of ADDON_SIZES) {
|
||
const out = path.join(ICONS_DIR, `icon-${s}.png`);
|
||
rasterize(magick, addonSvg, s, out);
|
||
console.log(`Generated ${path.relative(REPO_ROOT, out)}`);
|
||
}
|
||
|
||
// Toolbar icons
|
||
const toolbarSvg = colorize(base, COLOR_TOOLBAR);
|
||
for (const s of TOOLBAR_SIZES) {
|
||
const out = path.join(ICONS_DIR, `icon-${s}.png`);
|
||
rasterize(magick, toolbarSvg, s, out);
|
||
console.log(`Generated ${path.relative(REPO_ROOT, out)}`);
|
||
}
|
||
}
|
||
|
||
main();
|