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

The 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.

The function returns string containing icon data with IDs replaced.

Example

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