Fix merging svgo config

[tardiva]

Summary

The only optimization we need in our project is prefixing ids. But when we tried to use the configuration below, we faced the problem - prefixes were added unexpectedly to the class names.

Use https://react-svgr.com/playground for reproducing the issue:

• use simple svg example:

<svg height="100" width="100">
  <circle id="test" class="test" cx="50" cy="50" r="40" fill="red"/>
</svg>

• add svgo config:

{ 
"full": true,
"plugins": [{ "prefixIds": {"prefixIds": true, "prefixClassNames": false} }]
}

• check the output and note that both id and class have prefixes

This PR fixes the issue and allows to configure prefixIds plugin in more flexible way.

Test plan

New test case was added for plugin-svgo

[vercel]

This pull request is being automatically deployed with ZEIT Now (learn more).
To see the status of your deployment, click below or on the icon next to each commit.

🔍 Inspect: https://zeit.co/gregberge/svgr/5az8wdkxu
✅ Preview: https://svgr-git-fork-tardiva-fix-prefix-ids.gregberge.now.sh

[codecov]

Codecov Report

Merging #384 into master will increase coverage by 0.37%.
The diff coverage is 100%.

@@            Coverage Diff             @@
##           master     #384      +/-   ##
==========================================
+ Coverage   85.14%   85.52%   +0.37%     
==========================================
  Files          30       30              
  Lines         505      518      +13     
  Branches      140      142       +2     
==========================================
+ Hits          430      443      +13     
  Misses         62       62              
  Partials       13       13

Impacted Files	Coverage Δ
packages/plugin-svgo/src/index.js	72.88% <100%> (+7.66%)	⬆️

---

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update 6d2eab6...ef885a8. Read the comment docs.

[gregberge]

Looks good to me!

[doctyper]

FYI this is a breaking change if you have an existing custom Webpack configuration. I had to update my config to fix it:

  use: [
    {
      loader: require.resolve('@svgr/webpack'),
      options: {
        svgoConfig: {
-          plugins: { removeViewBox: false },
+          plugins: [{ removeViewBox: false }],
        },
      },
    },
  ],

[gregberge]

Yeah but your configuration was not correct IMO, plugins should always be an array.

[samuelmeuli]

Had the same issue.

I also used this the config for the removeViewBox option. When I introduced the dependency, I probably found out about the option because of #142 or #18. The answer in both issues uses an object for plugins, not an array. These answers both have a significant number of upvotes, so I'm expecting things to break silently for quite a few users who copied these configurations.

IMO, it would be a good idea to at least throw an error if an incorrect config is found. I can work on a PR if you'd like :)

[doctyper]

Yes some clear documentation on Webpack configuration would be helpful.