Icons

Use

An icon font is generated from all SVGs within the folder @atoms/icon/svg/. Simply add the icon--name class to any element to add an icon. For instance, if there is a search.svg within the svg folder, you can add a search icon like this: <i class="icon--search"></i> which will result in: .

A Sass mixin is also provided that gives greater flexibility. To add a search icon as a pseudo element to any element, simply @include icon(search);. Besides icon name, this mixin includes parameters for pseudo position, text-replacement, size, color, and block display. See @atoms/icon/scss/_icon-mixins.scss for more detail.

Considerations

• It is recommended that all SVGs be on the same size canvas (512px x 512px). All glyphs are scaled up to the size of the largest glyph otherwise.
• Adding new SVGs to the folder requires restarting the webpack dev server.
• Font icons inherit the color of their parent text.
• The generated font named iconfont will be base64 inlined into the output CSS.

Font Awesome

Font Awesome icons are also available for use inside patterns.

These can be easily added to inline elements (we recommend using span or i tags) with two classes: fa and fa-icon-name.

Font awesome icons can also be implemented in Sass, in just two lines: @include fa-icon(); content: $fa-icon-name;

See _icon.scss for an example of how the Sass approach works.

There are currently 675 icons available from Font Awesome, sky's the limit.