どうも。へんじにゃ@hengin_blogです。
最近なかなかブログにまとめていなかったのでちょくちょく執筆を再開しようと思っています
というか記事にまとめないと1回ググったやつを再びググるという愚行を繰り返すのでね(笑)
今回は「ReactでSVGを読み込む方法を使い分けよう!」という表題ですが、なぜ使い分ける必要があるのかを解説します
なぜ分ける必要があるのか
結論から申し上げますと
がそれぞれあるからです
「編集したいときっていつやねん」と思われるかもしれませんが、SVGアニメーションを実装したいときに使います
ただSVGアニメーションを実装するならもっといい方法があると思うので、方法をご存じの方はコメントで教えて頂ければ幸いです
表示方法
表示方法を今回は以下の2つ紹介します
コンポーネントとして扱う
imgタグで画像として扱う
それぞれ順に説明していきます
コンポーネントとして扱う
一つ目の方法はReactのコンポーネントとして扱う方法です
import { ReactComponent as TopLogo } from './media/example.svg' export default function App() { return ( <> <TopLogo height={350} width={200} /> </> ) }
imgタグで画像として扱う
2つ目の方法はそのまま画像として扱うことです
src
部分をインポートすることでimg
で扱うことが可能となります
表示するだけであればこちらの方法でいいでしょう
import { ReactComponent as TopLogo } from './media/example.svg' export default function App() { return ( <> <img src={TopLogo} height={350} width={200} /> </> ) }
最後まで閲覧頂きありがとうございました😂😂
参考になったら読者登録よろしくお願いいたします!!
読者登録返しします!!