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

(svg framework) extract few reusable functions from different renderers

Browse Source
This commit is contained in:
Vjacheslav Trushkin 2022-04-07 23:27:48 +03:00
parent ef8f8e54ab
commit dfdb73d649
4 changed files with 54 additions and 39 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -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;
let renderAttribsHTML = '';
for (const attr in renderAttribs) {
const value = (
iconData[attr] !== void 0 ? iconData[attr] : renderAttribs[attr]
) as string;
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>';
const svgAttribs: Record<string, string> = {
...renderAttribs,
};
svgAttribs.width = iconData.width.toString();
svgAttribs.height = iconData.height.toString();
const html = generateHTML(svgAttribs, renderData.body);
// Add classes
const classesToAdd: Set<string> = 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,

14
packages/iconify/src/render/classes.ts
View File

@ -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
*/

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

@ -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>'
);
}

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

@ -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 =
'<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img">' +
replaceIDs(renderData.body) +
'</svg>';
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<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 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,