svg library

_sub_svg-library.twig

{# Global svg icons 'use' method see: http://css-tricks.com/svg-sprites-use-better-icon-fonts/ also: http://ianfeather.co.uk/ten-reasons-we-switched-from-an-icon-font-to-svg/

<svg class="icon icon-folder">
        <use xlink:href="#icon-folder"></use>
    </svg>
#}

{% spaceless %}
<svg display="none" xmlns="http://www.w3.org/2000/svg">

    <symbol id="icon-instagram" viewBox="0 0 26 30"><path fill-rule="evenodd" d="M13 2c7.18 0 13 5.82 13 13s-5.82 13-13 13S0 22.18 0 15 5.82 2 13 2zm6.01 5.1H6.97c-.567 0-1.059.207-1.475.604-.396.416-.604.907-.604 1.475v12.04c0 .567.208 1.058.604 1.474.416.397.908.605 1.475.605h12.04c.567 0 1.059-.208 1.475-.605.396-.416.604-.907.604-1.474V9.179c0-.568-.208-1.059-.604-1.475a2.075 2.075 0 00-1.475-.605zM8.18 13.96a4.79 4.79 0 00-.207 1.38c0 1.343.49 2.495 1.473 3.46.984.944 2.175 1.417 3.554 1.417.926 0 1.758-.227 2.533-.662a4.965 4.965 0 001.833-1.758c.454-.756.68-1.568.68-2.457 0-.472-.075-.945-.207-1.38h1.418v6.824c0 .19-.057.34-.19.453a.613.613 0 01-.453.19H7.328c-.188 0-.34-.057-.453-.19-.132-.113-.19-.264-.19-.453V13.96H8.18zm4.82-1.946c.908 0 1.683.302 2.307.925.642.624.963 1.361.963 2.231 0 .87-.32 1.625-.963 2.23-.624.624-1.4.926-2.307.926-.888 0-1.663-.302-2.287-.925a2.965 2.965 0 01-.964-2.23c0-.87.321-1.608.964-2.232.624-.623 1.399-.925 2.287-.925zm5.539-3.12c.188 0 .358.077.51.209.132.151.208.32.208.529v1.739a.778.778 0 01-.208.53.767.767 0 01-.51.207h-1.834a.778.778 0 01-.53-.208.778.778 0 01-.207-.53V9.633c0-.208.076-.378.208-.53a.778.778 0 01.529-.207h1.834z" /></symbol>


</svg>
{% endspaceless %}

style.scss

svg.icon {
    display: inline-block;
    fill: CurrentColor;
    height: 1.2em;
    width: 1.2em;
    vertical-align: text-bottom;
}