These icons are used throughout the site.

Usage:

Import the icons macro.

Call the .get() function passing it the icon name.

(Optional) The second argument is any classes you would like to apply to the svg element.

(Optional) The icons used in the header and footer use a sprite. This keeps us from repeating svg markup on the page. If you'd like to bypass the sprite and embed the svg directly, pass in a flag of TRUE as the third argument. Note: only the icons used in the header and footer currently use a sprite. All others are embedded directly.

Example normal usage:

{% import '@h4h_theme/icons/icons.twig' as icons %}
{{ icons.get('heart', 'icon icon--heart') }}

This will render the svg inline with whatever class or classes are passed as the second argument.

<svg aria-hidden="true" role="img" class="icon icon--heart">...</svg>

Example normal usage with icon in sprite:

{% import '@h4h_theme/icons/icons.twig' as icons %}
{{ icons.get('heart', 'icon icon--facebook') }}

This will render the svg wrapper inline with a use statement to the sprite and whatever class or classes are passed as the second argument.

<svg aria-hidden="true" role="img" class="icon icon--facebook">
  <use xlink:href="#facebook-icon"></use>
</svg>

Example bypass sprite with direct embed:

{% import '@h4h_theme/icons/icons.twig' as icons %}
{{ icons.get('facebook', 'icon icon--facebook', true) }}

This will skip the sprite and render the svg inline with whatever class or classes are passed as the second argument.

<svg aria-hidden="true" role="img" class="icon icon--facebook">...</svg>

Styles:

While there are no styles included by default, a modifier can be added to give an icon some style.

• icon--green - Green icon.