mixin to convert a hex to a CSS filter

by Ivan Myhavko

HTML

<i class="icon icon-pacman"></i>
<i class="icon icon-pacman icon-green"></i>

SCSS

@mixin recolor($color: #000, $opacity: 1) {
    $r: red($color) / 255;
    $g: green($color) / 255;
    $b: blue($color) / 255;
    $a: $opacity;

    // grayscale fallback if SVG from data url is not supported
    $lightness: lightness($color);
    filter: saturate(0%) brightness(0%) invert($lightness) opacity($opacity);

    // color filter
    $svg-filter-id: "recolor";
    filter: url('data:image/svg+xml;utf8,\
    <svg xmlns="http://www.w3.org/2000/svg">\
      <filter id="#{$svg-filter-id}" color-interpolation-filters="sRGB">\
        <feColorMatrix type="matrix" values="\
          0 0 0 0 #{$r}\
          0 0 0 0 #{$g}\
          0 0 0 0 #{$b}\
          0 0 0 #{$a} 0\
        "/>\
      </filter>\
    </svg>\
    ##{$svg-filter-id}');
  }

  .icon {
    display: inline-block;
    width: 32px;
    height: 32px;
  }

  .icon-pacman {
    background-image:
      url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='32' height='32'><path d='M30.148 5.588c-2.934-3.42-7.288-5.588-12.148-5.588-8.837 0-16 7.163-16 16s7.163 16 16 16c4.86 0 9.213-2.167 12.148-5.588l-10.148-10.412 10.148-10.412zM22 3.769c1.232 0 2.231 0.999 2.231 2.231s-0.999 2.231-2.231 2.231-2.231-0.999-2.231-2.231c0-1.232 0.999-2.231 2.231-2.231z'></path></svg>");
  }

  .icon-green {
    @include recolor(#00fa86, 0.8);
  }