Icon

Place vector icons anywhere using our SVG sprite generator.

Usage

Drop icon svgs in the 'icon' folder in 'src' and they are automatically added to the sprite, the icon's location is indexed with a reference that matches its filename.

<span class="o-icon o-icon--navicon">
  <svg viewBox="0 0 1 1">
    <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="https://jaywing.github.io/atomic-framework/images/icons.svg#navicon"></use>
  </svg>
</span>

Macro

Macro

icon

Import

{% from 'macros/icon.njk' import Icon %}

Parameters

id (string) - corresponds to the filename of icon svg

classes (string) - any extran classes to be put on icon container span

viewbox (string: '0 0 1 1') - Viewbox preserves the aspect ratio of the sprite so that only the required sprite is shown

{{ icon('[icon_ref]', 'o-icon--lg') }}

Size modifiers

.o-icon--sm

.o-icon

.o-icon--lg

.o-icon--xl

.o-icon--xxl

{{ icon('eye', 'o-icon--sm' }}
{{ icon('eye') }}
{{ icon('eye', 'o-icon--lg' }}
{{ icon('eye', 'o-icon--xl' }}
{{ icon('eye', 'o-icon--xxl }}

Spin modifier

.o-icon--spin

{{ icon('spinner-3', 'o-icon--spin o-icon--lg' }}