webpackとscss使ってsvgの色とか簡単に変える。

これ使います。
svg-transform-loader
npm https://www.npmjs.com/package/svg-transform-loader
github https://github.com/JetBrains/svg-mixer

htmlはとありあずこんなふうに。

<span class="icon"></span>

インストール

terminal

npm i -D svg-transform-loader

webpack.configでローダー登録

webpack.config.js

module.exports = {
  module: {
    rules: [
      {
        test: /\.svg(\?.*)?$/, // match img.svg and img.svg?param=value
        use: [
          'url-loader', // or file-loader or svg-url-loader
          'svg-transform-loader' //★登録
        ]
      }
    ]
  }
}

あとはscssでスタイル記述
下記は色を白くする

style.scss

background-image: url("../img/cart.svg?fill=#fff");

mixinであ～ら便利

//何も考えずコピペ
@mixin fill-background-image($url, $color) {
  $base-color: str-slice(inspect($color), 2);
  background-image: unquote('url("' + $url + "?fill=%23" + $base-color +'")');
}
 
// 好きな色指定 
$hex-color: #fff;
 
.icon {
  //使う
  @include fill-background-image('../img/cart.svg', $hex-color);
}