From f2930926571bb31d57c744a6178034e403ccfb76 Mon Sep 17 00:00:00 2001 From: wagesj45 Date: Sun, 24 Aug 2025 02:25:18 -0500 Subject: [PATCH] build(icons): migrate icon rasterization to rsvg-convert\n\n- Replace ImageMagick (magick/convert) with rsvg-convert in build script\n- Update icons/README to document rsvg-convert requirement --- icons/README.md | 4 ++-- scripts/build-icons.js | 35 ++++++++++++++++------------------- 2 files changed, 18 insertions(+), 21 deletions(-) diff --git a/icons/README.md b/icons/README.md index 5fc69d3..7cd116f 100644 --- a/icons/README.md +++ b/icons/README.md @@ -15,8 +15,8 @@ Run `npm run build` (or `npm run build:icons`) to regenerate. The manifest is wi Notes ----- - 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. +- The build script does not inject or replace colors; it rasterizes the SVG as-is to transparent PNGs using `rsvg-convert`. - 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` if desired. -- Rasterizer: uses ImageMagick only (`magick` or `convert`). Ensure your ImageMagick build supports reading SVG (via `librsvg` or a compatible delegate). +- Rasterizer: uses `rsvg-convert` (from librsvg). Ensure it is installed and available on your PATH. diff --git a/scripts/build-icons.js b/scripts/build-icons.js index 84f1fbc..9e11b71 100644 --- a/scripts/build-icons.js +++ b/scripts/build-icons.js @@ -1,7 +1,7 @@ #!/usr/bin/env node /* Generates extension and toolbar PNG icons from the base SVG with transparent - background. Requires ImageMagick (`magick` or `convert`). + background. Requires `rsvg-convert` (from librsvg). 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. @@ -20,54 +20,51 @@ const SRC_SVG = path.join(ICONS_DIR, 'file-search.svg'); const ADDON_SIZES = [48, 96, 128]; const TOOLBAR_SIZES = [16, 32]; -function ensureMagick() { +function ensureRsvgConvert() { 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'; + const res = spawnSync('rsvg-convert', ['--version'], { stdio: 'ignore' }); + if (res && res.status === 0) return 'rsvg-convert'; } catch (_) {} return null; } -function readSvg() { +function assertSvgExists() { 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 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'] }); +function rasterize(rsvgBin, size, outPath) { + // rsvg-convert preserves transparency by default; specify width/height and PNG output + const args = ['-w', String(size), '-h', String(size), '-f', 'png', '-o', outPath, SRC_SVG]; + const proc = spawnSync(rsvgBin, args, { stdio: ['ignore', 'inherit', 'inherit'] }); if (proc.status !== 0) { - console.error(`Failed to generate ${outPath} using ${magickBin}.`); + console.error(`Failed to generate ${outPath} using ${rsvgBin}.`); 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.'); + const rsvg = ensureRsvgConvert(); + if (!rsvg) { + console.error('rsvg-convert not found. Please install librsvg (rsvg-convert) and ensure it is on your PATH.'); process.exit(1); } if (!fs.existsSync(ICONS_DIR)) fs.mkdirSync(ICONS_DIR, { recursive: true }); - - const base = readSvg(); + assertSvgExists(); // 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, base, s, out); + rasterize(rsvg, s, out); console.log(`Generated ${path.relative(REPO_ROOT, out)}`); } // Toolbar icons (use SVG colors as-is) for (const s of TOOLBAR_SIZES) { const out = path.join(ICONS_DIR, `icon-${s}.png`); - rasterize(magick, base, s, out); + rasterize(rsvg, s, out); console.log(`Generated ${path.relative(REPO_ROOT, out)}`); } }