viewbox is not passed from svg to html in the babel-plugins-inline-react-svg version": "^2.0.1".

[malinindev]

There is an examlpe of svg file:

<svg width="20" height="20" viewBox="0 0 20 20" fill="none"
  xmlns="http://www.w3.org/2000/svg">
  <path fill-rule="evenodd" clip-rule="evenodd" d="M10 0C4.5 0 0 4.5 0 10C0 15.5 4.5 20 10 20C15.5 20 20 15.5 20 10C20 4.5 15.5 0 10 0ZM10 18.3C5.4 18.3 1.7 14.6 1.7 10C1.7 5.4 5.4 1.7 10 1.7C14.6 1.7 18.3 5.4 18.3 10C18.3 14.6 14.6 18.3 10 18.3ZM8.5 6.5L11 9H5V11H11L8.5 13.5L10 15L15 10L10 5L8.5 6.5Z" fill="white"/>
</svg>

I expect that in html this file will look the same. But the viewBox attribute is lost in html. The code looks like this:

<svg width="20" height="20" fill="none"
  xmlns="http://www.w3.org/2000/svg">
  <path fill-rule="evenodd" clip-rule="evenodd" d="M10 0C4.5 0 0 4.5 0 10C0 15.5 4.5 20 10 20C15.5 20 20 15.5 20 10C20 4.5 15.5 0 10 0ZM10 18.3C5.4 18.3 1.7 14.6 1.7 10C1.7 5.4 5.4 1.7 10 1.7C14.6 1.7 18.3 5.4 18.3 10C18.3 14.6 14.6 18.3 10 18.3ZM8.5 6.5L11 9H5V11H11L8.5 13.5L10 15L15 10L10 5L8.5 6.5Z" fill="white"/>
</svg>

There was no such problem in version 1.1.2

[ljharb]

It's likely due to the svgo update from v0 to v1, in v2 of this package vs v1. Possibly related to #103?

[lgiacomazzi]

any updates?

[Sydney-o9]

@malininss just make sure to have svgo removeAttrs in your .babelrc

{
  "presets": ["next/babel"],
  "plugins": [
    [
      "inline-react-svg",
      {
        "svgo": {
          "plugins": [
            {
              "name": "removeAttrs", 
              "params": { "attrs": "(data-name)" }
            },
            "cleanupIDs"
          ]
        }
      }
    ]
  ]
}

[LenweSaralonde]

Issue still occurs in version 2.0.2, even with "svgo": false

My .babelrc file :

{
  "presets": [
    [
      "next/babel",
      {
        "preset-env": {
          "targets": {
            "ios": "12"
          }
        }
      }
    ]
  ],
  "plugins": [
    [
      "inline-react-svg",
      {
        "svgo": false
      }
    ],
    [
      "module-resolver",
      {
        "root": ["."],
        "alias": {
          "components": "./src/components",
          "services": "./src/services",
          "config": "./src/config",
          "hooks": "./src/hooks",
          "utils": "./src/utils",
          "icons": "./src/icons",
          "src": "./src"
        }
      }
    ]
  ]
}