Pass options to the builtin svgo from svgr/webpack

Question

Is there an option to pass in svgo options to the svgr/webpack loader ? I want to remove the width & height attributes and keep the viewbox, by default it removes those.

{
    test: /\.svg$/,
    use: ['@svgr/webpack'],
    options : {
    svgo: { // Something like this ?
        mergePaths: false,
        removeViewbox: false,
        removeAttrs: true,
    }}

},

Answer 1

I could not find a way of passing arguments through svgr to svgo so I switched to react-svg-loader which has documentation on how to achieve that :

{
    test: /\.svg$/,
    use: [
        'babel-loader',
        {
            loader: 'react-svg-loader',
            options: {
                svgo: {
                    plugins: [{ removeDimensions: true, removeViewBox: false }],
                    floatPrecision: 2,
                },
            },
        },
    ],
},

Answer 2

It has a little confusing syntax with nested parameters. Here is what I'm using to disable prefixing ids and classnames. I suppose, in your case it will be something like mergePaths.active = false, removeViewbox.active = false.

loader: '@svgr/webpack',
    options: {
        svgoConfig: {
            plugins: [{
                prefixIds: {
                    prefixIds: false,
                    prefixClassNames: false
                }
            }]
     }
}

I did not test, but I suppose it would look like this (or similar, you might play with it a bit to get the syntax right):

loader: '@svgr/webpack',
    options: {
        svgoConfig: {
            plugins: [{
                removePaths: {
                    active: false,
                }
            },{
                removeViewbox: {
                    active: false,
                }
            },{
                removeAttrs: {
                    active: true,
                }
            }]
     }
}

Look into the code here, where you can figure out what props are actually being exported: https://github.com/svg/svgo

Answer 3

It works as described here or here:

{
  test: /\.svg$/,
  use: [{
    loader: '@svgr/webpack',
    options: { 
      svgoConfig: {
        plugins: [
          { mergePaths: false },
          { removeViewbox: false },
          { removeAttrs: true },
        ],
      },
    },
  }],
}

Answer 4

In my case I got errors that:

1. plugins should be an array;
2. Each plugin object requires a name property

So here is what worked for me:

use: {
 loader: '@svgr/webpack',
 options: {
  svgoConfig: {
   plugins: [
    {
      name: 'removeViewBox',
      active: false
    }
   ]
  }
 }
}

Answer 5

I've ran into this today, @dimitar-spassov's answer seemed promising, however something might have changed since, because the viewBox was still removed.

The mentioned passing options to svgo is still correct, as mentioned here.

I found the proper configuration for svgo here.

All in all, what worked for me looks like this:

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

Answer 6

Just add configuration for svgo:

options: {
            svgoConfig: {
              plugins: {
                removeViewBox: false
              }
            }
          }

Answer 7

This option can help too

  {
    test: /\.svg$/,
    use: [
      {
        loader: '@svgr/webpack',
        options: {
          icon: true
        },
      }
    ],

Answer 8

If you are using Next.js, please follow these steps to configure SVG optimization:

1. In the root directory of your Next.js project, create a file called svgo.config.js with following content.

   // svgo.config.js
   module.exports = {
     plugins: [
       {
         name: 'preset-default',
         params: {
           overrides: {
             removeViewBox: false,
             // Customize default plugin options here if needed
           },
         },
       },
     ],
   };
   

2. Open your terminal and run the development server for your Next.js project using the following command:

   npm run dev
   

3. While your development server is running, visit your application in a web browser, and any SVG images should now have their viewBox attribute preserved.

4. If this solution helped you, consider upvoting to help the Next.js Users.

Answer 9

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

the answer is as

{
  loader: "@svgr/webpack",
  options: {
    dimensions: false
  }
},