Skip to main content

Icon component

Icon component in Storybook

Examples​

Check out the Usage section for details about how to design an icon properly, and the different configuration options we provide.

Basic Example​

You can use one of the pre-made icons. See the List of icons for the full range of options.

<Icon icon="<ICON-ID>" />

Custom Example​

You can extend the component to render a custom icon. In order to use it, it must first be added as a custom icon option.

Steps to add a custom icon​

  1. Create a folder to store your custom icons. We recommend using src/assets/icons.
  2. Add an SVG file to the folder, for example cust-helicopter.svg.
Note:
  • Use the cust- prefix for your custom icons.
  • The name of the file has to be the same as the id inside the SVG file.
  1. Add the path to the icons folder in your .env file:
Webpack 5​
JUTRO_APP_CLIENT_ICONS_PATH=./src/assets/icons
Webpack 4​
ICONS_PATH=./src/assets/icons
  1. Use the icon you created in the component:
{
  "id": "icon",
  "type": "element",
  "component": "Icon",
  "componentProps": {
    "size": "large",
    "icon": "cust-helicopter"
  }
}
<Icon icon="cust-helicopter" />