✏️

【個人アプリ開発メモ】Reactでsvgファイルを使う方法

2021/11/21に公開約300字

例えばtest.svgを取得して以下のディレクトリに配置

src/assets/svg/test.svg

あとは利用したいコンポーネントでsvgをimport

import testImg from 'src/assets/svg/test.svg';

img要素に以下の様に渡せば完了

<img src={testImg} alt="Icon" />

ちなみにimg要素を利用するときはaltを必ずつけること。通信が上手くいかず画像が読み込まれないときは代わりにaltのフィールドが出力される。SEO的にも良いらしい。

以上。

Discussion

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