iconToSVG()
This function is part of Iconify Utils package.
Function iconToSVG() generates data required to render SVG.
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.
Attributes list in result does not include xmlns because it is identical in all SVG. It always includes viewBox, usually includes width and height.
You can use iconToHTML() to convert result to string.
Examples of result
json
{
"attributes": {
"width": "24",
"height": "24",
"viewBox": "0 0 24 24"
},
"body": "<path d=\"M7 6v12l10-6z\" fill=\"currentColor\"/>"
}Example
example.ts
ts
import { icons } from '@iconify-json/codicon';
import { getIconData, iconToSVG, iconToHTML, 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 SVG string
const svg = iconToHTML(replaceIDs(renderData.body), renderData.attributes);
// Log SVG
console.log(svg);Icon dimensions
By default, resulting attributes include width and height, where height is set to "1em".
If you want to remove dimensions, set height to "unset" or "none" in customisations parameter:
js
const result = iconToSVG(data, {
// Setting only height will also remove width
height: 'unset',
});