【Next.js】svgファイルを利用する

Next.jsでsvgを利用したい

Next.jsのリポジトリにsvgを使用するexampleがあるのでそれを参考にする
github.com

babel-plugin-inline-react-svgのインストール

$ npm i -D babel-plugin-inline-react-svg

.babelrcに以下を追加する

{
  "presets": [ "next/babel" ],
  "plugins": [ "inline-react-svg" ]
}

import Cat from '../svgs/cat.svg'

export default function Home() {
  return (
    <div>
      <marquee>SVG Cat!</marquee>
      <Cat />
    </div>
  )
}

参考

How To Import SVGs into NextJS | Frontend Digest | Frontend Digest