Timemo

とある高専生のメモ置き場

【React】SVGを表示する方法を使い分けよう

どうも。へんじにゃ@hengin_blogです。

最近なかなかブログにまとめていなかったのでちょくちょく執筆を再開しようと思っています

というか記事にまとめないと1回ググったやつを再びググるという愚行を繰り返すのでね(笑)

今回は「ReactでSVGを読み込む方法を使い分けよう!」という表題ですが、なぜ使い分ける必要があるのかを解説します

なぜ分ける必要があるのか

結論から申し上げますと

  • SVGを編集して表示したいとき
  • そのままのSVGを表示したいとき

がそれぞれあるからです

「編集したいときっていつやねん」と思われるかもしれませんが、SVGアニメーションを実装したいときに使います

ただSVGアニメーションを実装するならもっといい方法があると思うので、方法をご存じの方はコメントで教えて頂ければ幸いです

表示方法

表示方法を今回は以下の2つ紹介します

  1. コンポーネントとして扱う

  2. imgタグで画像として扱う

それぞれ順に説明していきます

コンポーネントとして扱う

一つ目の方法はReactのコンポーネントとして扱う方法です

create-react-app.dev

SVGコンポーネントとして扱うには以下のように記述します

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} />
    </>
  )
}

最後まで閲覧頂きありがとうございました😂😂

参考になったら読者登録よろしくお願いいたします!!
読者登録返しします!!