SVG framework function: replaceIDs

This tutorial is part of Iconify SVG Framework functions tutorial.

Function replaceIDs() finds IDs in SVG and replaces them with unique random IDs.

This function is meant to be used when you generate <svg> element yourself using data provided by renderIcon() or getIcon(). For example, if icon is generated by some component.

Usage

Function has the following parameters:

  • data, string. Icon content.
  • prefix, string | function. Optional prefix for generated IDs. It can be a string or a callback that returns string.

Function returns string containing icon data with IDs replaced.

Example

// Get icon data
const icon = Iconify.renderIcon('carbon:deploy', {
   height: 'auto',
});

// 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);