render-icon

title: "Iconify SVG Framework Function: renderIcon"
functions:
  renderSVG: "./render-svg.md"
  renderHTML: "./render-html.md"
  replaceIDs: "./replace-ids.md"
  getIcon: "./get-icon.md"
  loadIcon: "./load-icon.md"
  iconExists: "./icon-exists.md"
  iconLoaded: "./icon-exists.md"

SVG framework function: renderIcon

This tutorial is part of Iconify SVG Framework functions tutorial.

Function [func]renderIcon() generates data used by [func]renderSVG() and [func]renderHTML() functions.

This function is meant to be used when you generate [tag]svg element yourself. For example, if it is generated by some component.

Usage

Function has the following parameters:

• [prop]name, [type]string. Icon name.
• [prop]customisations. Optional customizations object.

Function returns [type]object containing icon data, null if icon is not available.

Result

include: icon-components/functions/build-icon/result
replacements:
  - search: "icon component"
    replace: "SVG framework"

Change IDs! {#important}

Use function [func]replaceIDs() when generating icons using data provided by this function.

It will make sure elements inside each icon have unique IDs.

Examples

src: icon-components/iconify/render-icon.js
extra:
  - src: icon-components/iconify/render-icon.json
    title: "Result:"

Another example:

// Get icon data
const icon = Iconify.renderIcon("carbon:deploy");

// Create element
const svg = document.createElement("svg");
const svgDefaults: IconifySVGProps = {
  xmlns: "http://www.w3.org/2000/svg",
  "xmlns:xlink": "http://www.w3.org/1999/xlink",
  "aria-hidden": true,
  focusable: false,
  role: "img",
};
Object.keys(svgDefaults).forEach((attr) => {
  svg.setAttribute(attr, svgDefaults[attr]);
});
Object.keys(icon.attributes).forEach((attr) => {
  svg.setAttribute(attr, icon.attributes[attr]);
});

// Set content
svg.innerHTML = Iconify.replaceIDs(icon.body);

Customizations

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

Available customizations:

include icon-components/customisations

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

For more details about transformations see icon transformations documentation.

Rendering SVG or HTML

This function creates [type]object. If you want to create [tag]svg element, use [func]renderSVG() instead. If you want to get HTML [type]string, use [func]renderHTML() instead.