Keep viewBox when dimensions are removed

[adipascu]

Summary

I am using SVG's with their dimensions removed, but if the viewBox is the same as the dimensions, the viewbox is also removed by svgo. This is causing issues with my layouts.

I see that currently the viewBox is kept when the dimensions are altered with the icon option. My PR makes it such that the viewBox is kept if the dimensions option is set to false.

Test plan

The code is pretty simple to review (small changes) and I added an additional test case.

[vercel]

This pull request is automatically deployed with Now.
To access deployments, click Details below or on the icon next to each push.

[codecov]

Codecov Report

Merging #281 into master will increase coverage by 0.03%.
The diff coverage is 100%.

@@            Coverage Diff            @@
##           master    #281      +/-   ##
=========================================
+ Coverage   85.26%   85.3%   +0.03%     
=========================================
  Files          30      30              
  Lines         448     449       +1     
  Branches      125     125              
=========================================
+ Hits          382     383       +1     
  Misses         55      55              
  Partials       11      11

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

---

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 31cb597...55b8a10. Read the comment docs.

[gregberge]

Hello @adipascu, thanks for the fix. It makes sense.

[peter-mouland]

amazing - thanks for the release this was driving me mad last night!

[peter-mouland]

"@svgr/rollup": "4.2.0"

unfortunately, it hasn't work for me.

SVG:

<svg xmlns="http://www.w3.org/2000/svg" width="512" height="512" viewBox="0 0 512 512">
    <path d="M258.4 247.6c26.8 0 48.5-21.7 48.5-48.5s-22-48-49-48-48 21.4-48 48 21.5 48.7 48.3 48.7zm0-84.6c20 0 36 16 36 36s-16 36.2-36 36.2-36-16.2-36-36 16-36.2 36-36.2z"/>
</svg>

as you can see, that height, width + viewbox all match. I am trying to keep those attrs as they are.
this is my rollup svg config.

        svgr({
            svgo: true,
            svgoConfig: {
                plugins: [{ prefixIds: false, removeViewBox: false, removeDimensions: false }],
            },
        }),

this is my rollup output:

React.createElement("path", {
        d: "M258.4 247.6c26.8 0 48.5-21.7 48.5-48.5s-22-48-49-48-48 21.4-48 48 21.5 48.7 48.3 48.7zm0-84.6c20 0 36 16 36 36s-16 36.2-36 36.2-36-16.2-36-36 16-36.2 36-36.2z"
      });
      
      var SvgSvg = function SvgSvg(props) {
        return React.createElement("svg", _extends({
          width: 512,
          height: 512
        }, props), _ref);
      };
      

Is this the problem that you were trying to fix? or is this another issue?

[adipascu]

@peter-mouland , set dimensions:false in svgr. There is no need to change the svgo config.

If it still does not work you might need to run a more recent release of svgr (or the master branch).

[peter-mouland]

thanks for the advice - this seems to have worked. I think this'll be find for me (as all our icon components add default dimensions anyway).

is it worth adding to the docs that this option needs to be set to true if you want to keep veiewBox?