agerix/iconify
2
0
Fork 0
mirror of https://github.com/iconify/iconify.git synced 2024-12-12 13:47:49 +00:00
Code Issues Releases Activity

fix: incorrect custom icon size detection in utils

Browse Source
This commit is contained in:
Vjacheslav Trushkin 2023-02-14 01:08:42 +02:00
parent f17693900b
commit 9d93ba8272
2 changed files with 31 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
packages/utils/src/loader/utils.ts
View File

@ -2,8 +2,8 @@ import type { Awaitable } from '@antfu/utils';
import { isUnsetKeyword } from '../svg/build'; import { isUnsetKeyword } from '../svg/build';
import type { IconifyLoaderOptions } from './types'; import type { IconifyLoaderOptions } from './types';
const svgWidthRegex = /width\s*=\s*["'](\w+)["']/; const svgWidthRegex = /\swidth\s*=\s*["'](\w+)["']/;
const svgHeightRegex = /height\s*=\s*["'](\w+)["']/; const svgHeightRegex = /\sheight\s*=\s*["'](\w+)["']/;
const svgTagRegex = /<svg\s+/; const svgTagRegex = /<svg\s+/;
function configureSvgSize( function configureSvgSize(
@ -15,35 +15,23 @@ function configureSvgSize(
const check = (prop: 'width' | 'height', regex: RegExp): boolean => { const check = (prop: 'width' | 'height', regex: RegExp): boolean => {
const result = regex.exec(svgNode); const result = regex.exec(svgNode);
const w = result != null; const isSet = result != null;
const propValue = props[prop]; const propValue = props[prop];
let value: string | undefined;
if (!isUnsetKeyword(propValue)) {
if (propValue) {
// Do not change it
return w;
}
if (!propValue && !isUnsetKeyword(propValue)) {
if (typeof scale === 'number') { if (typeof scale === 'number') {
// Scale icon, unless scale is 0 // Scale icon, unless scale is 0
if (scale) { if (scale > 0) {
value = `${scale}em`; props[prop] = `${scale}em`;
} }
} else if (result) { } else if (result) {
// Use result from iconToSVG() // Use result from iconToSVG()
value = result[1]; props[prop] = result[1];
} }
} }
// Change / unset return isSet;
if (!value) {
delete props[prop];
return false;
}
props[prop] = value;
return true;
}; };
return [check('width', svgWidthRegex), check('height', svgHeightRegex)]; return [check('width', svgWidthRegex), check('height', svgHeightRegex)];

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

@ -81,7 +81,7 @@ describe('Testing getCustomIcon', () => {
expect(usedProps.height).toEqual('4em'); expect(usedProps.height).toEqual('4em');
}); });
test.skip('Icon with XML heading', async () => { test('Icon with XML heading', async () => {
// Intercept console.warn // Intercept console.warn
let warned = false; let warned = false;
const warn = console.warn; const warn = console.warn;
@ -96,7 +96,27 @@ describe('Testing getCustomIcon', () => {
// Restore console.warn // Restore console.warn
console.warn = warn; console.warn = warn;
expect(svg).toEqual(result); expect(result).toEqual(
expect(warned).toEqual(true); svg.replace(
'<?xml version="1.0" encoding="UTF-8" standalone="no"?>',
''
)
);
expect(warned).toEqual(false);
});
test('Scale custom icon', async () => {
const svg = `<?xml version="1.0" standalone="no"?>
<svg fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24"
stroke="currentColor">
<path d="M12 14V20M10 12L4 10M14 12L20 10M21 12a9 9 0 11-18 0 9 9 0 0118 0zM14 12a2 2 0 11-4 0 2 2 0 014 0z" />
</svg>`;
const options: IconifyLoaderOptions = {
scale: 1.2,
};
const result = await getCustomIcon(() => svg, 'a', 'b', options);
expect(result && result.indexOf(' width="1.2em"') > -1).toBeTruthy();
expect(result && result.indexOf(' height="1.2em"') > -1).toBeTruthy();
}); });
}); });