replace-ids

title: 'Iconify SVG Framework Function: replaceIDs'
functions:
  renderSVG: './render-svg.md'
  renderHTML: './render-html.md'
  renderIcon: './render-icon.md'
  getIcon: './get-icon.md'

SVG framework function: replaceIDs

This tutorial is part of Iconify SVG Framework functions tutorial.

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

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

Usage

include icon-components/functions/replace-ids/props

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