@svgr/webpackからViewBoxの削除設定を除去

ReactアプリケーションにSVGファイルを読み込むのにSVGRを使っているのですがちょっとハマったのでメモ。

SVGRとは

そもそもSVGRとはSVGファイルを最適化してJSXの変換してReactコンポーネントと利用できるようにするツールです。

SVGRを利用すると以下のようにReactコンポーネントのようにSVGを利用することができるようになります。

import X from '@/svgs/X.svg';
import Facebook from '@/svgs/Facebook.svg';

export default function SnsButton() {
  return (
    <ul>
      <li>
        <X role="img" aria-label="X（旧Twitter）" />
      </li>
      <li>
        <Facebook role="img" aria-label="Facebook" />
      </li>
    </ul>
  );
}

Next.jsでSVGRの利用方法

Next.jsでSVGRを利用するには@svgr/webpackをインストールして

npm install --save-dev @svgr/webpack

next.config.mjsなどに以下の設定を加えるだけで利用可能です。

next.config.mjs

const nextConfig = {
  ...
  webpack(config) {
    config.module.rules.push({
      test: /\.svg$/,
      use: ['@svgr/webpack'],
    })
    return config
  },
}

https://react-svgr.com/docs/next/

ViewBoxが消えてしまう問題

基本問題なく利用できていたのですが一部のSVG画像が崩れていたので調査したところ読み込んだsvgファイルからViewBoxが消えて書き出されているのが原因でした。

SVGRはSVGOを通してSVGを最適化してから出力します。その過程でViewBoxが消えてしまったようです。

ViewBoxが消えないように修正

これはnext.config.mjsを以下のようにoptionsでdimensionsがfalseになるように修正することで対応できました。

next.config.mjs

const nextConfig = {
  ...
  webpack(config) {
    config.module.rules.push({
      test: /\.svg$/i,
      use: [{ loader: '@svgr/webpack', options: { dimensions: false } }],
    });
    return config
  },
}

https://react-svgr.com/docs/options/#dimensions

バージョン等の問題でissueなどでは結構いろいろな方法が提示されていたのですがほとんど動作しなかったので同じくハマった人は参考にしてください。