Icon attribute
This tutorial is part of Iconify Icon web component tutorial.
When using Iconify icon components, you can pass icon data to component instead of icon name, like this:
jsx
import { Icon } from '@iconify/react';
import arrowLeft from '@iconify-icons/bi/arrow-left';
function renderLeftArrow() {
return <Icon icon={arrowLeft} />;
}Unfortunately same syntax is not available for web component. Attributes in HTML elements cannot be complex objects, making it harder to pass icon data to web component.
How to solve this?
Assigning icon name
Best and easiest solution is to assign icon name to icon using addIcon() function:
js
import { addIcon } from 'iconify-icon';
import arrowLeft from '@iconify-icons/bi/arrow-left';
addIcon('arrow-left', arrowLeft);
function renderLeftArrow() {
return '<iconify-icon icon="arrow-left"></iconify-icon>';
}Serialising data
Web component also supports serialised objects for icon attribute:
js
import arrowLeft from '@iconify-icons/bi/arrow-left';
function renderLeftArrow() {
const node = document.createElement('iconify-icon');
node.setAttribute('icon', JSON.stringify(arrowLeft));
return node.outerHTML;
}Or this if you need to render HTML:
js
import arrowLeft from '@iconify-icons/bi/arrow-left';
const replacements = {
'&': '&',
'<': '<',
'>': '>',
'"': '"',
"'": ''',
};
function stringify(data) {
return JSON.stringify(arrowLeft).replace(
/[&<>"']/g,
(char) => replacements[char]
);
}
const arrowLeftString = JSON.stringify(arrowLeft);
function renderLeftArrow() {
return '<iconify-icon icon="' + arrowLeftString + '"></iconify-icon>';
}Using property
Instead of setting attribute, you can also set property, which accepts objects:
js
import arrowLeft from '@iconify-icons/bi/arrow-left';
function renderLeftArrow() {
const node = document.createElement('iconify-icon');
node.icon = arrowLeft;
return node.outerHTML;
}