浜松のWEBシステム開発・スマートフォンアプリ開発・RTK-GNSS関連の開発はお任せください
株式会社シーポイントラボ
TEL:053-543-9889
営業時間:9:00~18:00(月〜金)
住所:静岡県浜松市中区富塚町1933-1 佐鳴湖パークタウンサウス2F

【React】ReactでSVGを表示するためにuseタグを使うときの注意点

まさに今回私が悩んだ…というか、方法が分からず検索したところです。
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:hrefxlinkHref に書き換える必要があるとのこと。
具体的には下記のとおりです。

<svg><use xlinkHref='[SVGファイル]'/></svg>

で、このように修正したところ、問題なく動作しました!

 

以上、ReactでSVGを表示するために use を使うときの注意点でした。
React って、意外とこういうちょっとした修正が多いので、うっかりミスがたまにおきます。
特に class を className にする必要があるとか…これを直し忘れてエラー!をまだまだやらかします。
気を付けなければいけませんね。

  • この記事いいね! (0)