Skip to content

Commit 46a6d6a

Browse files
cyberaliencyberalien
committed
chore: ignore colors that use color function or var
1 parent 2dd3668 commit 46a6d6a

6 files changed

Lines changed: 54 additions & 1 deletion

File tree

‎@iconify/tools/package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
"type": "module",
44
"description": "Collection of functions for cleaning up and parsing SVG for Iconify project",
55
"author": "Vjacheslav Trushkin",
6-
"version": "5.0.10",
6+
"version": "5.0.11",
77
"license": "MIT",
88
"bugs": "https://github.com/iconify/tools/issues",
99
"homepage": "https://github.com/iconify/tools",

‎@iconify/tools/src/css/parse.ts‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
import { isBadSVGColor, isSVGColorAttribute } from '../svg/data/colors.js';
12
import { getTokens } from './parser/tokens';
23

34
/**
@@ -16,6 +17,11 @@ export function parseInlineStyle(style: string): Record<string, string> | null {
1617
return null;
1718
}
1819

20+
// Skip bad colors
21+
if (isSVGColorAttribute(token.prop) && isBadSVGColor(token.value)) {
22+
continue;
23+
}
24+
1925
results[token.prop] = token.value;
2026
}
2127

‎@iconify/tools/src/optimise/global-style.ts‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ import type { SVG } from '../svg';
66
import { allValidTags, animateTags } from '../svg/data/tags';
77
import { parseSVG } from '../svg/parse';
88
import { parseSVGStyle } from '../svg/parse-style';
9+
import { isBadSVGColor, isSVGColorAttribute } from '../svg/data/colors.js';
910

1011
const tempDataAttrbiute = 'data-gstyle-temp';
1112

@@ -167,6 +168,14 @@ export function cleanupGlobalStyle(svg: SVG) {
167168
}
168169
*/
169170

171+
// Skip bad colors
172+
if (
173+
isSVGColorAttribute(prop) &&
174+
isBadSVGColor(styleItem.value)
175+
) {
176+
return;
177+
}
178+
170179
attribs[prop] = styleItem.value;
171180
addedAttributes.add(prop);
172181
attribs[tempDataAttrbiute] =

‎@iconify/tools/src/svg/data/colors.ts‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
/**
2+
* Check for color attribute
3+
*/
4+
export function isSVGColorAttribute(prop: string): boolean {
5+
return prop === 'fill' || prop === 'stroke' || prop.endsWith('color');
6+
}
7+
8+
/**
9+
* Check for color that cannot be parsed
10+
*/
11+
export function isBadSVGColor(value: string): boolean {
12+
return (
13+
value.startsWith('color(') ||
14+
value.startsWith('device-color(') ||
15+
value.startsWith('var(')
16+
);
17+
}

‎@iconify/tools/tests/svg/cleanup-global-style-test.ts‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -85,4 +85,15 @@ describe('Removing global style', () => {
8585
'<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><defs/><g data-name="Product Icons"><path d="M6.73 10.83v2.63a4.91 4.91 0 0 0 1.71 1.74v-4.37Z" fill="#aecbfa" fill-rule="evenodd"/><path d="M9.89 8.41v7.53A7.62 7.62 0 0 0 11 16a8 8 0 0 0 1 0V8.41Z" fill="#669df6" fill-rule="evenodd"/><path d="M13.64 11.86v3.29a5 5 0 0 0 1.7-1.82v-1.47Z" fill="#aecbfa" fill-rule="evenodd"/><path d="m17.74 16.32-1.42 1.42a.42.42 0 0 0 0 .6l3.54 3.54a.42.42 0 0 0 .59 0l1.43-1.43a.42.42 0 0 0 0-.59l-3.54-3.54a.42.42 0 0 0-.6 0" style="fill:#4285f4;fill-rule:evenodd"/><path d="M11 2a9 9 0 1 0 9 9 9 9 0 0 0-9-9m0 15.69A6.68 6.68 0 1 1 17.69 11 6.68 6.68 0 0 1 11 17.69" fill="#669df6" fill-rule="evenodd"/></g></svg>'
8686
);
8787
});
88+
89+
test('P3 color', () => {
90+
const content =
91+
'<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><defs><style><![CDATA[ .cls-1{fill:#fa5d19;fill:color(display-p3 .9816 .3634 .0984);fill-opacity:1} ]]></style></defs><path class="cls-1" d="M13.64 11.86v3.29a5 5 0 0 0 1.7-1.82v-1.47Z"/></svg>';
92+
const svg = new SVG(content);
93+
cleanupGlobalStyle(svg);
94+
95+
expect(svg.toMinifiedString()).toBe(
96+
'<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><defs/><path d="M13.64 11.86v3.29a5 5 0 0 0 1.7-1.82v-1.47Z" fill="#fa5d19" fill-opacity="1"/></svg>'
97+
);
98+
});
8899
});

