css svgファイルを色変更して使いたい

基本

まず、svgファイルを色変更したいときはいくつか方法があるみたい

• 単純に色違いのsvgファイルを用意
• svgファイルの中でCSSなり諸々記載
• cssでmaskを使ってどうにかする

cssでmaskを使ってどうにかする

適当な要素にsvgをセット＋ゴニョゴニョする感じ・・・詳細はよく分からん

▼sass

@mixin remake-svg($svg_col,$svg_file,$svg_width,$svg_height) {
  display: inline-block;
  width: $svg_width;
  height: $svg_height;

  background-color: $svg_col;

  -webkit-mask-image: url($svg_file);
  mask-image: url($svg_file);
  -webkit-mask-size: $svg_width $svg_height;
  mask-size: $svg_width $svg_height;
}

.hoge {
  $rate: 1;
  $svg_w: 100px * $rate;
  $svg_h: 100px * $rate;
  @include remake-svg(#ff0000, 〇〇〇/〇〇.svg, $svg_w, $svg_h);
}

▼css

.hoge {
  display: inline-block;
  width: 100px;
  height: 100px;

  background-color: #ff0000;

  -webkit-mask-image: url("〇〇〇/〇〇.svg");
  mask-image: url("〇〇〇/〇〇.svg");
  -webkit-mask-size: 100px 100px;
  mask-size: 100px 100px;
}