Next.jsでSVGを表示する方法について考える機会があったので、今回書いてみようと思った次第です。このブログサイトにも至る所にSVGを使っていますが全て今記事の表示方法で行なっています。

WebサイトにSVGを表示する手段は以下の通りです。

• HTMLの<img>で表示する
• CSSのbackground-imageプロパティで表示する
• SVG内のコードをHTMLに埋め込む

上の二つの手段で表示した場合は、SVG内のスタイルをHTMLもしくはCSSで変更できません。
一方、最後に書いた手段を使えばスタイルを変更することができ、外部ファイルへのHTTPリクエスト回数を減らせることからもSVGはインラインで埋め込むことをお勧めします。

ただし、Next.js(React)内にSVG内のコードを埋め込むためにSVG内のコードをJSXに対応させるために修正しないといけません。この作業って意外とめんどくさいんですよねw
そこで、今回はSVGファイルをReactコンポーネントとして直接importできるようにしました。

SVGファイルをReactコンポーネントとして直接importできるように準備する

まずは@svgr/webpackというものをインストールします。

$ npm install @svgr/webpack

次に、next.config.jsに以下を記述して下さい。

/** @type {import('next').NextConfig} */
const nextConfig = {
  webpack: (config) => {
    config.module.rules.push({
      test: /\.svg$/,
      use: [
        {
          loader: "@svgr/webpack",
        },
      ],
    });
    return config;
  },
};

module.exports = nextConfig;

以上の設定を行うことによって、SVGファイルをReactコンポーネントとしてimportできるようになります。

TypeScriptを使っている場合

先ほどのnext.config.jsに以下を追加して下さい。

/** @type {import('next').NextConfig} */
const nextConfig = {
  webpack: (config) => {
    config.module.rules.push({
      test: /\.svg$/,
      use: [
        {
          loader: "@svgr/webpack",
        },
      ],
    });
    return config;
  },
   // -----------------------追加---------------------------
  images: {
    disableStaticImages: true,
  },
   // ---------------------------------------------------------
};

module.exports = nextConfig;

disableStaticImages: trueを設定することで、Next.jsでデフォルトで定義されている画像の型定義設定を無効にできます。
無効にすることで、次に行うSVGの型定義を有効化できます。
任意の場所にindex.d.tsを作成して下さい。SVGの型定義を行います。

declare module '*.svg' {
  const content: React.FC<React.SVGProps<SVGElement>>;
  export default content;
}

実際にSVGをReactコンポーネントとして読み込む

上記の設定が完了したら、実際にSVGをコンポーネントとして呼び出します。

import Icon from "../public/icon/icon.svg";

const IconViewComponent = () => {
  return <Icon />
}

export default IconViewComponent;

いい感じに表示できていると思います。

https://www.npmjs.com/package/@svgr/webpack