Bolt Design System

Icon Javascript Use

Import icons individually: import { iconChevronDown } from '@bolt/elements-icon/src/icons/js/chevron-down';. Importing icons individually reduces the compiled JS file size.

The imported icon is a function that returns an <svg> element as a string. It automatically includes the e-bolt-icon class on the SVG. The function accepts a JSON object as an argument. It supports the same props as the Icon element, for example: chevronDown({ size: 'xsmall', class: 'u-bolt-margin-right-xsmall' }).

If you are using a web component, wrap the icon in unsafeHTML() as follows: ${unsafeHTML(iconChevronDown())}.

Important Notes:

A real-world example can currently be found in AccordionItemTrigger.js, shown in an altered demo below.

import { html, unsafeHTML } from '@bolt/element';
import { iconChevronDown } from '@bolt/elements-icon/src/icons/js/chevron-down';

return html`
  
    ${unsafeHTML(iconChevronDown())}
  
`;