SVGファイルを外部読み込みして色を変える

<svg fill="currentColor">
  <use href="/img/foo.svg#id=bar" />
</svg>

svg {
  color: red;
}

ポイントは下記

• svgタグにfill="currentColor"またはfill: currentColorを設定する
• useタグのhref属性にidをつけ、svgファイル側のsvgタグにid属性を設定する
• useタグの代わりにimageタグを使っても画像を外部読み込みできるが、その場合色が変えられないので注意

参考:

tsuchippo.com