Mixin for colorizing svg and giving states.

_mixin-svgcolor.scss

// From:
// https://twitter.com/thisisroyal/status/624570142945579008
// http://jsfiddle.net/thisisroyal/mokv8hc2/
@mixin svgcolor($color: #000) {

  [fill]:not([fill="none"]) {
    fill: $color;
    transition: fill 150ms ease-in-out;
  }

  [stroke]:not([stroke="none"]) {
    stroke: $color;
    transition: stroke 150ms ease-in-out;
  }

}

example.scss

svg {
    @include svgcolor(#51ebca);
    
    &:hover {
      @include svgcolor(#2a7d6b);
    }
}