SVG Sprites

_a-icon.scss

// Using em units allows you to
// change the size using font-size
// on the parent.

// Using fill and stroke currentColor
// allows you to set the color using color
// on the element.

.a-icon {
  display: inline-block;
  width: 1em;
  height: 1em;
  stroke-width: 0;
  stroke: currentColor;
  fill: currentColor;
}

.a-icon--logo-wrap {
  font-size: 10px;
}

.a-icon--logo {
  height: 25em;
  width: 25.6em;
  color: #161614;
}

a-icon.html

<!-- Dynamically call an icon using an include -->
<svg class='a-icon a-icon--{{ include.name }}'>
  <title>{{ include.title }}</title>
  <use xlink:href='#icon-{{ include.name }}'></use>
</svg>

a-logo.html

<!-- Include your icon wherever you want and voilà -->
<div class="a-icon--logo-wrap">
  {% include atoms/a-icon.html name='logo' title='My Logo' %}
</div>

l-base.html

<!-- Include your SVG sprite sheet after the opening body tag -->
{% include l-svgs.html %}

l-svgs.html

<!-- Define your SVG sprite sheet -->
<svg style="position: absolute; width: 0; height: 0;" width="0" height="0" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  <defs>
    <!-- Include as many symbol definitions as you want here -->
    {% include logo.svg.html %}
  </defs>
</svg>

logo.svg.html

<!-- Use a tool like icomoon to get your symbol definition -->
<symbol id="icon-logo" viewBox="0 0 33 32">
  <path d="M16.384 0c-9.048 0-16.384 7.335-16.384 16.384 0 7.239 4.695 13.38 11.204 15.547 0.819 0.152 1.119-0.355 1.119-0.788 0-0.391-0.015-1.681-0.022-3.050-4.558 0.991-5.52-1.933-5.52-1.933-0.745-1.894-1.819-2.397-1.819-2.397-1.487-1.017 0.112-0.996 0.112-0.996 1.645 0.116 2.512 1.688 2.512 1.688 1.461 2.505 3.833 1.781 4.768 1.362 0.147-1.059 0.572-1.782 1.040-2.191-3.639-0.414-7.465-1.819-7.465-8.097 0-1.789 0.64-3.25 1.688-4.398-0.17-0.413-0.731-2.079 0.159-4.336 0 0 1.376-0.44 4.507 1.679 1.307-0.363 2.709-0.545 4.101-0.551 1.392 0.006 2.795 0.188 4.104 0.551 3.127-2.12 4.501-1.679 4.501-1.679 0.892 2.257 0.331 3.923 0.161 4.336 1.051 1.147 1.686 2.609 1.686 4.398 0 6.293-3.833 7.678-7.481 8.084 0.588 0.508 1.111 1.506 1.111 3.034 0 2.192-0.019 3.957-0.019 4.496 0 0.436 0.295 0.947 1.125 0.786 6.506-2.169 11.195-8.308 11.195-15.545 0-9.049-7.336-16.384-16.384-16.384zM6.136 23.34c-0.036 0.081-0.164 0.106-0.281 0.050-0.119-0.053-0.186-0.164-0.147-0.246 0.035-0.084 0.164-0.107 0.282-0.051 0.119 0.053 0.187 0.166 0.146 0.247zM6.942 24.059c-0.078 0.072-0.231 0.039-0.335-0.076-0.107-0.114-0.127-0.267-0.048-0.34 0.081-0.072 0.229-0.039 0.336 0.076 0.107 0.116 0.128 0.267 0.046 0.34zM7.495 24.979c-0.1 0.070-0.265 0.004-0.366-0.141-0.1-0.146-0.1-0.32 0.002-0.39s0.263-0.007 0.366 0.138c0.1 0.148 0.1 0.323-0.002 0.394zM8.43 26.044c-0.090 0.099-0.281 0.072-0.421-0.063-0.143-0.132-0.183-0.32-0.093-0.419s0.283-0.071 0.424 0.063c0.142 0.132 0.186 0.321 0.090 0.419zM9.639 26.404c-0.040 0.128-0.224 0.187-0.409 0.132-0.185-0.056-0.307-0.206-0.269-0.336 0.039-0.129 0.224-0.19 0.411-0.132 0.185 0.056 0.307 0.205 0.268 0.336zM11.014 26.557c0.005 0.135-0.153 0.247-0.348 0.25-0.196 0.004-0.354-0.105-0.357-0.238 0-0.136 0.154-0.247 0.35-0.251 0.195-0.004 0.354 0.105 0.354 0.239zM12.365 26.505c0.023 0.132-0.112 0.267-0.306 0.303-0.19 0.035-0.366-0.047-0.39-0.177-0.024-0.135 0.114-0.27 0.304-0.305 0.194-0.034 0.367 0.046 0.392 0.18z"></path>
</symbol>