今までは、SVGアイコンをHover時にCSSで色を変更するため、インライン方式で埋め込んでいましたが、
外部から読み込んだSVGファイルでもCSSで色を変更する方法がありましたので、記事にしておこうと思います。
今までの方法(インライン方式)
index.html
<style>.link{color:#fff;}.link:hover{color:#000;}</style><ahref="#"class="link"><svgxmlns="http://www.w3.org/2000/svg"viewBox="0 0 512 512"><pathfill="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
<svgxmlns="http://www.w3.org/2000/svg"><symbolviewBox="0 0 512 512"id="symbol"><pathfill="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><ahref="#"class="link"><svgviewBox="0 0 512 512"><usexlink:href="./path/to/circle-icon.svg#symbol"/></svg></a>useタグの xlink:href属性に、SVGアイコンのファイルパス#id属性をセットすることで、
外部のSVGファイルを読み込みます。
なお、reactの場合は、 xlink:hrefではなく xlinkHrefを利用します。
Icon.tsx
importReactfrom'react';importcircleIconfrom'./path/to/circle-icon.svg'exportdefaultclassIconextendsReact.Component{render(){return(<svg><usexlinkHref={`${circleIcon}#symbol`}/></svg>);}}参考
以上です。