Icons

There’s more than one way to include icons into a project. BaseWeb supports the use of SVG icons systems in two ways: SVG Sprites and inline SVGs.

The SVG Sprites method requires you include an <svg>—containing all your icons wrapped in <symbol> elements—at the top of your document. They are then referenced in our document using the <use> element. Inline SVG is where you simply include an <svg> directly into your document.

<!DOCTYPE html>
<html lang="en">
  <head>
    ...
  </head>
  <body>
    {% include icons/svg-symbols.svg %}
    ...
  </body>
</html>
<!-- SVG sprite reference -->
<svg class="icon icon-circle" role="img" aria-hidden="true">
  <use xlink:href="#icon-circle"></use>
</svg>

<!-- Inline SVG icon -->
<svg class="icon icon-circle" viewBox="0 0 24 24" aria-hidden="true">
  <circle cx="12" cy="12" r="10"></circle>
</svg>

SVG Sprite

This is a circle icon

Inline SVG

This is a circle icon

Available Icons

Feather Icons are a simply beautiful open source icons set by Cole Bemis. They can be found in dist/icons of BaseWeb along with the svg-symbols.svg SVG sprite

Using Button Icons

If the classes-button-icon is set to true, then you’ll have available three button modifier classes for using icons within buttons as well as custom icon styles for the .small and .large buttom modifiers. Below are a few examples and how they can be used.

.button-icon

Used to display a button that has only an icon and no text.

<button class="button button-icon primary large">{% include icons/circle.svg %}</button>
<button class="button button-icon primary">{% include icons/circle.svg %}</button>
<button class="button button-icon primary small">{% include icons/circle.svg %}</button>

.button-icon-left

Used to display buttons with icons on the left of a buttons text.

<button class="button button-icon-left primary large">{% include icons/circle.svg %} Button</button>
<button class="button button-icon-left primary">{% include icons/circle.svg %} Button</button>
<button class="button button-icon-left primary small">{% include icons/circle.svg %} Button</button>

.button-icon-right

Used to display buttons with icons on the right of a buttons text.

<button class="button button-icon-right primary large">{% include icons/circle.svg %} Button</button>
<button class="button button-icon-right primary">{% include icons/circle.svg %} Button</button>
<button class="button button-icon-right primary small">{% include icons/circle.svg %} Button</button>

It’s important to note that the button icon modifiers require that the buttons element component be included and loaded before the icons component. This is because the $buttons map is used directly to set values specific to buttons.

Variable Map

Icon variables are encompassed within the $icons map and are used throughout all icon mixins to set default values.

$icons: (
  'output' : true,
  'output-buttons' : true,
  'class' : 'icon',
  'class-symbols' : 'svg-symbols',

  'display' : inline-block,
  'width' : 1em,
  'height' : 1em,
  'margin-top' : -0.3em,
  'margin-bottom' : -0.1em,
  'font-size' : px-to-rem(24px),
  'vertical-align' : null,

  'stroke' : currentColor,
  'stroke-width' : 2px,
  'stroke-linecap' : round,
  'stroke-linejoin' : round,
  'fill' : none,

  'buttons' : (
    'gap' : 0.25em,
    'margin-top-small' : null,
    'margin-top-large' : -0.2em,
    'font-size-small' : px-to-rem(18px),
    'font-size-large' : px-to-rem(30px),
    'indent-small' : -0.125em,
    'indent' : -0.25em,
    'indent-large' : -0.35em
  )
) !default;

hide-svg-symbols

Adds styles for hiding your SVG symbols file.

@include hide-svg-symbols();

Example Usage

.#{map-get($icons, 'class-symbols')} {
  @include hide-svg-symbols();
}

make-icon

Creates the base styles for an icon element.

@include make-icon( $options: () );
Variable Type Default
$options Map $icons

Example Usage

You’ll want to wrap the mixin with whatever icon class you’d like to use. The default class output uses the class variable in the icons map.

.#{map-get($icons, 'class')} {
  @include make-icon();
}

add-icon-button

Adds icon styles based on the context of a button. Possible context options are: 'base', 'solo', 'left' and 'right'

@include add-icon-button( $context: 'base', $options: () );
Variable Type Default
$context String 'base'
$options Map $icons

Example Usage

You’ll want to wrap the mixin with whatever icon class you’d like to use. The default class output uses the class variable in the icons map.

<button class="button button-demo-1">{% include icons/feather.svg %} Custom Button</button>
<button class="button button-demo-2">{% include icons/feather.svg %}</button>
.button-demo-1 {
  @include add-icon-button('left');
}
.button-demo-2 {
  @include add-icon-button('solo');
}