<Icon />

Icon works with SVG symbol sprites for creating consistent iconography using theme values.

Usage

Componentry is a "Bring Your Own Icons" system, and there are two ways to include your icons.

SVG Symbol Sprite

If your SVGs are loaded on the page as SVG symbols you can pass the symbol ID to Icon and it will be used for the SVG's href:

// With an SVG symbol definition <svg xmlns="http://www.w3.org/2000/svg" style="position: 'absolute'; width: 0; height: 0"> <symbol id="code" viewBox="0 0 24 24"> <polyline points="16 18 22 12 16 6"></polyline> <polyline points="8 6 2 12 8 18"></polyline> </symbol> </svg> // You can use Icon with the symbol id: <Icon id="code" /> // Icon will render a use element: <svg className="C9Y-Icon-base C9Y-Icon-font icon-code" role="img" aria-label="code"> <use href="#code" /> </svg>

SVG elements

If your SVGs are defined inline or imported with a tool like SVGR you can use configureIconElementsMap to create a mapping of IDs to the correct SVG elements:

// With SVG elements const CodeIcon = ( <svg viewBox="0 0 24 24"> <polyline points="16 18 22 12 16 6"></polyline> <polyline points="8 6 2 12 8 18"></polyline> </svg> ) // Use configureIconElementsMap to setup the Icon id to element mapping: configureIconElementsMap({ code: CodeIcon }) // You can then use Icon with the mapped id: <Icon id="code" />

Alignment

Icons are vertically centered in their containers by default. In flex layouts this is accomplished with self-align: center, and outside flex layouts this is accomplished with vertical-align: -0.15em.

Note that the negative vertical alignment may need to be adjusted depending on your icons and font family.

Props

Name
Description
externalURI

External path to symbol sprite

string
id

ID for the `iconElementsMap` or href attribute for symbol sprites

string
variant

Display variant

"font"

Styling

Icon styles

Class
Description
.C9Y-Icon-base
Base class applied to all variants for shared structural styles
.C9Y-Icon-font
Variant class applied when `variant="font"`