fix: parse comma-separated SVG viewBox values

The viewBox regex only accepted whitespace between values, so a valid
viewBox like "0,0,24,24" failed to parse and an opaque background went
undetected, tinting the icon into a solid block. Accept commas and
whitespace as separators. Add a test for the comma-separated case.
This commit is contained in:
Marco Beretta 2026-06-17 23:55:54 +02:00
parent 85163e4cbb
commit c6c3715077
No known key found for this signature in database
GPG key ID: D918033D8E74CC11
2 changed files with 7 additions and 1 deletions

View file

@ -136,6 +136,12 @@ describe('isMonochromeSvg', () => {
'<svg width="24" height="24" stroke-width="2"><rect width="24" height="24" fill="#eee" /><path fill="#222" /></svg>';
expect(isMonochromeSvg(svg)).toBe(false);
});
it('rejects a background rect when the viewBox is comma-separated', () => {
const svg =
'<svg viewBox="0,0,24,24"><rect width="24" height="24" fill="#fff" /><path fill="#000" /></svg>';
expect(isMonochromeSvg(svg)).toBe(false);
});
});
});

View file

@ -103,7 +103,7 @@ function extractColors(svg: string): string[] {
return colors;
}
const VIEWBOX_REGEX = /viewBox\s*=\s*["']\s*[-\d.]+\s+[-\d.]+\s+([\d.]+)\s+([\d.]+)/i;
const VIEWBOX_REGEX = /viewBox\s*=\s*["']\s*[-\d.]+[\s,]+[-\d.]+[\s,]+([\d.]+)[\s,]+([\d.]+)/i;
const SVG_TAG_REGEX = /<svg\b[^>]*>/i;
const RECT_REGEX = /<rect\b[^>]*>/gi;