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,
    }}

},

score 20 · Answer 1 · answered Dec 15 '21 at 08:41

20

In my case I got errors that:

plugins should be an array;
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
    }
   ]
  }
 }
}

answered Dec 15 '21 at 08:41

Dimitar Spassov

2,535
2
7
17

How to pass options into plugin? – VityaSchel May 21 '22 at 15:25
Each property in the objects inside the `plugins` array is an option for the given plugin. In the snippet above `name` is the name of the plugin for `svgr` and `active` is an option. – Dimitar Spassov May 23 '22 at 05:33

score 3 · Answer 2 · edited Jul 12 '23 at 11:50

3

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

the answer is as

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

edited Jul 12 '23 at 11:50

szym

3,028
2
20
32

answered Nov 18 '21 at 07:18

cms

31
4

score 2 · Answer 3 · answered Apr 27 '23 at 12:43

2

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
                },
              },
            },
          ]
        }
      }
    },
  ],
}

answered Apr 27 '23 at 12:43

Gergely Hegedus

482
3
9

I upvoted it and an hour later noticed that this fixes one thing and breaks something else :( – szym Jul 12 '23 at 11:41
@szym what did it break? It might broke it for me too, I just haven't noticed? – Gergely Hegedus Jul 13 '23 at 12:27
I finally found the issue. I had id collisions and on some pages instead of couple different SVGs i saw the same one couple of times. I've added 'prefixIds' at the end of the plugins array and that fixed it for me. If you don't pass any configuration to svgo then prefixIds is active but once you add the above it stops working. Not sure why. – szym Jul 14 '23 at 09:11

score 1 · Answer 4 · answered Oct 16 '20 at 00:14

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

I just switched of svgr because there is no documentation whatsoever on how to pass arguments to svgo. `react-svg-loader` on the other hand has documentation and works the same way, so I would recommend people use that — Twiggeh, Oct 16 '20 at 14:05
I think the doco for the `svgr` is quite well, just need to play with it. You have to consider that it is free and open source and thus the author is doing it in his/her free time. I was looking at `react-svg-loader` too when making the decision, but `svgr` simply worked better for me. But it's true that I had to figure out a few things from the code as they were not described in detail in the doco. — Vočko, Oct 16 '20 at 21:20

score 0 · Accepted Answer · answered Oct 16 '20 at 14:08

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,
                },
            },
        },
    ],
},

score 0 · Answer 6 · answered Nov 22 '20 at 11:18

It works as described here or here:

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

Pass options to the builtin svgo from svgr/webpack

6 Answers6

Linked