まさに今回私が悩んだ…というか、方法が分からず検索したところです。
React を使ってサービスを開発しているのですが、デザインを入れ込んだところ、SVG を描写しているuseタグでエラーが発生しました。
追加しようとしたコードはこちら。
<svg><use xlink:href="[SVGファイル]"/></svg>
HTMLページでは問題なく動作しますが、use タグの xlink:href が React ではエラーになるようでした。
で、調べたところ、こちらの記事がヒットしました。
React で SVG を描画するための use タグでは xlinkHref を使う – valid,invalid
https://ohbarye.hatenablog.jp/entry/2018/03/27/212304
まさに私の知りたかったことが書いてありました！
React で useタグを用いる場合は、xlink:href を xlinkHref に書き換える必要があるとのこと。
具体的には下記のとおりです。
<svg><use xlinkHref='[SVGファイル]'/></svg>
で、このように修正したところ、問題なく動作しました！
以上、ReactでSVGを表示するために use を使うときの注意点でした。
React って、意外とこういうちょっとした修正が多いので、うっかりミスがたまにおきます。
特に class を className にする必要があるとか…これを直し忘れてエラー！をまだまだやらかします。
気を付けなければいけませんね。
