Icon

The Icon category in the @itwin/core-react package includes components that render icons when given an icon name or SVG source or path.

The Icon React component displays an icon based on an IconSpec. An IconSpec can be a string, ReactNode or ConditionalStringValue. When the IconSpec is a string, the value is either a Webfont symbol name or a formatted string that specifies an imported SVG. When using an SVG, we use the web component svg-loader to load the SVG from its path. This web component is defined in UiCore.initialize() as follows:

    if (window.customElements.get("svg-loader") === undefined)
      window.customElements.define("svg-loader", IconWebComponent);

If your app does not initialize UiFramework or UiCore, you'll need to define this custom element to use the svg-loader.

The Icon will automatically use the svg-loader in IconWebComponent, assuming the customElement has been defined.

The formatted svg icon string begins with "webSvg:". The IconSpecUtilities.createWebComponentIconSpec can be used to format the SVG string. See example usage below.

The sprite SVG loader has been deprecated. The SvgSprite React component has been deprecated.

Examples

We will demonstrate four different ways to display an icon.

Icon and Webfont name

<Icon iconSpec="icon-placeholder" />

Icon and SVG from @bentley/icons-generic

This example shows how to use an SVG from @bentley/icons-generic.

import { IconSpecUtilities } from "@itwin/appui-abstract";
import { Icon } from "@itwin/core-react";

import placeholderSvg from "@bentley/icons-generic/icons/placeholder.svg";
. . .
const iconSpec = IconSpecUtilities.createWebComponentIconSpec(placeholderSvg);
. . .
<Icon iconSpec={iconSpec} />

Icon and SVG File

This example shows how to use an SVG from within the application.

import rotateSvg from "../icons/rotate.svg";
. . .
const iconSpec = IconSpecUtilities.createWebComponentIconSpec(rotateSvg);
. . .
<Icon iconSpec={iconSpec} />

SvgPath

When you have SVG path statements instead of SVG files, the SvgPath component can be used.

import { SvgPath } from "@itwin/core-react";
. . .
      <SvgPath viewBoxWidth={91} viewBoxHeight={91} paths={[
        "M86.734,49.492c-4.305,0.01-17.991,1.527-20.508,1.943c-1.589,0.261-3.454,0.267-4.732,1.335   c-1.173,0.98-0.649,2.788,0.453,3.52c1.182,0.78,17.18,0.641,19.686,0.645c-0.216,0.404-4.764,8.202-7.226,11.423   c-4.994,6.53-12.322,11.926-20.213,14.39c-9.906,3.093-21.47,0.982-30.055-4.716c-4.252-2.82-7.595-6.813-10.364-11.047   c-2.37-3.625-4.53-8.918-8.038-11.526c-0.238-0.18-0.687-0.002-0.732,0.298c-0.548,3.663,1.414,7.707,2.843,10.992   c1.7,3.904,4.146,7.539,6.933,10.755c5.891,6.799,14.97,10.758,23.738,12.057c15.313,2.272,30.362-4.708,39.961-16.643   c2.182-2.715,4.058-5.652,5.88-8.618c-0.04,4.63-0.08,9.262-0.109,13.891c-0.026,4.004,6.195,4.008,6.222,0   c0.054-8.303,0.122-16.604,0.122-24.907C90.594,51.061,87.978,49.49,86.734,49.492z",
        "M17.98,20.688c5.096-5.933,12.107-11.209,19.818-13.11c10.523-2.591,23.726,1.216,31.448,8.788   c3.523,3.45,6.227,7.538,8.734,11.751c2.084,3.496,4.084,8.505,7.364,11.009c0.244,0.187,0.678-0.004,0.731-0.296   c0.637-3.572-1.238-7.563-2.511-10.82c-1.516-3.889-3.713-7.637-6.163-11.013C72.166,9.786,64.534,5.113,56.037,2.605   C39.996-2.125,24.416,4.048,13.693,16.4c-2.328,2.684-4.36,5.616-6.345,8.567c0.256-3.586,0.517-7.172,0.765-10.759   c0.278-3.995-5.944-3.977-6.221,0c-0.492,7.064-1.519,21.896-1.484,22.229c0.013,0.612-0.002,3.301,2.793,3.301   c3.233,0.002,10.855-0.29,14.028-0.466c2.881-0.16,5.805-0.179,8.675-0.475c1.158-0.121,3.727-0.079,3.836-1.451   c0.175-2.197-3.893-3.01-4.988-3.118c-3.061-0.304-13.198-1.281-15.208-1.447c0.288-0.488,0.571-0.964,0.853-1.389   C12.798,27.753,15.135,24.001,17.98,20.688z",
      ]} />

SVG Support Setup

A few entries are required in the package,.json and tsconfig.json to support SVG files.

In package.json file make sure svg assets are copied along with other assets. An example entry is shown below.

    "copy:assets": "cpx \"./src/**/*.{*css,json,svg}\" \"./lib\" && cpx \"./src/public/**/*\" ./lib/public/",

API Reference

Last Updated: 20 June, 2023