Icons

All the icons are minified and smushed into a sprite that is included at the top of each page. You can then use an icon with the <use> tag.

This allows us to both minimise loading time and still edit the SVG attributes.

<svg viewBox="0 0 250 156.493" class="icon__logo">
    <use xlink:href="/imgs/sprite/icon-sprite.svg#icon__logo"></use>
</svg>
<svg viewBox="0 0 100 100" class="icon icon__view">
    <use xlink:href="/imgs/sprite/icon-sprite.svg#icon__view"></use>
</svg>
<svg viewBox="0 0 100 100" class="icon icon__twitter">
    <use xlink:href="/imgs/sprite/icon-sprite.svg#icon__twitter"></use>
</svg>
<svg viewBox="0 0 100 100" class="icon icon__facebook">
    <use xlink:href="/imgs/sprite/icon-sprite.svg#icon__facebook"></use>
</svg>
<svg viewBox="0 0 100 100" class="icon icon__menu">
    <use xlink:href="/imgs/sprite/icon-sprite.svg#icon__menu"></use>
</svg>
<svg viewBox="0 0 100 100" class="icon icon__home">
    <use xlink:href="/imgs/sprite/icon-sprite.svg#icon__home"></use>
</svg>