Herman 2.0.0

Herman Icons

Herman doesn’t use very many icons internally…

Icon Previews assets/svg/

macro icon()

Icons should be added to the html using our icon() utility macro in Nunjucks.

  • name :: {string}
    The string ID used to identify the icon desired.
  • alt=none :: {string | none}
    Alternate text for the icon will be visually hidden, but available to screen-readers.
  • size=none :: {string | none}
    Currently supported icon sizes include 'nav-icon' and 'footer-logo'.
  • class=none :: {string | none}
    Any classes that should be applied to the icon.

Example

njk
{% import 'utility.macros.njk' as utility %}
{{ utility.icon('menu', size='nav-icon') }}
html compiled
<svg data-icon="menu" data-icon-size="nav-icon">
  <use xlink:href="#icon-menu" />
</svg>

[data-icon]

scss
[data-icon] {
  @include square(1em);
  fill: currentColor;
}

Icons inherit the color of their surroundings, and default to a 1em square if no other dimensions are provided.

[data-icon-size='nav-icon']

scss
[data-icon-size='nav-icon'] {
  @include square('nav-icon');
}

Used for the menu-bar icon.

[data-icon-size='footer-logo']

scss
[data-icon-size='footer-logo'] {
  @include square('footer-logo');
}

Used for the footer Herman logo.