SVG framework function: renderSVG

This tutorial is part of Iconify SVG Framework functions tutorial.

Function renderSVG() creates <svg> element.

Usage

Function has the following parameters:

• name, string. Icon name.
• customisations. Optional customizations object.

Function returns <svg> element, null if icon is not available.

Examples

jsif (Iconify.iconExists('mdi:home')) {
   node.appendChild(Iconify.renderSVG('mdi:home'));
}

html<svg
   xmlns="http://www.w3.org/2000/svg"
   xmlns:xlink="http://www.w3.org/1999/xlink"
   aria-hidden="true"
   focusable="false"
   role="img"
   class="iconify iconify--mdi"
   width="1em"
   height="1em"
   preserveAspectRatio="xMidYMid meet"
   viewBox="0 0 24 24"
>
   <path d="M10 20v-6h4v6h5v-8h3L12 3L2 12h3v8h5z" fill="currentColor"></path>
</svg>

Generated HTML

Another example:

jsconst node = document.createElement('div');
const icon = Iconify.renderSVG('bi:stopwatch', { rotate: 1, height: 'auto' });
node.appendChild(icon);

Customizations

Second parameter is optional icon customizations. Do not confuse it with placeholder data- attributes.

Available customizations:

IconifyIconCustomisations type is an object with the following optional properties, split into several categories.

Vertical alignment:

• inline, boolean. If enabled, adds vertical-align: -0.125em to style, rendering icon below baseline. The default value is false.

Icon dimensions:

• width, string|number|null. Icon width. The default value is null.
• height, string|number|null. Icon height. The default value is null.

There are several keywords that can be used for width and height:

• "auto" sets dimension to original icon's dimensions found in viewBox.
• "unset" and "none" remove dimensions from SVG.

If neither of dimensions is set, height defaults to "1em".

It is enough to set one dimension, such as height. Another dimension will be calculated using icon's width/height ratio. In the case of keywords, another dimension will be set to the same keyword.

Transformations:

• hFlip, boolean. Flip icon horizontally. The default value is false.
• vFlip, boolean. Flip icon vertically. The default value is false.
• rotate, number. Rotation in 90 degrees increments. The default value is 0.

For more details about dimensions and alignment see icon dimensions documentation.

For more details about transformations see icon transformations documentation.

Rendering HTML

This function creates <svg> element. If you want to get string, use renderHTML() instead.