Svgr: Is there a way to pass custom config/plugins to svgo?

[marcofugaro]

Judging from the readme, you can only enable/disable svgo and some of its plugin, but I wanted to use some other svgo plugins.

Does the svgo parameter in node work also as a config object? It's not clear in the readme.

The svgo plugins I wanted to use are removeStyleElement, convertColors: { currentColor: true }, or the inlineStyles plugin.

[gregberge]

@marcofugaro it is only possible using rawConvert function, this code should help you: https://github.com/smooth-code/svgr/blob/master/src/index.js#L35

[marcofugaro]

how do you use the rawConvert function?

[gregberge]

You can deduce how to do it in the same script : https://github.com/smooth-code/svgr/blob/master/src/index.js#L52

[marcofugaro]

so a thing like this will work?

{
  loader: 'svgr/webpack',
  options: {
    svgo: {
      pretty: true,
      multipass: true,
      plugins: [
        { sortAttrs: true },
        { removeDimensions: true },
        { removeStyleElement: true },
        { convertColors: { currentColor: true } },
        { removeAttrs: { attrs: '(xmlns.*)' } },
      ],
    },
    semi: false,
    singleQuote: true,
    trailingComma: 'es5',
    icon: true,
  },
},

[marcofugaro]

You should be more explicit in the readme

[gregberge]

@marcofugaro If you are using svgr/webpack you cannot use rawConvert. So for now, no solution for your problem. But configuring SVGO sound interesting. It is actually a feature to develop 👍.

[marcofugaro]

thank you!

[wtgtybhertgeghgtwtg]

Why not move to a plugin architecture? There could be a package for whatever transformation the user wants (babel, prettier, svgo) and they can configure them there.

[gregberge]

@wtgtybhertgeghgtwtg yes it is an idea!

[coreyward]

What about a way to straight up disable SVGO? There's a bug causing viewBox to be removed in cases where it's unsafe.

[gregberge]

You can already disable svgo using svgo option.

[coreyward]

I tried that but it didn't have an effect, but I'm also using gatsby-plugin-svgr because I'm using Gatsby and it doesn't really give you another way to use webpack. So effectively I passed svgo: false in the options to gatsby-plugin-svgr and assume it came through.

[ryall]

This is a pretty critical feature IMO. I also tried chaining the SVGO loader in Webpack and it didn't work.

Is there a reason this is difficult to implement? Surely it should just be passing a configurable object to rawConvert merged with the generated options object.

[ryall]

I have added a pull request with the config option name svgoConfig to allow specifying custom SVGO options. If equivalent SVGR config options are specified, they will always take priority over the option defined in svgoConfig.

[lifeiscontent]

@neoziro what do you think about pulling out all configs and just using the ones in the projects root? E.g. if there's a prettier config, svgo config, etc, use it.

[gregberge]

@lifeiscontent yes I think it is a good move, but have to support both

[gregberge]

Follow up in #94 and #85.

[bobysf12]

When will this changes released? @neoziro

[gregberge]

@bobysf12 I don't have a release date, sorry.

[gregberge]

v2 is published 🎉

[marcofugaro]

🎉

So does this work with v2 @neoziro?

{
  loader: 'svgr/webpack',
  options: {
    svgo: {
      pretty: true,
      multipass: true,
      plugins: [
        { sortAttrs: true },
        { removeDimensions: true },
        { removeStyleElement: true },
        { convertColors: { currentColor: true } },
        { removeAttrs: { attrs: '(xmlns.*)' } },
      ],
    },
  },
},

[gregberge]

Replace svgo by svgoConfig and it should work!

[marcofugaro]

Thank you! You're the man!

[marcofugaro]

Good job with v2, the new api and options look dope as hell!

I used the svgoConfig option to create a shared config between every project to import svg icons, à la create-react-app. Here are my options, might be useful to someone:

{
  loader: '@svgr/webpack',
  options: {
    svgAttributes: {
      fill: 'currentColor',
    },
    svgoConfig: {
      multipass: true,
      pretty: process.env.NODE_ENV === 'development',
      indent: 2,
      plugins: [
        { sortAttrs: true },
        { removeViewBox: false },
        { removeDimensions: true },
        { convertColors: { currentColor: true } },
      ],
    },
  },
},