iconToSVG()
This function is part of Iconify Utils package.
Function iconToSVG() generates data required to render SVG.
It is used by all Iconify Icon components.
Usage
Function has the following parameters:
- icon, IconifyIcon. Icon data.
- customisations, IconifyIconCustomisations. Icon customisations. Optional.
Function returns data with type IconifyIconBuildResult. See below.
Result
Result is an object with the following properties:
- body, string. Icon content.
- attributes, object. Attributes for <svg> element.
Result does not include attributes that are common to all <svg> elements, such as xmlns.
Examples of result
{
"attributes": {
"width": "24",
"height": "24",
"viewBox": "0 0 24 24"
},
"body": "<path d=\"M7 6v12l10-6z\" fill=\"currentColor\"/>"
}
Example
example.ts
import { icons } from '@iconify-json/codicon';
import { getIconData, iconToSVG, replaceIDs } from '@iconify/utils';
const iconName = 'debug-console';
// Get content for icon
const iconData = getIconData(icons, iconName);
if (!iconData) {
throw new Error(`Icon "${iconName}" is missing`);
}
// Use it to render icon
const renderData = iconToSVG(iconData, {
height: 'auto',
});
// Generate attributes for SVG element
const svgAttributes: Record<string, string> = {
'xmlns': 'http://www.w3.org/2000/svg',
'xmlns:xlink': 'http://www.w3.org/1999/xlink',
...renderData.attributes,
};
const svgAttributesStr = Object.keys(svgAttributes)
.map(
(attr) =>
// No need to check attributes for special characters, such as quotes,
// they cannot contain anything that needs escaping.
`${attr}="${svgAttributes[attr as keyof typeof svgAttributes]}"`
)
.join(' ');
// Generate SVG
const svg = `<svg ${svgAttributesStr}>${replaceIDs(renderData.body)}</svg>`;
// Log SVG
console.log(svg);