agerix/iconify
2
0
Fork 0
mirror of https://github.com/iconify/iconify.git synced 2025-01-07 15:44:05 +00:00
Code Issues Releases Activity

Web component: fix custom dimensions when rendering span

Browse Source
This commit is contained in:
Vjacheslav Trushkin 2022-05-01 21:58:47 +03:00
parent 1c980b75a8
commit 1c17fa6e42
2 changed files with 10 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
packages/icon/src/render/span.ts
View File

@ -30,6 +30,13 @@ for (const prefix in propsToAddTo) {
} }
} }
/**
* Fix size: add 'px' to numbers
*/
function fixSize(value: string): string {
return value + (value.match(/^[-0-9.]+$/) ? 'px' : '');
}
/** /**
* Render node as <span> * Render node as <span>
*/ */
@ -60,8 +67,8 @@ export function renderSPAN(
const svgStyle = node.style; const svgStyle = node.style;
const styles: Record<string, string> = { const styles: Record<string, string> = {
'--svg': url, '--svg': url,
'width': renderAttribs.width, 'width': fixSize(renderAttribs.width),
'height': renderAttribs.height, 'height': fixSize(renderAttribs.height),
...(useMask ? monotoneProps : coloredProps), ...(useMask ? monotoneProps : coloredProps),
}; };

2
packages/icon/tests/render-icon-test.ts
View File

@ -119,7 +119,7 @@ describe('Testing rendering loaded icon', () => {
// Test HTML // Test HTML
expect(node.innerHTML).toBe( expect(node.innerHTML).toBe(
`<style>${expectedInline}</style><span style="--svg: url(&quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cg /%3E%3C/svg%3E&quot;); background-color: transparent; background-repeat: no-repeat; background-size: 100% 100%;"></span>` `<style>${expectedInline}</style><span style="--svg: url(&quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cg /%3E%3C/svg%3E&quot;); width: 24px; height: 24px; background-color: transparent; background-repeat: no-repeat; background-size: 100% 100%;"></span>`
); );
}); });
}); });