diff --git a/packages/iconify/src/render/bg.ts b/packages/iconify/src/render/bg.ts index bab0998..f3c43b3 100644 --- a/packages/iconify/src/render/bg.ts +++ b/packages/iconify/src/render/bg.ts @@ -6,7 +6,8 @@ import { IconifyElementProps, IconifyElementData, } from '../scanner/config'; -import { applyClasses } from './classes'; +import { applyClasses, iconClasses } from './classes'; +import { generateHTML } from './html'; import { applyStyle } from './style'; const commonProps: Record = { @@ -51,34 +52,21 @@ export function renderBackground( const renderData = iconToSVG(iconData, { ...props.customisations, }); + const renderAttribs = renderData.attributes; // Get old data const oldData = element[elementDataProperty]; // Generate SVG - const renderAttribs = renderData.attributes; - let renderAttribsHTML = ''; - for (const attr in renderAttribs) { - const value = ( - iconData[attr] !== void 0 ? iconData[attr] : renderAttribs[attr] - ) as string; - renderAttribsHTML += ' ' + attr + '="' + value + '"'; - } - const html = - '' + - renderData.body + - ''; + const svgAttribs: Record = { + ...renderAttribs, + }; + svgAttribs.width = iconData.width.toString(); + svgAttribs.height = iconData.height.toString(); + const html = generateHTML(svgAttribs, renderData.body); // Add classes - const classesToAdd: Set = new Set(['iconify']); - const iconName = props.icon; - ['provider', 'prefix'].forEach((attr: keyof typeof iconName) => { - if (iconName[attr]) { - classesToAdd.add('iconify--' + iconName[attr]); - } - }); + const classesToAdd = iconClasses(props.icon); const addedClasses = applyClasses( element, classesToAdd, diff --git a/packages/iconify/src/render/classes.ts b/packages/iconify/src/render/classes.ts index 05a9f45..62332d1 100644 --- a/packages/iconify/src/render/classes.ts +++ b/packages/iconify/src/render/classes.ts @@ -1,5 +1,19 @@ +import type { IconifyIconName } from '@iconify/utils/lib/icon/name'; import type { IconifyElement } from '../scanner/config'; +/** + * Get classes to add from icon name + */ +export function iconClasses(iconName: IconifyIconName): Set { + const classesToAdd: Set = new Set(['iconify']); + ['provider', 'prefix'].forEach((attr: keyof typeof iconName) => { + if (iconName[attr]) { + classesToAdd.add('iconify--' + iconName[attr]); + } + }); + return classesToAdd; +} + /** * Add classes to SVG, removing previously added classes, keeping custom classes */ diff --git a/packages/iconify/src/render/html.ts b/packages/iconify/src/render/html.ts new file mode 100644 index 0000000..51537f6 --- /dev/null +++ b/packages/iconify/src/render/html.ts @@ -0,0 +1,19 @@ +/** + * Generate HTML + */ +export function generateHTML( + props: Record, + body: string +): string { + let renderAttribsHTML = ''; + for (const attr in props) { + renderAttribsHTML += ' ' + attr + '="' + props[attr] + '"'; + } + return ( + '' + + body + + '' + ); +} diff --git a/packages/iconify/src/render/svg.ts b/packages/iconify/src/render/svg.ts index 98a4f47..f7ec7e8 100644 --- a/packages/iconify/src/render/svg.ts +++ b/packages/iconify/src/render/svg.ts @@ -7,7 +7,8 @@ import { IconifyElementProps, IconifyElementData, } from '../scanner/config'; -import { applyClasses } from './classes'; +import { applyClasses, iconClasses } from './classes'; +import { generateHTML } from './html'; import { applyStyle } from './style'; /** @@ -33,21 +34,20 @@ export function renderInlineSVG( const oldData = element[elementDataProperty]; // Generate SVG - const html = - ''; + const html = generateHTML( + { + 'aria-hidden': 'true', + 'role': 'img', + ...renderData.attributes, + }, + replaceIDs(renderData.body) + ); span.innerHTML = html; // Get SVG element const svg = span.childNodes[0] as IconifyElement; // Add attributes - const svgAttributes = renderData.attributes as Record; - Object.keys(svgAttributes).forEach((attr) => { - svg.setAttribute(attr, svgAttributes[attr]); - }); - const placeholderAttributes = element.attributes; for (let i = 0; i < placeholderAttributes.length; i++) { const item = placeholderAttributes.item(i); @@ -58,13 +58,7 @@ export function renderInlineSVG( } // Add classes - const classesToAdd: Set = new Set(['iconify']); - const iconName = props.icon; - ['provider', 'prefix'].forEach((attr: keyof typeof iconName) => { - if (iconName[attr]) { - classesToAdd.add('iconify--' + iconName[attr]); - } - }); + const classesToAdd = iconClasses(props.icon); const addedClasses = applyClasses( svg, classesToAdd,