Next.js @svgr/webpack 사용시 스타일로 svg 크기 조절 안되는 현상

Next.js @svgr/webpack 사용시 스타일로 svg 크기 조절 안되는 현상

@svgr/webpack 설치 후 svg 크기를 스타일로 조절하려고 했는데 안되는 증상이 있었다.

코드를 살펴보니 기존 svg 태그에서 viewBox 속성이 사라지는 것을 확인했다.

 

https://stackoverflow.com/questions/64376001/pass-options-to-the-builtin-svgo-from-svgr-webpack/70360615#70360615

Pass options to the builtin svgo from svgr/webpack

 

 

웹팩 설정을 아래와 같이 고치면 해결할 수 있다.

{
  test: /\.svg$/,
  use: [
    {
      loader: '@svgr/webpack',
      options: {
        svgoConfig: {
          plugins: [
            {
              name: 'preset-default',
              params: {
                overrides: {
                  removeViewBox: false
                },
              },
            },
          ]
        }
      }
    },
  ],
}