agerix/iconify
2
0
Fork 0
mirror of https://github.com/iconify/iconify.git synced 2024-09-19 00:39:02 +00:00
Code Issues Releases Activity

feat: automatic xml preface cleanup

Browse Source
This commit is contained in:
Joaquín Sánchez Jiménez 2022-06-17 22:10:54 +02:00
parent 5ab275c091
commit 107b28bdf1
9 changed files with 64 additions and 31 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
demo/browser-tests/package-lock.json generated
View File

@ -1,12 +1,12 @@
{
"name": "@iconify-demo/browser-tests",
"version": "2.2.0",
"version": "2.2.1",
"lockfileVersion": 2,
"requires": true,
"packages": {
"": {
"name": "@iconify-demo/browser-tests",
"version": "2.2.0",
"version": "2.2.1",
"license": "(Apache-2.0 OR GPL-2.0)",
"devDependencies": {
"@iconify/iconify": "^2.2.1",

2
packages/api-redundancy/package-lock.json generated
View File

@ -7,7 +7,7 @@
"": {
"name": "@iconify/api-redundancy",
"version": "1.1.0",
"license": "(Apache-2.0 OR GPL-2.0)",
"license": "MIT",
"devDependencies": {
"@types/jest": "^27.4.1",
"@types/node": "^17.0.22",

14
packages/utils/src/loader/custom.ts
View File

@ -30,17 +30,21 @@ export async function getCustomIcon(
}
if (result) {
const cleanupIdx = result.indexOf('<svg');
if (cleanupIdx > 0) result = result.slice(cleanupIdx);
const { transform } = options?.customizations ?? {};
result =
typeof transform === 'function'
? await transform(result, collection, icon)
: result;
if (!result.startsWith('<svg')) {
console.warn(
`Custom icon "${icon}" in "${collection}" is not a valid SVG`
);
return result;
}
const { transform } = options?.customizations ?? {};
result =
typeof transform === 'function'
? await transform(result, collection, icon)
: result;
return await mergeIconProps(
options?.customizations?.trimCustomSvg === true
? trimSVG(result)

4
packages/utils/src/loader/node-loaders.ts
View File

@ -25,7 +25,9 @@ export function FileSystemIconLoader(
continue;
}
if (stat.isFile()) {
const svg = await fs.readFile(path, 'utf-8');
let svg = await fs.readFile(path, 'utf-8');
const cleanupIdx = svg.indexOf('<svg');
if (cleanupIdx > 0) svg = svg.slice(cleanupIdx);
return typeof transform === 'function'
? await transform(svg)
: svg;

8
packages/utils/tests/file-system-icon-test.ts
View File

@ -8,6 +8,14 @@ describe('Testing FileSystemIconLoader', () => {
expect(result && result.indexOf('svg') > -1).toBeTruthy();
});
test('FileSystemIconLoader cleanups svg preface', async () => {
const result = await FileSystemIconLoader(fixturesDir)(
'circle-xml-preface'
);
console.log(result);
expect(result && result.indexOf('<svg') === 0).toBeTruthy();
});
test('FileSystemIconLoader with transform', async () => {
const result = await FileSystemIconLoader(fixturesDir, (icon) => {
return icon.replace('<svg ', '<svg width="1em" height="1em" ');

3
packages/utils/tests/fixtures/circle-xml-preface.svg vendored Normal file
View File

@ -0,0 +1,3 @@
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg viewBox="0 0 120 120" xmlns="http://www.w3.org/2000/svg"><circle cx="60" cy="60" r="50"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 238 B

17
packages/utils/tests/get-custom-icon-test.ts
View File

@ -35,6 +35,21 @@ describe('Testing getCustomIcon', () => {
);
});
test('CustomIconLoader cleanups svg preface', async () => {
const svg = `<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 120 120">
<circle cx="60" cy="60" r="50"/>
</svg>
`;
const result = await getCustomIcon(() => svg, 'a', 'b', {
customizations: { trimCustomSvg: true },
});
expect(result).toEqual(
'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 120 120"><circle cx="60" cy="60" r="50"/></svg>'
);
});
test("CustomIconLoader with transform: scale/width/height shouldn't take effect", async () => {
const svg = await fs.readFile(fixturesDir + '/circle.svg', 'utf8');
const options: IconifyLoaderOptions = {
@ -66,7 +81,7 @@ describe('Testing getCustomIcon', () => {
expect(usedProps.height).toEqual('4em');
});
test('Icon with XML heading', async () => {
test.skip('Icon with XML heading', async () => {
// Intercept console.warn
let warned = false;
const warn = console.warn;

3
packages/utils/tests/load-icon-test.ts
View File

@ -24,6 +24,7 @@ describe('Testing loadIcon', () => {
});
test('CustomCollection using dynamic import', async () => {
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-ignore
const result = await loadIcon('flat-color-icons', 'up-right', {
customCollections: {
@ -61,7 +62,7 @@ describe('Testing loadIcon', () => {
expect(result && result.indexOf('height="1em"') > -1).toBeTruthy();
});
test('CustomCollection Icon with XML heading', async () => {
test.skip('CustomCollection Icon with XML heading', async () => {
const svg = await loader('1f3eb');
expect(svg).toBeTruthy();
// Intercept console.warn

40
packages/utils/tests/trim-svg-test.ts
View File

@ -89,89 +89,89 @@ describe('Trim SVG', () => {
C11.75,32.56,35.14,9.17,64,9.17s52.25,23.39,52.25,52.25C116.25,90.28,92.86,113.68,64,113.68z"/>
<g>
<g>
<polygon style="fill:#D38200;" points="37.99,21.35 39.26,25.28 43.4,23.7 43.4,25.28 40.05,27.71 41.33,30.05 41.33,31.64
<polygon style="fill:#D38200;" points="37.99,21.35 39.26,25.28 43.4,23.7 43.4,25.28 40.05,27.71 41.33,30.05 41.33,31.64
37.99,29.21 34.64,31.64 34.64,30.05 35.92,27.71 32.58,25.28 32.58,23.7 36.71,25.28 "/>
</g>
<g>
<polygon style="fill:#D38200;" points="22.01,43.91 23.29,47.84 27.42,46.26 27.42,47.84 24.08,50.27 25.36,52.62 25.36,54.2
<polygon style="fill:#D38200;" points="22.01,43.91 23.29,47.84 27.42,46.26 27.42,47.84 24.08,50.27 25.36,52.62 25.36,54.2
22.01,51.77 18.67,54.2 18.67,52.62 19.95,50.27 16.6,47.84 16.6,46.26 20.74,47.84 "/>
</g>
<g>
<polygon style="fill:#D38200;" points="21.54,71.72 22.82,75.65 26.95,74.07 26.95,75.65 23.61,78.08 24.89,80.43 24.89,82.01
<polygon style="fill:#D38200;" points="21.54,71.72 22.82,75.65 26.95,74.07 26.95,75.65 23.61,78.08 24.89,80.43 24.89,82.01
21.54,79.58 18.2,82.01 18.2,80.43 19.48,78.08 16.13,75.65 16.13,74.07 20.27,75.65 "/>
</g>
<g>
<polygon style="fill:#D38200;" points="38.6,93.8 39.88,97.73 44.01,96.15 44.01,97.73 40.67,100.16 41.95,102.5 41.95,104.09
<polygon style="fill:#D38200;" points="38.6,93.8 39.88,97.73 44.01,96.15 44.01,97.73 40.67,100.16 41.95,102.5 41.95,104.09
38.6,101.66 35.26,104.09 35.26,102.5 36.54,100.16 33.19,97.73 33.19,96.15 37.33,97.73 "/>
</g>
<g>
<polygon style="fill:#D38200;" points="90.01,21.35 88.74,25.28 84.6,23.7 84.6,25.28 87.95,27.71 86.67,30.05 86.67,31.64
<polygon style="fill:#D38200;" points="90.01,21.35 88.74,25.28 84.6,23.7 84.6,25.28 87.95,27.71 86.67,30.05 86.67,31.64
90.01,29.21 93.36,31.64 93.36,30.05 92.08,27.71 95.42,25.28 95.42,23.7 91.29,25.28 "/>
</g>
<g>
<polygon style="fill:#D38200;" points="105.99,43.91 104.71,47.84 100.58,46.26 100.58,47.84 103.92,50.27 102.64,52.62
<polygon style="fill:#D38200;" points="105.99,43.91 104.71,47.84 100.58,46.26 100.58,47.84 103.92,50.27 102.64,52.62
102.64,54.2 105.99,51.77 109.33,54.2 109.33,52.62 108.05,50.27 111.4,47.84 111.4,46.26 107.26,47.84 "/>
</g>
<g>
<polygon style="fill:#D38200;" points="106.46,71.72 105.18,75.65 101.05,74.07 101.05,75.65 104.39,78.08 103.11,80.43
<polygon style="fill:#D38200;" points="106.46,71.72 105.18,75.65 101.05,74.07 101.05,75.65 104.39,78.08 103.11,80.43
103.11,82.01 106.46,79.58 109.8,82.01 109.8,80.43 108.52,78.08 111.87,75.65 111.87,74.07 107.73,75.65 "/>
</g>
<g>
<polygon style="fill:#D38200;" points="89.4,93.8 88.12,97.73 83.99,96.15 83.99,97.73 87.33,100.16 86.05,102.5 86.05,104.09
<polygon style="fill:#D38200;" points="89.4,93.8 88.12,97.73 83.99,96.15 83.99,97.73 87.33,100.16 86.05,102.5 86.05,104.09
89.4,101.66 92.74,104.09 92.74,102.5 91.46,100.16 94.81,97.73 94.81,96.15 90.67,97.73 "/>
</g>
</g>
<g>
<g>
<polygon style="fill:#FFF176;" points="89.4,92.21 90.67,96.14 94.81,96.14 91.46,98.57 92.74,102.5 89.4,100.07 86.05,102.5
<polygon style="fill:#FFF176;" points="89.4,92.21 90.67,96.14 94.81,96.14 91.46,98.57 92.74,102.5 89.4,100.07 86.05,102.5
87.33,98.57 83.99,96.14 88.12,96.14 "/>
</g>
<g>
<polygon style="fill:#FFF176;" points="106.46,70.14 107.73,74.07 111.87,74.07 108.52,76.5 109.8,80.43 106.46,78 103.11,80.43
<polygon style="fill:#FFF176;" points="106.46,70.14 107.73,74.07 111.87,74.07 108.52,76.5 109.8,80.43 106.46,78 103.11,80.43
104.39,76.5 101.05,74.07 105.18,74.07 "/>
</g>
<g>
<polygon style="fill:#FFF176;" points="105.99,42.33 107.26,46.26 111.4,46.26 108.05,48.69 109.33,52.62 105.99,50.19
<polygon style="fill:#FFF176;" points="105.99,42.33 107.26,46.26 111.4,46.26 108.05,48.69 109.33,52.62 105.99,50.19
102.64,52.62 103.92,48.69 100.58,46.26 104.71,46.26 "/>
</g>
<g>
<polygon style="fill:#FFF176;" points="90.01,19.76 91.29,23.69 95.42,23.69 92.08,26.12 93.36,30.05 90.01,27.62 86.67,30.05
<polygon style="fill:#FFF176;" points="90.01,19.76 91.29,23.69 95.42,23.69 92.08,26.12 93.36,30.05 90.01,27.62 86.67,30.05
87.95,26.12 84.6,23.69 88.74,23.69 "/>
</g>
</g>
<g>
<g>
<polygon style="fill:#D38200;" points="64.05,102.5 65.33,106.43 69.46,104.85 69.46,106.43 66.12,108.86 67.4,111.21
<polygon style="fill:#D38200;" points="64.05,102.5 65.33,106.43 69.46,104.85 69.46,106.43 66.12,108.86 67.4,111.21
67.4,112.79 64.05,110.36 60.71,112.79 60.71,111.21 61.99,108.86 58.64,106.43 58.64,104.85 62.78,106.43 "/>
</g>
<g>
<polygon style="fill:#FFF176;" points="64.05,100.4 65.33,104.33 69.46,104.33 66.12,106.76 67.4,110.69 64.05,108.26
<polygon style="fill:#FFF176;" points="64.05,100.4 65.33,104.33 69.46,104.33 66.12,106.76 67.4,110.69 64.05,108.26
60.71,110.69 61.99,106.76 58.64,104.33 62.78,104.33 "/>
</g>
<g>
<polygon style="fill:#D38200;" points="64.05,12.89 65.33,16.82 69.46,15.24 69.46,16.82 66.12,19.25 67.4,21.6 67.4,23.18
<polygon style="fill:#D38200;" points="64.05,12.89 65.33,16.82 69.46,15.24 69.46,16.82 66.12,19.25 67.4,21.6 67.4,23.18
64.05,20.75 60.71,23.18 60.71,21.6 61.99,19.25 58.64,16.82 58.64,15.24 62.78,16.82 "/>
</g>
<g>
<polygon style="fill:#FFF176;" points="64.05,11.31 65.33,15.24 69.46,15.24 66.12,17.67 67.4,21.6 64.05,19.17 60.71,21.6
<polygon style="fill:#FFF176;" points="64.05,11.31 65.33,15.24 69.46,15.24 66.12,17.67 67.4,21.6 64.05,19.17 60.71,21.6
61.99,17.67 58.64,15.24 62.78,15.24 "/>
</g>
</g>
<g>
<g>
<polygon style="fill:#FFF176;" points="38.6,92.21 37.33,96.14 33.19,96.14 36.54,98.57 35.26,102.5 38.6,100.07 41.95,102.5
<polygon style="fill:#FFF176;" points="38.6,92.21 37.33,96.14 33.19,96.14 36.54,98.57 35.26,102.5 38.6,100.07 41.95,102.5
40.67,98.57 44.01,96.14 39.88,96.14 "/>
</g>
<g>
<polygon style="fill:#FFF176;" points="21.54,70.14 20.27,74.07 16.13,74.07 19.48,76.5 18.2,80.43 21.54,78 24.89,80.43
<polygon style="fill:#FFF176;" points="21.54,70.14 20.27,74.07 16.13,74.07 19.48,76.5 18.2,80.43 21.54,78 24.89,80.43
23.61,76.5 26.95,74.07 22.82,74.07 "/>
</g>
<g>
<polygon style="fill:#FFF176;" points="22.01,42.33 20.74,46.26 16.6,46.26 19.95,48.69 18.67,52.62 22.01,50.19 25.36,52.62
<polygon style="fill:#FFF176;" points="22.01,42.33 20.74,46.26 16.6,46.26 19.95,48.69 18.67,52.62 22.01,50.19 25.36,52.62
24.08,48.69 27.42,46.26 23.29,46.26 "/>
</g>
<g>
<polygon style="fill:#FFF176;" points="37.99,19.76 36.71,23.69 32.58,23.69 35.92,26.12 34.64,30.05 37.99,27.62 41.33,30.05
<polygon style="fill:#FFF176;" points="37.99,19.76 36.71,23.69 32.58,23.69 35.92,26.12 34.64,30.05 37.99,27.62 41.33,30.05
40.05,26.12 43.4,23.69 39.26,23.69 "/>
</g>
</g>