みかづきブログ・カスタム

基本的にはちょちょいのほいです。

Next.jsでSVGをコンポーネントのように扱う ✌️

f:id:kimizuka:20210103011013j:plain

Nuxtでいうところの、nuxt-svg-loaderのようなパッケージを探していたのですが、公式のサンプルを参考に、babel-plugin-inline-react-svgを使うことにしました。

github.com
github.com

Next.jsの設定、TypeScriptの設定をメモしておきます。

パッケージのインストール

yarn add -D babel-plugin-inline-react-svg

or

npm install --save-dev babel-plugin-inline-react-svg


.babelrcの編集

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


index.d.tsの編集

declare module '*.svg'


コンポーネントでSVGをimportしてつかう

imoprt Logo from './logo.svg';

export default function Wrapper() {
  return (
    <div>
      <Logo />
    </div>
  );
}

このような流れで、SVGをコンポーネントのように扱えます。
imgタグやbackground-imageとして表示するのとは違い、pathのfillやstrokeなどをCSSから変更できるようになるので便利です。