📌

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

1 min read

今までは、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>
    );
  }
}

参考

以上です。

GitHubで編集を提案

Discussion

ログインするとコメントできます