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

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してつかう

import Logo from './logo.svg';

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

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

追記

Next.js + TypeScript + babel-plugin-inline-react-svg でうまくいかないときは、@svgr/webpackに乗り換えたらうまくいきました。

blog.kimizuka.org