(svg framework) extract few reusable functions from different renderers

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<string, string> = {
@@ -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;
+	const svgAttribs: Record<string, string> = {
-	let renderAttribsHTML = '';
+		...renderAttribs,
-	for (const attr in renderAttribs) {
+	};
-		const value = (
+	svgAttribs.width = iconData.width.toString();
-			iconData[attr] !== void 0 ? iconData[attr] : renderAttribs[attr]
+	svgAttribs.height = iconData.height.toString();
-		) as string;
+	const html = generateHTML(svgAttribs, renderData.body);
-		renderAttribsHTML += ' ' + attr + '="' + value + '"';
-	}
-	const html =
-		'<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"' +
-		renderAttribsHTML +
-		'>' +
-		renderData.body +
-		'</svg>';
 
 	// Add classes
-	const classesToAdd: Set<string> = new Set(['iconify']);
+	const classesToAdd = iconClasses(props.icon);
-	const iconName = props.icon;
-	['provider', 'prefix'].forEach((attr: keyof typeof iconName) => {
-		if (iconName[attr]) {
-			classesToAdd.add('iconify--' + iconName[attr]);
-		}
-	});
 	const addedClasses = applyClasses(
 		element,
 		classesToAdd,

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<string> {
+	const classesToAdd: Set<string> = 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
  */

packages/iconify/src/render/html.ts

@@ -0,0 +1,19 @@
+/**
+ * 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>'
+	);
+}

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(
-		'<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img">' +
+		{
-		replaceIDs(renderData.body) +
+			'aria-hidden': 'true',
-		'</svg>';
+			'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<string, string>;
-	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<string> = new Set(['iconify']);
+	const classesToAdd = iconClasses(props.icon);
-	const iconName = props.icon;
-	['provider', 'prefix'].forEach((attr: keyof typeof iconName) => {
-		if (iconName[attr]) {
-			classesToAdd.add('iconify--' + iconName[attr]);
-		}
-	});
 	const addedClasses = applyClasses(
 		svg,
 		classesToAdd,