外部から読み込んだSVGアイコンの色をCSSで変更する方法

今までは、SVG アイコンを Hover 時に CSS で色を変更するため、インライン方式で埋め込んでいましたが、
外部から読み込んだ SVG ファイルでも CSS で色を変更する方法がありましたので、記事にしておこうと思います。

今までの方法(インライン方式)

index.html

<style>
.link {
  color: #fff;
}
.link:hover {
  color: #000;
}
</style>

<a href="#" class="link">
  <svg
    xmlns="http://www.w3.org/2000/svg"
    viewBox="0 0 512 512"
  >
    <path
      fill="currentColor"
      d="M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8z"
    ></path>
  </svg>
</a>

しかし、この方法、HTML が非常に汚くなる上に、SVG の使い回しができません。。。

今後使っていこうと思う方法(use 方式)

circle-icon.svg

  <svg xmlns="http://www.w3.org/2000/svg">
    <symbol viewBox="0 0 512 512" id="symbol">
      <path
        fill="currentColor"
        d="M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8z"
      ></path>
    </symbol>
  </svg>

外部から参照するオブジェクトに id を設定する必要があります。
※外部参照しやすいように、symbol タグでパスを囲って置くことをオススメします。

index.html

<style>
.link {
  color: #fff;
}
.link:hover {
  color: #000;
}
</style>

<a href="#" class="link">
  <svg viewBox="0 0 512 512">
    <use xlink:href="./path/to/circle-icon.svg#symbol" />
  </svg>
</a>

use タグの xlink:href 属性に、SVGアイコンのファイルパス#id属性をセットすることで、
外部の SVG ファイルを読み込みます。

なお、react の場合は、 xlink:href ではなく xlinkHref を利用します。

Icon.tsx

import React from 'react';
import circleIcon from './path/to/circle-icon.svg'

export default class Icon extends React.Component {
  render() {
    return (
      <svg>
        <use xlinkHref={`${circleIcon}#symbol`} />
      </svg>
    );
  }
}

参考

• <color> - CSS: カスケーディングスタイルシート | MDN
• use - SVG: Scalable Vector Graphics | MDN

以上です。