<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

TypeScript customization

You can use module augmentation to customize the TypeScript types for any of Icon's props:

declare module 'componentry/types/components/Icon/Icon' {
  interface IconPropsOverrides {
    // ... overwrite any types for Icon props ...
  }
}

See the TypeScript guide for more information.

StylingIcon styles