From 36bef61f2e9c6237ee5219ba1f4c26fea17ff818 Mon Sep 17 00:00:00 2001 From: wagesj45 Date: Sun, 24 Aug 2025 01:47:13 -0500 Subject: [PATCH] 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 --- icons/README.md | 15 +++++---------- icons/file-search.svg | 2 +- scripts/build-icons.js | 40 +++++++--------------------------------- 3 files changed, 13 insertions(+), 44 deletions(-) diff --git a/icons/README.md b/icons/README.md index 51dc0d8..5fc69d3 100644 --- a/icons/README.md +++ b/icons/README.md @@ -14,14 +14,9 @@ Run `npm run build` (or `npm run build:icons`) to regenerate. The manifest is wi Notes ----- -- Source: `icons/file-search.svg` uses `stroke="currentColor"`. -- The build script replaces `currentColor` with configured colors and rasterizes with a transparent background. It also injects explicit `stroke`/`fill` on each path for better compatibility across renderers. -- Default stroke colors use the project emphasis palette: - - Add‑on icons (48/96/128): Primary 2 (deep) `#223544`. - - Toolbar icons (16/32): Primary 1 (light) `#5AC3D6`. -- Customize via env vars when building: - - `ICON_COLOR_ADDON` (48/96/128); default `#223544`. - - `ICON_COLOR_TOOLBAR` (16/32); default `#5AC3D6`. +- Source: `icons/file-search.svg` defines the exact stroke color (an emphasis color) directly in the SVG. +- The build script does not inject or replace colors; it rasterizes the SVG as-is to transparent PNGs using ImageMagick. +- To change the icon color, edit the `stroke="#..."` attribute in `icons/file-search.svg`. - Firefox does not require .ico; PNG is recommended. -- Theme variants can be added later via `browser_action.theme_icons`. -- Rasterizer: uses ImageMagick only (`magick` or `convert`). Ensure your ImageMagick build supports reading SVG (via `librsvg` or compatible delegate). +- Theme variants can be added later via `browser_action.theme_icons` if desired. +- Rasterizer: uses ImageMagick only (`magick` or `convert`). Ensure your ImageMagick build supports reading SVG (via `librsvg` or a compatible delegate). diff --git a/icons/file-search.svg b/icons/file-search.svg index 357706c..42b6787 100644 --- a/icons/file-search.svg +++ b/icons/file-search.svg @@ -1,4 +1,4 @@ - + diff --git a/scripts/build-icons.js b/scripts/build-icons.js index 8919090..84f1fbc 100644 --- a/scripts/build-icons.js +++ b/scripts/build-icons.js @@ -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 has explicit stroke and fill to avoid inheritance issues in some renderers - s = s.replace(/]*?)\/>/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 ``; - }); - 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)}`); } }