wagesj45/archive-org-link-grabber
wagesj45/archive-org-link-grabber
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

refactor(icons): remove color injection; set emphasis stroke directly in SVG\n\n- stroke set to #F5A623 in icons/file-search.svg\n- build script now rasterizes SVG as-is using ImageMagick only\n- docs updated to reflect new flow

Browse source
This commit is contained in:
Jordan Wages 2025-08-24 01:47:13 -05:00
commit 36bef61f2e
3 changed files with 13 additions and 44 deletions
Download patch file Download diff file Expand all files Collapse all files

40
scripts/build-icons.js
View file

@ -1,15 +1,10 @@
#!/usr/bin/env node
/*
Generates extension and toolbar PNG icons from the base SVG with transparent
background and configurable stroke colors. Requires ImageMagick (`magick`).
background. Requires ImageMagick (`magick` or `convert`).
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
The SVG defines its own stroke color (set directly in icons/file-search.svg).
To change colors, edit the SVG; the script does not inject or replace colors.
Usage:
node scripts/build-icons.js
@ -25,9 +20,6 @@ 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' });
@ -46,22 +38,6 @@ function readSvg() {
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'] });
@ -81,19 +57,17 @@ function main() {
const base = readSvg();
// Add-on icons
const addonSvg = colorize(base, COLOR_ADDON);
// Add-on icons (use SVG colors as-is)
for (const s of ADDON_SIZES) {
const out = path.join(ICONS_DIR, `icon-${s}.png`);
rasterize(magick, addonSvg, s, out);
rasterize(magick, base, s, out);
console.log(`Generated ${path.relative(REPO_ROOT, out)}`);
}
// Toolbar icons
const toolbarSvg = colorize(base, COLOR_TOOLBAR);
// Toolbar icons (use SVG colors as-is)
for (const s of TOOLBAR_SIZES) {
const out = path.join(ICONS_DIR, `icon-${s}.png`);
rasterize(magick, toolbarSvg, s, out);
rasterize(magick, base, s, out);
console.log(`Generated ${path.relative(REPO_ROOT, out)}`);
}
}