Next.jsでSVG画像をReact Componentとして描画する

@svgr/webpackを利用する。

npm install @svgr/webpack --save-dev

# or use yarn

yarn add @svgr/webpack --dev

next.config.js

module.exports = {
  webpack(config) {
    config.module.rules.push({
      test: /\.svg$/,
      issuer: {
        test: /\.(js|ts)x?$/,
      },
      use: ["@svgr/webpack"],
    });

    return config;
  },
};

github.com

react-svg-loaderを利用する

github.com

npm install react-svg-loader --save-dev

# or 

yarn add react-svg-loader --dev

next.config.js

const path = require("path");

module.exports = {
  webpack(config) {
    config.module.rules.push({
      test: /\.svg$/,
      include: [path.resolve(path.resolve(), "src/images")],
      use: ["react-svg-loader"],
    });

    return config;
  },
};

個人的には@svgr/webpackのほうがスマートに見えるのでそっちを利用する。お好みで。