Specifying SVGO option breaks JSX transform

Per title if I specify the SVGO option

[
  "inline-react-svg",
  {
    "svgo": {
      "plugins": [
        "cleanupIDs"
      ]
    }
  }
]

It breaks on line 78 in src/index.js

      const parsedSvgAst = parse(escapeSvgSource.data, {
        sourceType: 'module',
        plugins: ['jsx'],
      });

Here is the SVG, before transform. Which is transformed successfully having no options set for the plugin, not using SVGO, but strips the viewBox attribute which is needed.

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 31.25 31.25" height="31.25" width="31.25"><path d="M18.093 28.997a.28.28 0 01-.202-.086l-1.179-1.17a1.53 1.53 0 00-1.087-.45c-.411 0-.797.16-1.087.45l-1.177 1.17a.29.29 0 01-.474-.088l-.674-1.517a1.546 1.546 0 00-2.03-.786l-1.52.666a.642.642 0 01-.074.004c-.208 0-.326-.099-.335-.255l-.08-1.66a1.54 1.54 0 00-1.54-1.467l-1.727.074a.297.297 0 01-.25-.12.286.286 0 01-.039-.263l.524-1.575a1.546 1.546 0 00-.971-1.95l-1.573-.53a.287.287 0 01-.187-.197.285.285 0 01.056-.266l1.057-1.28a1.546 1.546 0 00-.2-2.167L2.05 14.471a.287.287 0 01-.106-.252.288.288 0 01.15-.227l1.448-.811a1.546 1.546 0 00.596-2.093l-.805-1.453a.288.288 0 01-.007-.272.288.288 0 01.221-.158l1.644-.233a1.547 1.547 0 001.312-1.738L6.277 5.59a.293.293 0 01.287-.333l1.686.385a1.54 1.54 0 001.85-1.144l.383-1.617a.294.294 0 01.45-.173l1.372.935a1.54 1.54 0 002.139-.4l.94-1.367a.286.286 0 01.241-.127c.058 0 .165.016.24.127l.942 1.367a1.542 1.542 0 002.138.4l1.372-.935a.294.294 0 01.45.173l.383 1.616A1.538 1.538 0 0023 5.642l1.617-.376a.566.566 0 01.04-.002c.126 0 .197.037.248.095.039.046.083.122.068.23l-.225 1.645a1.547 1.547 0 001.31 1.738l1.645.233a.288.288 0 01.22.158.289.289 0 01-.005.273l-.806 1.45a1.548 1.548 0 00.597 2.095l1.448.81a.288.288 0 01.148.228.285.285 0 01-.104.252l-1.275 1.064a1.547 1.547 0 00-.201 2.166l1.06 1.28c.083.102.07.21.054.266a.286.286 0 01-.188.198l-1.57.53a1.546 1.546 0 00-.973 1.949l.524 1.575a.29.29 0 01-.276.384l-1.675-.074c-.891 0-1.566.644-1.605 1.465l-.08 1.66a.292.292 0 01-.292.278l-1.637-.692a1.544 1.544 0 00-2.03.786l-.674 1.517a.292.292 0 01-.27.174" fill="#fff"/><path d="M15.625 1.123a.91.91 0 00-.756.398l-.94 1.367a.917.917 0 01-1.273.238l-1.372-.935a.916.916 0 00-1.409.546l-.383 1.615a.92.92 0 01-1.1.682l-1.617-.377a.917.917 0 00-1.117 1.018l.226 1.644c.068.5-.281.963-.78 1.033l-1.645.234a.918.918 0 00-.673 1.352l.805 1.452a.92.92 0 01-.355 1.246l-1.448.81a.917.917 0 00-.139 1.505l1.275 1.063c.388.324.44.9.119 1.29l-1.058 1.278a.918.918 0 00.414 1.455l1.572.53c.48.162.737.68.577 1.16L4.025 23.3a.917.917 0 00.869 1.207l.041-.001 1.658-.073.042-.001c.487 0 .892.381.915.872l.08 1.66a.917.917 0 001.285.794l1.52-.667a.918.918 0 011.208.468l.673 1.517a.914.914 0 001.485.277l1.177-1.17a.913.913 0 011.294 0l1.177 1.17a.915.915 0 001.486-.277l.673-1.517a.917.917 0 011.207-.468l1.52.667a.917.917 0 001.284-.794l.081-1.66a.916.916 0 01.957-.871l1.658.073h.042a.917.917 0 00.869-1.206l-.524-1.575a.918.918 0 01.577-1.16l1.573-.53a.918.918 0 00.413-1.454l-1.058-1.278a.92.92 0 01.12-1.29l1.274-1.063a.917.917 0 00-.14-1.505l-1.447-.81a.92.92 0 01-.355-1.246l.805-1.452a.918.918 0 00-.673-1.352l-1.644-.234a.918.918 0 01-.78-1.033l.225-1.644a.917.917 0 00-1.117-1.018l-1.616.377a.92.92 0 01-1.101-.681l-.384-1.616a.917.917 0 00-1.408-.546l-1.372.935a.917.917 0 01-1.272-.238l-.941-1.367a.91.91 0 00-.756-.398zm0 1.505l.666.969a2.17 2.17 0 003.007.562l.972-.663.272 1.145a2.16 2.16 0 002.6 1.61l1.147-.267-.16 1.166a2.172 2.172 0 001.843 2.44l1.164.165-.57 1.03a2.172 2.172 0 00.836 2.941l1.027.574-.904.754a2.173 2.173 0 00-.281 3.046l.75.906-1.116.376a2.172 2.172 0 00-1.363 2.739l.373 1.115-1.177-.05-.068-.003h-.027a2.165 2.165 0 00-2.165 2.063l-.056 1.175-1.078-.474a2.168 2.168 0 00-2.851 1.105l-.478 1.075-.834-.83a2.15 2.15 0 00-1.529-.631 2.15 2.15 0 00-1.53.631l-.833.83-.478-1.075a2.167 2.167 0 00-2.85-1.105l-1.079.474-.056-1.175a2.165 2.165 0 00-2.164-2.063h-.069l-.028.002-1.175.052.372-1.116a2.172 2.172 0 00-1.364-2.739l-1.114-.376.75-.906a2.173 2.173 0 00-.283-3.046l-.903-.754 1.027-.574a2.172 2.172 0 00.836-2.942l-.57-1.029 1.164-.165a2.171 2.171 0 001.844-2.44l-.16-1.166 1.146.267a2.16 2.16 0 002.6-1.61l.272-1.145.972.663a2.17 2.17 0 003.007-.563l.666-.968" fill="#959595"/></svg>

For now as a workaround I’m using SVGR with the SVGO option, to keep viewBox attribute, as a loader for svgs in our application’s webpack configuration which works fine. While using this babel plugin for the mocha tests that use enzyme and load svgs. (That just test for the existence, not the visuals, of the svg)

I would like to go down to one library and one configuration for transforming svgs uniformly across the codebase, but ran into this issue.

[sveg-pl]

Hi @PaulSearcy, an update of the svgo package dependency inside babel-plugin-inline-react-svg to ^2.x.x did changed the way removeViewBox is set by default. Yet, you’ll need to specify the plugin’s name for the parser. So to disable an active plugin please try:

[
  "inline-react-svg",
  {
    "svgo": {
      "plugins": [
        {
          "name": "removeViewBox",
          "active": false
        }
      ]
    }
  }
]

[sveg-pl]

@lukasoppermann - I solved your issue removing: <?xml version="1.0" encoding="utf-8"?> from the svg file, so that it only contains vectors inside <svg>...</svg> tags. I’ve added some empty <g> groups and tested it on your repo - works fine.