【CSS】mask-imageプロパティで簡単にSVGの色変えができた

hover時、ナビのカレント時など同じアイコンで色だけ変えたいときに、別の色にした別画像で書き出すのが面倒で悩み続けてきました。
useタグを使う方法もありましたが、何故かうまくできず、、、
そこで出会ったmask-imageがかなり優秀だったので備忘録です。

mask-imageの使い方

基本的にbackground-imageと同じように扱えます。
mask-imageにSVGのファイルパスを指定し、mask-position 、mask-repeat、mask-sizeをそれぞれ指定します。

SCSS

.nav-item {
  display: inline-block;
  width: 32px;
  height: 32px;
  // mask関連の指定
  mask-position: center center;
  mask-repeat: no-repeat;
  mask-size: contain;
  mask-image: url(../img/icon-home.svg);
  background: navy; // 背景色でSVGの色を指定
  &--green {
    background: green; // 背景色でSVGの色を指定
  }
  &:hover {
    background: red; // 背景色でSVGの色を指定
  }
}

HTML

<a class="nav-item"></a>
<a class="nav-item nav-item--green"></a>

::befoer ::after にももちろん使えるのでかなり便利です！！