‎@iconify/tools/tests/svg/cleanup-test.ts‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -223,4 +223,14 @@ describe('Cleaning up SVG', () => {
223223
'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><title>TEST</title><g fill="none" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6V4m0 2a2 2 0 100 4m0-4a2 2 0 110 4m-6 8a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4m6 6v10m6-2a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4"/></g></svg>'
224224
);
225225
});
226+
227+
test('Style with P3 color', () => {
228+
const svg = new SVG(
229+
`<svg xmlns="http://www.w3.org/2000/svg" width="50" height="72" fill="none" viewBox="0 0 50 72"><path fill="#fa5d19" d="M41.715 23.193c-2.762.82-4.844 2.675-6.37 4.69-.327.432-1.01.107-.88-.423 2.92-12.007-.937-21.986-12.961-26.898a.803.803 0 0 0-1.085.937c5.47 21.961-17.537 20.109-14.63 45.005.05.427-.43.72-.78.47-1.09-.782-2.307-2.415-3.142-3.562a.502.502 0 0 0-.887.16c-.665 2.404-.98 4.67-.98 6.92 0 8.749 4.497 16.45 11.304 20.915.39.255.89-.11.758-.557a13.5 13.5 0 0 1-.563-3.697c0-.788.05-1.593.173-2.343.285-1.885.94-3.68 2.04-5.314 3.772-5.663 11.334-11.132 10.127-18.56-.078-.47.477-.78.827-.457 5.328 4.868 6.383 11.415 5.508 17.287-.075.51.564.782.887.382a11.6 11.6 0 0 1 2.892-2.587c.27-.168.63-.04.733.26.602 1.752 1.497 3.397 2.342 5.042a13.46 13.46 0 0 1 .905 9.982.502.502 0 0 0 .755.57C45.5 66.95 50 59.248 50 50.494c0-3.043-.532-6.025-1.54-8.82-2.112-5.862-7.472-10.264-6.117-17.904.065-.365-.273-.682-.628-.577" style="fill:#fa5d19;fill:color(display-p3 .9816 .3634 .0984);fill-opacity:1"/></svg>`
230+
);
231+
cleanupSVG(svg);
232+
expect(svg.toMinifiedString()).toBe(
233+
'<svg xmlns="http://www.w3.org/2000/svg" width="50" height="72" viewBox="0 0 50 72"><g fill="none"><path fill="#fa5d19" d="M41.715 23.193c-2.762.82-4.844 2.675-6.37 4.69-.327.432-1.01.107-.88-.423 2.92-12.007-.937-21.986-12.961-26.898a.803.803 0 0 0-1.085.937c5.47 21.961-17.537 20.109-14.63 45.005.05.427-.43.72-.78.47-1.09-.782-2.307-2.415-3.142-3.562a.502.502 0 0 0-.887.16c-.665 2.404-.98 4.67-.98 6.92 0 8.749 4.497 16.45 11.304 20.915.39.255.89-.11.758-.557a13.5 13.5 0 0 1-.563-3.697c0-.788.05-1.593.173-2.343.285-1.885.94-3.68 2.04-5.314 3.772-5.663 11.334-11.132 10.127-18.56-.078-.47.477-.78.827-.457 5.328 4.868 6.383 11.415 5.508 17.287-.075.51.564.782.887.382a11.6 11.6 0 0 1 2.892-2.587c.27-.168.63-.04.733.26.602 1.752 1.497 3.397 2.342 5.042a13.46 13.46 0 0 1 .905 9.982.502.502 0 0 0 .755.57C45.5 66.95 50 59.248 50 50.494c0-3.043-.532-6.025-1.54-8.82-2.112-5.862-7.472-10.264-6.117-17.904.065-.365-.273-.682-.628-.577" fill-opacity="1"/></g></svg>'
234+
);
235+
});
226236
});

0 commit comments

Comments
 (0)