Icons in use across the Noora design system.

Usage

The module exposes all icons in two ways:

1. As a function of the shape <.{icon_name} />
2. As an icon component that takes a name attribute.

<.mail />
<.icon name="mail" />

Animated transitions

<.icon> can animate between two icons when the data-state of an ancestor changes (e.g. a dropdown trigger opening). Pass active_name and a transition strategy:

<.icon id="switcher" name="selector" active_name="selector_2" transition="morph"
  watch="[data-part='trigger']" active_state="open" />

Strategies:

• "morph" — tween one filled path into the other. Raises at render time if either icon is not a filled path (see morphable?/1).
• "crossfade_rotate" — crossfade and rotate the two icons. Works for any pair.
• "auto" (default) — morph when both icons are compatible, otherwise crossfade.

Adding an icon

Icons are automatically read and generated from the icons folder. To add an icon, simply add a SVG file to the folder. File names are required to be alphanumeric. Hyphens in the file name are automatically substituted to underscores.