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

svg framework: fix tests, make xlink optional, move reusable function to utils

Browse Source
This commit is contained in:
Vjacheslav Trushkin 2022-04-10 10:45:05 +03:00
parent 9e3bc44b7e
commit b057e935b4
12 changed files with 127 additions and 65 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
packages/iconify/src/render/bg.ts
View File

@ -1,5 +1,6 @@
import type { FullIconifyIcon } from '@iconify/utils/lib/icon'; import type { FullIconifyIcon } from '@iconify/utils/lib/icon';
import { iconToSVG } from '@iconify/utils/lib/svg/build'; import { iconToSVG } from '@iconify/utils/lib/svg/build';
import { iconToHTML } from '@iconify/utils/lib/svg/html';
import { import {
elementDataProperty, elementDataProperty,
IconifyElement, IconifyElement,
@ -7,7 +8,6 @@ import {
IconifyElementData, IconifyElementData,
} from '../scanner/config'; } from '../scanner/config';
import { applyClasses, iconClasses } from './classes'; import { applyClasses, iconClasses } from './classes';
import { generateHTML } from './html';
import { applyStyle } from './style'; import { applyStyle } from './style';
const commonProps: Record<string, string> = { const commonProps: Record<string, string> = {
@ -58,12 +58,11 @@ export function renderBackground(
const oldData = element[elementDataProperty]; const oldData = element[elementDataProperty];
// Generate SVG // Generate SVG
const svgAttribs: Record<string, string> = { const html = iconToHTML(renderData.body, {
...renderAttribs, ...renderAttribs,
}; width: iconData.width + '',
svgAttribs.width = iconData.width.toString(); height: iconData.height + '',
svgAttribs.height = iconData.height.toString(); });
const html = generateHTML(svgAttribs, renderData.body);
// Add classes // Add classes
const classesToAdd = iconClasses(props.icon); const classesToAdd = iconClasses(props.icon);

19
packages/iconify/src/render/html.ts
View File

@ -1,19 +0,0 @@
/**
* Generate HTML
*/
export function generateHTML(
props: Record<string, string>,
body: string
): string {
let renderAttribsHTML = '';
for (const attr in props) {
renderAttribsHTML += ' ' + attr + '="' + props[attr] + '"';
}
return (
'<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"' +
renderAttribsHTML +
'>' +
body +
'</svg>'
);
}

9
packages/iconify/src/render/svg.ts
View File

@ -1,6 +1,7 @@
import type { FullIconifyIcon } from '@iconify/utils/lib/icon'; import type { FullIconifyIcon } from '@iconify/utils/lib/icon';
import { iconToSVG } from '@iconify/utils/lib/svg/build'; import { iconToSVG } from '@iconify/utils/lib/svg/build';
import { replaceIDs } from '@iconify/utils/lib/svg/id'; import { replaceIDs } from '@iconify/utils/lib/svg/id';
import { iconToHTML } from '@iconify/utils/lib/svg/html';
import { import {
elementDataProperty, elementDataProperty,
IconifyElement, IconifyElement,
@ -8,7 +9,6 @@ import {
IconifyElementData, IconifyElementData,
} from '../scanner/config'; } from '../scanner/config';
import { applyClasses, iconClasses } from './classes'; import { applyClasses, iconClasses } from './classes';
import { generateHTML } from './html';
import { applyStyle } from './style'; import { applyStyle } from './style';
/** /**
@ -34,14 +34,11 @@ export function renderInlineSVG(
const oldData = element[elementDataProperty]; const oldData = element[elementDataProperty];
// Generate SVG // Generate SVG
const html = generateHTML( const html = iconToHTML(replaceIDs(renderData.body), {
{
'aria-hidden': 'true', 'aria-hidden': 'true',
'role': 'img', 'role': 'img',
...renderData.attributes, ...renderData.attributes,
}, });
replaceIDs(renderData.body)
);
span.innerHTML = html; span.innerHTML = html;
// Get SVG element // Get SVG element

38
packages/iconify/tests/element-props-test.ts
View File

@ -27,6 +27,10 @@ describe('Testing element properties', () => {
customisations: { customisations: {
...defaults, ...defaults,
}, },
// Value is null because that is what getAttribute() returns, but type and value are not
// checked because it does not actually matter. In render it compares to string, any other
// value is considered to be automatic mode
mode: null,
}); });
// More complex name // More complex name
@ -42,6 +46,7 @@ describe('Testing element properties', () => {
customisations: { customisations: {
...defaults, ...defaults,
}, },
mode: null,
}); });
expect(propsChanged(props1, props2)).toBe(true); expect(propsChanged(props1, props2)).toBe(true);
@ -58,6 +63,7 @@ describe('Testing element properties', () => {
customisations: { customisations: {
...defaults, ...defaults,
}, },
mode: null,
}); });
expect(propsChanged(props1, props3)).toBe(true); expect(propsChanged(props1, props3)).toBe(true);
expect(propsChanged(props2, props3)).toBe(true); expect(propsChanged(props2, props3)).toBe(true);
@ -88,6 +94,7 @@ describe('Testing element properties', () => {
...defaults, ...defaults,
inline: false, inline: false,
}, },
mode: null,
}); });
// Inline: set via attribute // Inline: set via attribute
@ -100,6 +107,7 @@ describe('Testing element properties', () => {
...defaults, ...defaults,
inline: true, inline: true,
}, },
mode: null,
}); });
expect(propsChanged(props1Block, props2Inline)).toBe(true); expect(propsChanged(props1Block, props2Inline)).toBe(true);
@ -113,6 +121,7 @@ describe('Testing element properties', () => {
...defaults, ...defaults,
inline: false, inline: false,
}, },
mode: null,
}); });
expect(propsChanged(props1Block, props3Block)).toBe(false); expect(propsChanged(props1Block, props3Block)).toBe(false);
@ -127,6 +136,7 @@ describe('Testing element properties', () => {
...defaults, ...defaults,
inline: true, inline: true,
}, },
mode: null,
}); });
expect(propsChanged(props1Block, props4Inline)).toBe(true); expect(propsChanged(props1Block, props4Inline)).toBe(true);
expect(propsChanged(props2Inline, props4Inline)).toBe(false); expect(propsChanged(props2Inline, props4Inline)).toBe(false);
@ -140,6 +150,7 @@ describe('Testing element properties', () => {
...defaults, ...defaults,
inline: false, inline: false,
}, },
mode: null,
}); });
// Inline: set via attribute, overriding class // Inline: set via attribute, overriding class
@ -152,6 +163,7 @@ describe('Testing element properties', () => {
...defaults, ...defaults,
inline: true, inline: true,
}, },
mode: null,
}); });
// Block: set via attribute, overriding class // Block: set via attribute, overriding class
@ -164,6 +176,7 @@ describe('Testing element properties', () => {
...defaults, ...defaults,
inline: false, inline: false,
}, },
mode: null,
}); });
}); });
@ -188,6 +201,7 @@ describe('Testing element properties', () => {
width: null, width: null,
height: null, height: null,
}, },
mode: null,
}); });
// Set width // Set width
@ -200,6 +214,7 @@ describe('Testing element properties', () => {
width: '200', width: '200',
height: null, height: null,
}, },
mode: null,
}); });
// Set height // Set height
@ -212,6 +227,7 @@ describe('Testing element properties', () => {
width: '200', width: '200',
height: '1em', height: '1em',
}, },
mode: null,
}); });
// Empty width // Empty width
@ -224,6 +240,7 @@ describe('Testing element properties', () => {
width: null, width: null,
height: '1em', height: '1em',
}, },
mode: null,
}); });
}); });
@ -247,6 +264,7 @@ describe('Testing element properties', () => {
...defaults, ...defaults,
rotate: 0, rotate: 0,
}, },
mode: null,
}); });
// 90deg // 90deg
@ -258,6 +276,7 @@ describe('Testing element properties', () => {
...defaults, ...defaults,
rotate: 1, rotate: 1,
}, },
mode: null,
}); });
// 180deg // 180deg
@ -269,6 +288,7 @@ describe('Testing element properties', () => {
...defaults, ...defaults,
rotate: 2, rotate: 2,
}, },
mode: null,
}); });
// 270deg // 270deg
@ -280,6 +300,7 @@ describe('Testing element properties', () => {
...defaults, ...defaults,
rotate: 3, rotate: 3,
}, },
mode: null,
}); });
// 270deg // 270deg
@ -291,6 +312,7 @@ describe('Testing element properties', () => {
...defaults, ...defaults,
rotate: 3, rotate: 3,
}, },
mode: null,
}); });
// Invalid values or 0 deg // Invalid values or 0 deg
@ -301,6 +323,7 @@ describe('Testing element properties', () => {
customisations: { customisations: {
...defaults, ...defaults,
}, },
mode: null,
}); });
element.setAttribute('data-rotate', '360deg'); element.setAttribute('data-rotate', '360deg');
@ -310,6 +333,7 @@ describe('Testing element properties', () => {
customisations: { customisations: {
...defaults, ...defaults,
}, },
mode: null,
}); });
element.setAttribute('data-rotate', 'true'); element.setAttribute('data-rotate', 'true');
@ -319,6 +343,7 @@ describe('Testing element properties', () => {
customisations: { customisations: {
...defaults, ...defaults,
}, },
mode: null,
}); });
element.setAttribute('data-rotate', '-100%'); element.setAttribute('data-rotate', '-100%');
@ -328,6 +353,7 @@ describe('Testing element properties', () => {
customisations: { customisations: {
...defaults, ...defaults,
}, },
mode: null,
}); });
}); });
@ -352,6 +378,7 @@ describe('Testing element properties', () => {
hFlip: false, hFlip: false,
vFlip: false, vFlip: false,
}, },
mode: null,
}); });
// Horizontal // Horizontal
@ -363,6 +390,7 @@ describe('Testing element properties', () => {
...defaults, ...defaults,
hFlip: true, hFlip: true,
}, },
mode: null,
}); });
// Both // Both
@ -375,6 +403,7 @@ describe('Testing element properties', () => {
hFlip: true, hFlip: true,
vFlip: true, vFlip: true,
}, },
mode: null,
}); });
// Vertical // Vertical
@ -387,6 +416,7 @@ describe('Testing element properties', () => {
...defaults, ...defaults,
vFlip: true, vFlip: true,
}, },
mode: null,
}); });
// Overwriting shorthand attr // Overwriting shorthand attr
@ -398,6 +428,7 @@ describe('Testing element properties', () => {
customisations: { customisations: {
...defaults, ...defaults,
}, },
mode: null,
}); });
// Both // Both
@ -411,6 +442,7 @@ describe('Testing element properties', () => {
hFlip: true, hFlip: true,
vFlip: true, vFlip: true,
}, },
mode: null,
}); });
// None // None
@ -422,6 +454,7 @@ describe('Testing element properties', () => {
customisations: { customisations: {
...defaults, ...defaults,
}, },
mode: null,
}); });
}); });
@ -447,6 +480,7 @@ describe('Testing element properties', () => {
vAlign: 'middle', vAlign: 'middle',
slice: false, slice: false,
}, },
mode: null,
}); });
// Horizontal // Horizontal
@ -458,6 +492,7 @@ describe('Testing element properties', () => {
...defaults, ...defaults,
hAlign: 'left', hAlign: 'left',
}, },
mode: null,
}); });
element.setAttribute('data-align', 'right,meet'); element.setAttribute('data-align', 'right,meet');
@ -468,6 +503,7 @@ describe('Testing element properties', () => {
...defaults, ...defaults,
hAlign: 'right', hAlign: 'right',
}, },
mode: null,
}); });
// Vertical, slice // Vertical, slice
@ -480,6 +516,7 @@ describe('Testing element properties', () => {
vAlign: 'top', vAlign: 'top',
slice: true, slice: true,
}, },
mode: null,
}); });
// Overrides, spaces // Overrides, spaces
@ -495,6 +532,7 @@ describe('Testing element properties', () => {
hAlign: 'right', hAlign: 'right',
slice: true, slice: true,
}, },
mode: null,
}); });
}); });
}); });

12
packages/iconify/tests/observing-changes-test.ts
View File

@ -62,7 +62,7 @@ describe('Observing DOM changes', () => {
// Check HTML // Check HTML
expect(document.body.innerHTML).toBe( expect(document.body.innerHTML).toBe(
`<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 16 16" data-icon="${iconName}" class="iconify iconify--${provider} iconify--${prefix}"><g></g></svg>` `<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="1em" height="1em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 16 16" data-icon="${iconName}" class="iconify iconify--${provider} iconify--${prefix}"><g></g></svg>`
); );
const svg = document.body.childNodes[0] as SVGSVGElement; const svg = document.body.childNodes[0] as SVGSVGElement;
const svgData = svg[elementDataProperty]; const svgData = svg[elementDataProperty];
@ -77,7 +77,7 @@ describe('Observing DOM changes', () => {
() => document.body.innerHTML.indexOf('transform=') !== -1 () => document.body.innerHTML.indexOf('transform=') !== -1
); );
expect(document.body.innerHTML).toBe( expect(document.body.innerHTML).toBe(
`<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 16 16" data-icon="${iconName}" data-rotate="90deg" class="iconify iconify--${provider} iconify--${prefix}"><g transform="rotate(90 8 8)"><g></g></g></svg>` `<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="1em" height="1em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 16 16" data-icon="${iconName}" data-rotate="90deg" class="iconify iconify--${provider} iconify--${prefix}"><g transform="rotate(90 8 8)"><g></g></g></svg>`
); );
}); });
@ -142,7 +142,7 @@ describe('Observing DOM changes', () => {
// Check HTML // Check HTML
expect(document.body.innerHTML).toBe( expect(document.body.innerHTML).toBe(
`<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 16 16" data-icon="${iconName}" class="iconify iconify--${provider} iconify--${prefix1}"><g></g></svg>` `<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="1em" height="1em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 16 16" data-icon="${iconName}" class="iconify iconify--${provider} iconify--${prefix1}"><g></g></svg>`
); );
const svg = document.body.childNodes[0] as SVGSVGElement; const svg = document.body.childNodes[0] as SVGSVGElement;
const svgData = svg[elementDataProperty]; const svgData = svg[elementDataProperty];
@ -157,7 +157,7 @@ describe('Observing DOM changes', () => {
// SVG should not have been replaced yet, but data should match new icon // SVG should not have been replaced yet, but data should match new icon
expect(document.body.innerHTML).toBe( expect(document.body.innerHTML).toBe(
`<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 16 16" data-icon="${iconName2}" class="iconify iconify--${provider} iconify--${prefix1}"><g></g></svg>` `<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="1em" height="1em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 16 16" data-icon="${iconName2}" class="iconify iconify--${provider} iconify--${prefix1}"><g></g></svg>`
); );
expect(document.body.childNodes[0]).toBe(svg); expect(document.body.childNodes[0]).toBe(svg);
expect(svgData.status).toBe('loading'); expect(svgData.status).toBe('loading');
@ -172,7 +172,7 @@ describe('Observing DOM changes', () => {
); );
expect(document.body.innerHTML).toBe( expect(document.body.innerHTML).toBe(
`<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24" data-icon="${iconName2}" class="iconify iconify--${provider} iconify--${prefix2}"><path d="M0 0v2"></path></svg>` `<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="1em" height="1em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24" data-icon="${iconName2}" class="iconify iconify--${provider} iconify--${prefix2}"><path d="M0 0v2"></path></svg>`
); );
}); });
@ -285,7 +285,7 @@ describe('Observing DOM changes', () => {
); );
expect(document.body.innerHTML).toBe( expect(document.body.innerHTML).toBe(
`<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24" data-icon="${iconName2}" class="iconify iconify--${provider} iconify--${prefix2}"><path d="M0 0v2"></path></svg>` `<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="1em" height="1em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24" data-icon="${iconName2}" class="iconify iconify--${provider} iconify--${prefix2}"><path d="M0 0v2"></path></svg>`
); );
}); });
}); });

22
packages/iconify/tests/re-render-node-test.ts
View File

@ -77,7 +77,7 @@ describe('Testing re-rendering nodes', () => {
width: 24, width: 24,
height: 24, height: 24,
}, },
'<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24" data-icon="mdi:home" class="iconify iconify--mdi"><g></g></svg>', '<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="1em" height="1em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24" data-icon="mdi:home" class="iconify iconify--mdi"><g></g></svg>',
(svg) => { (svg) => {
const data = svg[elementDataProperty]; const data = svg[elementDataProperty];
expect(data.status).toBe('loaded'); expect(data.status).toBe('loaded');
@ -94,7 +94,7 @@ describe('Testing re-rendering nodes', () => {
height: 32, height: 32,
}; };
}, },
'<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="32" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 32 32" data-icon="mdi-light:home-outline" data-height="auto" class="iconify iconify--mdi-light"><path d=""></path></svg>' '<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="32" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 32 32" data-icon="mdi-light:home-outline" data-height="auto" class="iconify iconify--mdi-light"><path d=""></path></svg>'
); );
const data = svg[elementDataProperty]; const data = svg[elementDataProperty];
@ -113,7 +113,7 @@ describe('Testing re-rendering nodes', () => {
const svg = await testIcon( const svg = await testIcon(
'<span class="iconify" data-icon="mdi:home"></span>', '<span class="iconify" data-icon="mdi:home"></span>',
iconData, iconData,
'<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24" data-icon="mdi:home" class="iconify iconify--mdi"><g></g></svg>', '<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="1em" height="1em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24" data-icon="mdi:home" class="iconify iconify--mdi"><g></g></svg>',
(svg) => { (svg) => {
const data = svg[elementDataProperty]; const data = svg[elementDataProperty];
expect(data.status).toBe('loaded'); expect(data.status).toBe('loaded');
@ -125,7 +125,7 @@ describe('Testing re-rendering nodes', () => {
return iconData; return iconData;
}, },
'<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24" data-icon="mdi:home" class="iconify iconify--mdi iconify-inline" style="vertical-align: -0.125em;"><g></g></svg>', '<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="1em" height="1em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24" data-icon="mdi:home" class="iconify iconify--mdi iconify-inline" style="vertical-align: -0.125em;"><g></g></svg>',
(svg) => { (svg) => {
const data = svg[elementDataProperty]; const data = svg[elementDataProperty];
expect(data.status).toBe('loaded'); expect(data.status).toBe('loaded');
@ -137,7 +137,7 @@ describe('Testing re-rendering nodes', () => {
return iconData; return iconData;
}, },
'<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24" data-icon="mdi:home" style="" class="iconify iconify--mdi"><g></g></svg>' '<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="1em" height="1em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24" data-icon="mdi:home" style="" class="iconify iconify--mdi"><g></g></svg>'
); );
const data = svg[elementDataProperty]; const data = svg[elementDataProperty];
@ -156,7 +156,7 @@ describe('Testing re-rendering nodes', () => {
const svg = await testIcon( const svg = await testIcon(
'<span class="iconify" data-icon="mdi:home"></span>', '<span class="iconify" data-icon="mdi:home"></span>',
iconData, iconData,
'<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24" data-icon="mdi:home" class="iconify iconify--mdi"><g></g></svg>', '<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="1em" height="1em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24" data-icon="mdi:home" class="iconify iconify--mdi"><g></g></svg>',
(svg) => { (svg) => {
const data = svg[elementDataProperty]; const data = svg[elementDataProperty];
expect(data.status).toBe('loaded'); expect(data.status).toBe('loaded');
@ -168,7 +168,7 @@ describe('Testing re-rendering nodes', () => {
return iconData; return iconData;
}, },
'<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24" data-icon="mdi:home" data-inline="data-inline" class="iconify iconify--mdi" style="vertical-align: -0.125em;"><g></g></svg>', '<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="1em" height="1em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24" data-icon="mdi:home" data-inline="data-inline" class="iconify iconify--mdi" style="vertical-align: -0.125em;"><g></g></svg>',
(svg) => { (svg) => {
const data = svg[elementDataProperty]; const data = svg[elementDataProperty];
expect(data.status).toBe('loaded'); expect(data.status).toBe('loaded');
@ -180,7 +180,7 @@ describe('Testing re-rendering nodes', () => {
return iconData; return iconData;
}, },
'<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24" data-icon="mdi:home" data-inline="" style="" class="iconify iconify--mdi"><g></g></svg>' '<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="1em" height="1em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24" data-icon="mdi:home" data-inline="" style="" class="iconify iconify--mdi"><g></g></svg>'
); );
const data = svg[elementDataProperty]; const data = svg[elementDataProperty];
@ -197,7 +197,7 @@ describe('Testing re-rendering nodes', () => {
width: 24, width: 24,
height: 24, height: 24,
}, },
'<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24" data-icon="mdi:home" data-flip="horizontal" class="iconify iconify--mdi"><g transform="translate(24 0) scale(-1 1)"><g></g></g></svg>', '<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="1em" height="1em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24" data-icon="mdi:home" data-flip="horizontal" class="iconify iconify--mdi"><g transform="translate(24 0) scale(-1 1)"><g></g></g></svg>',
(svg) => { (svg) => {
const data = svg[elementDataProperty]; const data = svg[elementDataProperty];
expect(data.status).toBe('loaded'); expect(data.status).toBe('loaded');
@ -214,7 +214,7 @@ describe('Testing re-rendering nodes', () => {
height: 32, height: 32,
}; };
}, },
'<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 32 32" data-icon="mdi:home" data-flip="vertical" data-rotate="90deg" class="iconify iconify--mdi"><g transform="rotate(90 16 16) translate(0 32) scale(1 -1)"><path d=""></path></g></svg>', '<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="1em" height="1em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 32 32" data-icon="mdi:home" data-flip="vertical" data-rotate="90deg" class="iconify iconify--mdi"><g transform="rotate(90 16 16) translate(0 32) scale(1 -1)"><path d=""></path></g></svg>',
(svg) => { (svg) => {
const data = svg[elementDataProperty]; const data = svg[elementDataProperty];
expect(data.status).toBe('loaded'); expect(data.status).toBe('loaded');
@ -229,7 +229,7 @@ describe('Testing re-rendering nodes', () => {
body: '<g />', body: '<g />',
}; };
}, },
'<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 16 16" data-icon="mdi:home" data-rotate="180deg" class="iconify iconify--mdi"><g transform="rotate(180 8 8)"><g></g></g></svg>' '<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="1em" height="1em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 16 16" data-icon="mdi:home" data-rotate="180deg" class="iconify iconify--mdi"><g transform="rotate(180 8 8)"><g></g></g></svg>'
); );
const data = svg[elementDataProperty]; const data = svg[elementDataProperty];

12
packages/iconify/tests/render-bg-test.ts
View File

@ -59,7 +59,7 @@ describe('Testing rendering nodes as background', () => {
width: 24, width: 24,
height: 24, height: 24,
}, },
`<span class="iconify iconify--mdi" data-icon="mdi:home" style="--svg: url(&quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='24' height='24' preserveAspectRatio='xMidYMid meet' viewBox='0 0 24 24'%3E%3Cg /%3E%3C/svg%3E&quot;); width: 1em; height: 1em; display: inline-block; background-color: transparent; background-repeat: no-repeat; background-size: 100% 100%;"></span>` `<span class="iconify iconify--mdi" data-icon="mdi:home" style="--svg: url(&quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' preserveAspectRatio='xMidYMid meet' viewBox='0 0 24 24'%3E%3Cg /%3E%3C/svg%3E&quot;); width: 1em; height: 1em; display: inline-block; background-color: transparent; background-repeat: no-repeat; background-size: 100% 100%;"></span>`
); );
const data = svg[elementDataProperty]; const data = svg[elementDataProperty];
@ -76,7 +76,7 @@ describe('Testing rendering nodes as background', () => {
width: 24, width: 24,
height: 24, height: 24,
}, },
`<i class="iconify-inline iconify iconify--mdi" data-icon="mdi:home" data-flip="horizontal" style="--svg: url(&quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='24' height='24' preserveAspectRatio='xMidYMid meet' viewBox='0 0 24 24'%3E%3Cg transform='translate(24 0) scale(-1 1)'%3E%3Cg /%3E%3C/g%3E%3C/svg%3E&quot;); width: 1em; height: 1em; display: inline-block; background-color: transparent; background-repeat: no-repeat; background-size: 100% 100%; vertical-align: -0.125em;"></i>` `<i class="iconify-inline iconify iconify--mdi" data-icon="mdi:home" data-flip="horizontal" style="--svg: url(&quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' preserveAspectRatio='xMidYMid meet' viewBox='0 0 24 24'%3E%3Cg transform='translate(24 0) scale(-1 1)'%3E%3Cg /%3E%3C/g%3E%3C/svg%3E&quot;); width: 1em; height: 1em; display: inline-block; background-color: transparent; background-repeat: no-repeat; background-size: 100% 100%; vertical-align: -0.125em;"></i>`
); );
const data = svg[elementDataProperty]; const data = svg[elementDataProperty];
@ -96,7 +96,7 @@ describe('Testing rendering nodes as background', () => {
width: 24, width: 24,
height: 24, height: 24,
}, },
`<span id="test" style="color: red; vertical-align: -0.1em; --svg: url(&quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='24' height='24' preserveAspectRatio='xMidYMid meet' viewBox='0 0 24 24'%3E%3Cg /%3E%3C/svg%3E&quot;); width: 1em; height: 1em; display: inline-block; background-color: transparent; background-repeat: no-repeat; background-size: 100% 100%;" class="iconify my-icon iconify--mdi" data-icon="mdi:home"></span>` `<span id="test" style="color: red; vertical-align: -0.1em; --svg: url(&quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' preserveAspectRatio='xMidYMid meet' viewBox='0 0 24 24'%3E%3Cg /%3E%3C/svg%3E&quot;); width: 1em; height: 1em; display: inline-block; background-color: transparent; background-repeat: no-repeat; background-size: 100% 100%;" class="iconify my-icon iconify--mdi" data-icon="mdi:home"></span>`
); );
const data = svg[elementDataProperty]; const data = svg[elementDataProperty];
@ -113,7 +113,7 @@ describe('Testing rendering nodes as background', () => {
width: 24, width: 24,
height: 24, height: 24,
}, },
`<i class="iconify-inline iconify iconify--mdi" data-icon="mdi:home" style="vertical-align: 0; --svg: url(&quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='24' height='24' preserveAspectRatio='xMidYMid meet' viewBox='0 0 24 24'%3E%3Cg /%3E%3C/svg%3E&quot;); width: 1em; height: 1em; display: inline-block; background-color: transparent; background-repeat: no-repeat; background-size: 100% 100%;"></i>` `<i class="iconify-inline iconify iconify--mdi" data-icon="mdi:home" style="vertical-align: 0; --svg: url(&quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' preserveAspectRatio='xMidYMid meet' viewBox='0 0 24 24'%3E%3Cg /%3E%3C/svg%3E&quot;); width: 1em; height: 1em; display: inline-block; background-color: transparent; background-repeat: no-repeat; background-size: 100% 100%;"></i>`
); );
const data = svg[elementDataProperty]; const data = svg[elementDataProperty];
@ -130,7 +130,7 @@ describe('Testing rendering nodes as background', () => {
width: 24, width: 24,
height: 24, height: 24,
}, },
`<i class="iconify-inline iconify iconify--provider iconify--mdi-light" data-icon="@provider:mdi-light:home-outline" style="color: red; --svg: url(&quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='24' height='24' preserveAspectRatio='xMidYMid meet' viewBox='0 0 24 24'%3E%3Cg /%3E%3C/svg%3E&quot;); width: 1em; height: 1em; display: inline-block; background-color: transparent; background-repeat: no-repeat; background-size: 100% 100%; vertical-align: -0.125em;"></i>` `<i class="iconify-inline iconify iconify--provider iconify--mdi-light" data-icon="@provider:mdi-light:home-outline" style="color: red; --svg: url(&quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' preserveAspectRatio='xMidYMid meet' viewBox='0 0 24 24'%3E%3Cg /%3E%3C/svg%3E&quot;); width: 1em; height: 1em; display: inline-block; background-color: transparent; background-repeat: no-repeat; background-size: 100% 100%; vertical-align: -0.125em;"></i>`
); );
const data = svg[elementDataProperty]; const data = svg[elementDataProperty];
@ -154,7 +154,7 @@ describe('Testing rendering nodes as background', () => {
width: 24, width: 24,
height: 24, height: 24,
}, },
`<i class="iconify iconify--test" data-icon="@test:test:arrow-left" style="--svg: url(&quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='24' height='24' preserveAspectRatio='xMidYMid meet' viewBox='0 0 24 24'%3E%3Cg /%3E%3C/svg%3E&quot;); width: 1em; height: 1em; display: inline-block; background-color: transparent; background-repeat: no-repeat; background-size: 100% 100%;"></i>` `<i class="iconify iconify--test" data-icon="@test:test:arrow-left" style="--svg: url(&quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' preserveAspectRatio='xMidYMid meet' viewBox='0 0 24 24'%3E%3Cg /%3E%3C/svg%3E&quot;); width: 1em; height: 1em; display: inline-block; background-color: transparent; background-repeat: no-repeat; background-size: 100% 100%;"></i>`
); );
const data = svg[elementDataProperty]; const data = svg[elementDataProperty];

12
packages/iconify/tests/render-node-test.ts
View File

@ -47,7 +47,7 @@ describe('Testing rendering nodes', () => {
width: 24, width: 24,
height: 24, height: 24,
}, },
'<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24" data-icon="mdi:home" class="iconify iconify--mdi"><g></g></svg>' '<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="1em" height="1em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24" data-icon="mdi:home" class="iconify iconify--mdi"><g></g></svg>'
); );
const data = svg[elementDataProperty]; const data = svg[elementDataProperty];
@ -64,7 +64,7 @@ describe('Testing rendering nodes', () => {
width: 24, width: 24,
height: 24, height: 24,
}, },
'<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24" data-icon="mdi:home" data-flip="horizontal" class="iconify-inline iconify iconify--mdi" style="vertical-align: -0.125em;"><g transform="translate(24 0) scale(-1 1)"><g></g></g></svg>' '<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="1em" height="1em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24" data-icon="mdi:home" data-flip="horizontal" class="iconify-inline iconify iconify--mdi" style="vertical-align: -0.125em;"><g transform="translate(24 0) scale(-1 1)"><g></g></g></svg>'
); );
const data = svg[elementDataProperty]; const data = svg[elementDataProperty];
@ -81,7 +81,7 @@ describe('Testing rendering nodes', () => {
width: 24, width: 24,
height: 24, height: 24,
}, },
'<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24" id="test" style="color: red; vertical-align: -0.1em;" data-icon="mdi:home" class="iconify my-icon iconify--mdi"><g></g></svg>' '<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="1em" height="1em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24" id="test" style="color: red; vertical-align: -0.1em;" data-icon="mdi:home" class="iconify my-icon iconify--mdi"><g></g></svg>'
); );
const data = svg[elementDataProperty]; const data = svg[elementDataProperty];
@ -98,7 +98,7 @@ describe('Testing rendering nodes', () => {
width: 24, width: 24,
height: 24, height: 24,
}, },
'<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24" data-icon="mdi:home" style="vertical-align: 0" class="iconify-inline iconify iconify--mdi"><g></g></svg>' '<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="1em" height="1em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24" data-icon="mdi:home" style="vertical-align: 0" class="iconify-inline iconify iconify--mdi"><g></g></svg>'
); );
const data = svg[elementDataProperty]; const data = svg[elementDataProperty];
@ -115,7 +115,7 @@ describe('Testing rendering nodes', () => {
width: 24, width: 24,
height: 24, height: 24,
}, },
'<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24" data-icon="@provider:mdi-light:home-outline" style="color: red; vertical-align: -0.125em;" class="iconify-inline iconify iconify--provider iconify--mdi-light"><g></g></svg>' '<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="1em" height="1em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24" data-icon="@provider:mdi-light:home-outline" style="color: red; vertical-align: -0.125em;" class="iconify-inline iconify iconify--provider iconify--mdi-light"><g></g></svg>'
); );
const data = svg[elementDataProperty]; const data = svg[elementDataProperty];
@ -136,7 +136,7 @@ describe('Testing rendering nodes', () => {
width: 24, width: 24,
height: 24, height: 24,
}, },
'<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24" data-icon="@test:test:arrow-left" class="iconify iconify--test"><g></g></svg>' '<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="1em" height="1em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24" data-icon="@test:test:arrow-left" class="iconify iconify--test"><g></g></svg>'
); );
const data = svg[elementDataProperty]; const data = svg[elementDataProperty];

4
packages/iconify/tests/scan-dom-test.ts
View File

@ -51,7 +51,7 @@ describe('Scanning DOM', () => {
// Check HTML // Check HTML
expect(document.body.innerHTML).toBe( expect(document.body.innerHTML).toBe(
`<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 16 16" data-icon="${iconName}" class="iconify iconify--${provider} iconify--${prefix}"><g></g></svg>` `<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="1em" height="1em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 16 16" data-icon="${iconName}" class="iconify iconify--${provider} iconify--${prefix}"><g></g></svg>`
); );
const svg = document.body.childNodes[0]; const svg = document.body.childNodes[0];
const svgData = svg[elementDataProperty]; const svgData = svg[elementDataProperty];
@ -110,7 +110,7 @@ describe('Scanning DOM', () => {
// Check HTML // Check HTML
expect(document.body.innerHTML).toBe( expect(document.body.innerHTML).toBe(
`<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 16 16" data-icon="${iconName}" class="iconify iconify--${provider} iconify--${prefix}"><g></g></svg>` `<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="1em" height="1em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 16 16" data-icon="${iconName}" class="iconify iconify--${provider} iconify--${prefix}"><g></g></svg>`
); );
const svg = document.body.childNodes[0]; const svg = document.body.childNodes[0];
const svgData = svg[elementDataProperty]; const svgData = svg[elementDataProperty];

4
packages/utils/package.json
View File

@ -187,6 +187,10 @@
"require": "./lib/svg/encode-svg-for-css.cjs", "require": "./lib/svg/encode-svg-for-css.cjs",
"import": "./lib/svg/encode-svg-for-css.mjs" "import": "./lib/svg/encode-svg-for-css.mjs"
}, },
"./lib/svg/html": {
"require": "./lib/svg/html.cjs",
"import": "./lib/svg/html.mjs"
},
"./lib/svg/id": { "./lib/svg/id": {
"require": "./lib/svg/id.cjs", "require": "./lib/svg/id.cjs",
"import": "./lib/svg/id.mjs" "import": "./lib/svg/id.mjs"

22
packages/utils/src/svg/html.ts Normal file
View File

@ -0,0 +1,22 @@
/**
* Generate <svg>
*/
export function iconToHTML(
body: string,
attributes: Record<string, string>
): string {
let renderAttribsHTML =
body.indexOf('xlink:') === -1
? ''
: ' xmlns:xlink="http://www.w3.org/1999/xlink"';
for (const attr in attributes) {
renderAttribsHTML += ' ' + attr + '="' + attributes[attr] + '"';
}
return (
'<svg xmlns="http://www.w3.org/2000/svg"' +
renderAttribsHTML +
'>' +
body +
'</svg>'
);
}

21
packages/utils/tests/svg-build-test.ts
View File

@ -4,6 +4,7 @@ import type { FullIconifyIcon } from '../lib/icon';
import { fullIcon, iconDefaults } from '../lib/icon'; import { fullIcon, iconDefaults } from '../lib/icon';
import type { FullIconCustomisations } from '../lib/customisations'; import type { FullIconCustomisations } from '../lib/customisations';
import { defaults, mergeCustomisations } from '../lib/customisations'; import { defaults, mergeCustomisations } from '../lib/customisations';
import { iconToHTML } from '../lib/svg/html';
describe('Testing iconToSVG', () => { describe('Testing iconToSVG', () => {
test('Empty icon', () => { test('Empty icon', () => {
@ -21,6 +22,12 @@ describe('Testing iconToSVG', () => {
const result = iconToSVG(icon, custom); const result = iconToSVG(icon, custom);
expect(result).toEqual(expected); expect(result).toEqual(expected);
// Test HTML
const html = iconToHTML(result.body, result.attributes);
expect(html).toBe(
'<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 16 16"></svg>'
);
}); });
test('Auto size, inline, body', () => { test('Auto size, inline, body', () => {
@ -44,6 +51,20 @@ describe('Testing iconToSVG', () => {
const result = iconToSVG(icon, custom); const result = iconToSVG(icon, custom);
expect(result).toEqual(expected); expect(result).toEqual(expected);
// Test HTML
const htmlProps: Record<string, string> = {
'aria-hidden': 'true',
'role': 'img',
...result.attributes,
};
if (result.inline) {
htmlProps['style'] = 'vertical-align: -0.125em;';
}
const html = iconToHTML(result.body, htmlProps);
expect(html).toBe(
'<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="16" height="16" preserveAspectRatio="xMidYMid meet" viewBox="0 0 16 16" style="vertical-align: -0.125em;"><path d="" /></svg>'
);
}); });
test('Auto size, inline, body', () => { test('Auto size, inline, body', () => {