icon-mixins

Generate icons as pseudos (capable of inheriting currentColor) or backgrounds.

Two mixins are provided:

icon-pseudo - Generates an :after.
The height of the icon is automatically set by calculating its aspect ratio against the $width argument.
Its color will inherit its parent text's color -- this was achieved by using the icon as a mask-image. Change the background-color of the :after element to override this.

icon-bg - In cases where a pseudo can't be used, for example, as input backgrounds.
The background-size is automatically set by calculating its aspect ratio against the $width argument.
Since a mask is not possible in this instance, a color has to be provided. Any color value other than inherit or currentColor will work here, including hexes and SCSS variables.

How to use

1) Prep your SVG.
Unify all paths into a single combined shape. Flatten and simplify if possible. All you'll be needing is the path itself and a width and height to give it context.

2) Extract the width/height/path from your exported SVG.
Note: If it doesn't have width/height attributes you can find this in the viewBox (second-to-last value = width, last value = height)

Example:

<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 90 76.74">
  <path d="M5.84,47.74A10.51,10.51,0,0,0,11,49.1L3.27,61.46c0,.07-.09.15-.14.23a2.9,2.9,0,0,0-.31,1.13A2.77,2.77,0,0,0,3,64a2.64,2.64,0,0,0,.52.86,2.78,2.78,0,0,0,1.94,1,2.61,2.61,0,0,0,1.16-.18l.24-.1,1.61-.76,11.75-5.5.07,12.9,0,1.73a2.81,2.81,0,0,0,0,.29,2.72,2.72,0,0,0,.35,1.13,2.87,2.87,0,0,0,.74.86,2.71,2.71,0,0,0,.95.46,2.43,2.43,0,0,0,.75.11h.26a2.88,2.88,0,0,0,1.12-.35,2.8,2.8,0,0,0,.88-.77,1.88,1.88,0,0,0,.16-.23L45,44.24,64.47,75.38l.15.23a2.84,2.84,0,0,0,2,1.12h.25a2.5,2.5,0,0,0,.76-.11,2.71,2.71,0,0,0,1.7-1.34,2.77,2.77,0,0,0,.34-1.11,2.62,2.62,0,0,0,0-.28V72.16l.08-12.9,11.75,5.51,1.6.75.26.11a2.88,2.88,0,0,0,1.15.17,2.75,2.75,0,0,0,1.13-.32,2.65,2.65,0,0,0,.8-.62A2.77,2.77,0,0,0,87,64a2.73,2.73,0,0,0-.14-2.28,1,1,0,0,0-.13-.23L79,49.1a10.59,10.59,0,0,0,5.17-1.37,10.46,10.46,0,0,0,5.42-9.07L90,10.76h0a10.51,10.51,0,0,0-5.19-9.24,10.47,10.47,0,0,0-10.57-.15L55.35,11.9a16.21,16.21,0,0,0-20.57.1l-19-10.64a10.47,10.47,0,0,0-10.6.16A10.45,10.45,0,0,0,0,10.76l.41,27.9a10.49,10.49,0,0,0,5.43,9.08Zm20,16.47-.08-13.77-12.72,6,6.79-10.85,14.68-8.76a16.21,16.21,0,0,0,6.38,3.36ZM64.2,50.44l-.08,13.78-15-24a16.13,16.13,0,0,0,6.5-3.34l14.53,8.68L76.92,56.4ZM77,6.27a5,5,0,0,1,7.39,4.41L84,38.58a5,5,0,0,1-7.52,4.19L59.27,32.51c.17-.28.33-.58.48-.88v0c.19-.39.37-.79.52-1.19,0-.12.09-.23.13-.35.12-.32.23-.65.33-1,0-.1.06-.19.08-.29.12-.41.22-.84.3-1.26a2.89,2.89,0,0,0,0-.29c.06-.35.11-.69.15-1,0-.12,0-.24,0-.36,0-.44.07-.89.07-1.33s0-.93-.07-1.38c0-.13,0-.26,0-.39q-.06-.54-.15-1.08c0-.1,0-.2,0-.3-.09-.44-.19-.87-.31-1.3,0-.11-.08-.23-.11-.34-.1-.32-.21-.64-.33-.95-.05-.14-.1-.28-.16-.41a11.47,11.47,0,0,0-.51-1.13l-.15-.29-.39-.7ZM37.28,17.36l0,0a10.63,10.63,0,0,1,15.62-.06,10.62,10.62,0,0,1-7.78,17.83,10.66,10.66,0,0,1-8.08-3.7,10.45,10.45,0,0,1-2.59-6.91,10.34,10.34,0,0,1,2.81-7.14ZM8,6.35a4.9,4.9,0,0,1,5-.08L31,16.35a16.15,16.15,0,0,0-.13,16L13.54,42.76A5,5,0,0,1,6,38.58L5.62,10.67A4.89,4.89,0,0,1,8,6.35Z"/>
