SVGO Override Behavior

[jhoffmcd]

I was unable to get the config to keep the viewBox over the width / height attributes given an SVG that has both. See this CodePen:

https://codesandbox.io/s/gatsbysvgrsvgotest-e4i19

I would expect that this config would yield a check.svg SVG that only has viewBox:

svgoConfig: {
  removeDimensions: true,
  removeViewBox: false,
},

But you can see, it's the reverse and we only see the width / height retained on the svg element. Does this mean SVGO rule overrides may not be applied?

[coreyward]

I suspect this is upstream in SVGR (or SVGO, though that's somewhat less likely). This plugin really doesn't do much other than swap the webpack loader that Gatsby configures for SVGs. We pass all of the other options along to @svgr/webpack. If you find that there's something we can do to make this work, though, please let us know.

[tremby]

I had the same problem. I worked around it by using an SVGO configuration file rather than trying to set the configuration in the Gatsby configuration file.

The SVGR docs are pretty terrible but if you look under "SVGO" on this page https://www.smooth-code.com/open-source/svgr/docs/options/#svgo you'll see a link to "see SVGO options", which points here https://gist.github.com/pladaria/69321af86ce165c2c1fc1c718b098dd0

There's no actual documentation there, but I made a guess at its point... I'm not sure if this is an SVGR thing or SVGO thing, but making a file with that same name .svgo.yml in your project root does the trick. You can then remove the options for gatsby-plugin-svgr from your Gatsby config file.

My .svgo.yml is this:

multipass: true
plugins:
  - removeDimensions: true
  - removeViewBox: false

I have no idea whether this indicates a bug in SVGR or SVGO. Maybe one of them simply changed how configuration should be given.

[coreyward]

Nice! I’d accept a pull request documenting this approach (deprecating the options entirely). Seems better supported and results in fewer opportunities for things to be lost in translation. @zabute Would love your thoughts on this too.

…

On May 21, 2019, 6:53 PM -0500, Bart Nagel ***@***.***>, wrote: I had the same problem. I worked around it by using an SVGO configuration file rather than trying to set the configuration in the Gatsby configuration file. The SVGR docs are pretty terrible but if you look under "SVGO" on this page https://www.smooth-code.com/open-source/svgr/docs/options/#svgo you'll see a link to "see SVGO options", which points here https://gist.github.com/pladaria/69321af86ce165c2c1fc1c718b098dd0 I'm not sure if this is an SVGR thing or SVGO thing, but making a file with that same name .svgo.yml in your project root does the trick. You can then remove the options for gatsby-plugin-svgr from your Gatsby config file. My .svgo.yml is this: multipass: true plugins: - removeDimensions: true - removeViewBox: false I have no idea whether this indicates a bug in SVGR or SVGO. Maybe one of them simply changed how configuration should be given. — You are receiving this because you commented. Reply to this email directly, view it on GitHub, or mute the thread.

[jhoffmcd]

@tremby you are totally correct!

I've updated our project with the yml file and its working like a charm.

[zabute]

Thanks, @tremby for this much needed workaround.

@coreyward I certainly agree with encouraging using external configuration for now but I'm hesitant to officially break api parity with svgr without figuring out why this is happening and whether or not it can be fixed. Wouldn't you agree?

[coreyward]

@zabute Yeah, ideally we'd support configuration of SVGR as though Gatsby wasn't in the equation, but for the sake of letting folks get on with their work I think we ought to stop providing an example configuration if it isn't working.

I think if we want to keep the SVGR options long term we need someone that wants to use them to pitch in and figure out what's going on. I use the out-of-the-box defaults in projects I work on and don't have any spare hours to dive into what's happening here, unfortunately.

[zabute]

It appears svgo config keys have to be under svgoConfig.plugins. See #40

[ElijahWoelbing]

This worked for me

    {
      resolve: 'gatsby-plugin-svgr',
      options: {
        include: /images\/icons\/.*\.svg/,
        svgo: true,
        svgoConfig: {
          plugins: [
            {
              name: 'preset-default',
              params: {
                overrides: {
                  removeViewBox: false,
                },
              },
            },
          ],
        },
      }
    }