</svg>

The width is 90.
The height is 76.74.
The icon itself is the path's d attribute.

3) Use this to create a new variable in the $icons map

$icons: (
  bow: (
    width: 90,
    height: 76.74,
    path: 'M5.84,47.74A10.51,10.51,0,0,0,11,49.1L3.27,61.46c0,.07-.09.15-.14.23a2.9,2.9,0,0,0-.31,1.13A2.77,2.77,0,0,0,3,64a2.64,2.64,0,0,0,.52.86,2.78,2.78,0,0,0,1.94,1,2.61,2.61,0,0,0,1.16-.18l.24-.1,1.61-.76,11.75-5.5.07,12.9,0,1.73a2.81,2.81,0,0,0,0,.29,2.72,2.72,0,0,0,.35,1.13,2.87,2.87,0,0,0,.74.86,2.71,2.71,0,0,0,.95.46,2.43,2.43,0,0,0,.75.11h.26a2.88,2.88,0,0,0,1.12-.35,2.8,2.8,0,0,0,.88-.77,1.88,1.88,0,0,0,.16-.23L45,44.24,64.47,75.38l.15.23a2.84,2.84,0,0,0,2,1.12h.25a2.5,2.5,0,0,0,.76-.11,2.71,2.71,0,0,0,1.7-1.34,2.77,2.77,0,0,0,.34-1.11,2.62,2.62,0,0,0,0-.28V72.16l.08-12.9,11.75,5.51,1.6.75.26.11a2.88,2.88,0,0,0,1.15.17,2.75,2.75,0,0,0,1.13-.32,2.65,2.65,0,0,0,.8-.62A2.77,2.77,0,0,0,87,64a2.73,2.73,0,0,0-.14-2.28,1,1,0,0,0-.13-.23L79,49.1a10.59,10.59,0,0,0,5.17-1.37,10.46,10.46,0,0,0,5.42-9.07L90,10.76h0a10.51,10.51,0,0,0-5.19-9.24,10.47,10.47,0,0,0-10.57-.15L55.35,11.9a16.21,16.21,0,0,0-20.57.1l-19-10.64a10.47,10.47,0,0,0-10.6.16A10.45,10.45,0,0,0,0,10.76l.41,27.9a10.49,10.49,0,0,0,5.43,9.08Zm20,16.47-.08-13.77-12.72,6,6.79-10.85,14.68-8.76a16.21,16.21,0,0,0,6.38,3.36ZM64.2,50.44l-.08,13.78-15-24a16.13,16.13,0,0,0,6.5-3.34l14.53,8.68L76.92,56.4ZM77,6.27a5,5,0,0,1,7.39,4.41L84,38.58a5,5,0,0,1-7.52,4.19L59.27,32.51c.17-.28.33-.58.48-.88v0c.19-.39.37-.79.52-1.19,0-.12.09-.23.13-.35.12-.32.23-.65.33-1,0-.1.06-.19.08-.29.12-.41.22-.84.3-1.26a2.89,2.89,0,0,0,0-.29c.06-.35.11-.69.15-1,0-.12,0-.24,0-.36,0-.44.07-.89.07-1.33s0-.93-.07-1.38c0-.13,0-.26,0-.39q-.06-.54-.15-1.08c0-.1,0-.2,0-.3-.09-.44-.19-.87-.31-1.3,0-.11-.08-.23-.11-.34-.1-.32-.21-.64-.33-.95-.05-.14-.1-.28-.16-.41a11.47,11.47,0,0,0-.51-1.13l-.15-.29-.39-.7ZM37.28,17.36l0,0a10.63,10.63,0,0,1,15.62-.06,10.62,10.62,0,0,1-7.78,17.83,10.66,10.66,0,0,1-8.08-3.7,10.45,10.45,0,0,1-2.59-6.91,10.34,10.34,0,0,1,2.81-7.14ZM8,6.35a4.9,4.9,0,0,1,5-.08L31,16.35a16.15,16.15,0,0,0-.13,16L13.54,42.76A5,5,0,0,1,6,38.58L5.62,10.67A4.89,4.89,0,0,1,8,6.35Z'
  )
 )

4) Profit
@include iconPseudo(bow); OR @include iconBg(bow, pink);