Error: <path> attribute d: Expected arc flag ('0' or '1'), "M21 0H3a3 3 0 0-3 3 NaNvNaNa3 3…"

[BrunoQuaresma]

For some reason this SVG:

<svg width="24" height="24" xmlns="http://www.w3.org/2000/svg"><path d="M21 0H3a3 3 0 00-3 3v18a3 3 0 003 3h18a3 3 0 003-3V3a3 3 0 00-3-3zm-.44 7.81l-10.5 10.5a1.5 1.5 0 01-2.12 0l-4.5-4.5a1.5 1.5 0 112.12-2.12L9 15.129l9.44-9.44a1.5 1.5 0 112.12 2.122z"/></svg>

is being parsed to

<svg width="24" height="24" xmlns="http://www.w3.org/2000/svg"><path d="M21 0H3a3 3 0 0-3 3 NaNvNaNa3 3 0 3 3 NaN NaNhNaNa3 3 0 3-3 NaN NaNvNaNa3 3 0 0-3 NaN NaNzm-.44 7.81l-10.5 10.5a1.5 1.5 0 1-2.12 0 NaNL1.32 NaNa1.5 1.5 0 112.12-2.12 NaN NaNlNaN NaN NaN NaNa1.5 1.5 0 112.12 2.122"></path></svg>

I'm importing and using like this:

import CheckboxIcon from "./CheckboxIcon.svg"

.babelrc:

{
  "presets": ["next/babel"],
  "plugins": ["inline-react-svg"]
}

[ljharb]

that's a lot of NaNs in the d attribute. is there any chance the original svg isn't well-formed?

[BrunoQuaresma]

@ljharb If you open the original svg that I posted previously in the browser, it works. I tried with other svgs as well but no success.

[ljharb]

Browsers are very forgiving; it’s possible an svg would work, but be invalid, just like html itself.

[BrunoQuaresma]

I used the W3C validator and it looks good.

Code:

<svg width="24" height="24" xmlns="http://www.w3.org/2000/svg"><path d="M21 0H3a3 3 0 00-3 3v18a3 3 0 003 3h18a3 3 0 003-3V3a3 3 0 00-3-3zm-.44 7.81l-10.5 10.5a1.5 1.5 0 01-2.12 0l-4.5-4.5a1.5 1.5 0 112.12-2.12L9 15.129l9.44-9.44a1.5 1.5 0 112.12 2.122z"/></svg>

[AhmedBHameed]

Any solution/workaround to this issue?

[frendly]

0.7.2 is quite outdated. Update to v1.1 at least https://github.com/svg/svgo/issues/1185

and

See #35 and #34; svgo v1+ doesn't offer a synchronous mechanism, so we can't use it.

Additionally, every security issue you're referencing is a false positive that does not apply to this repo. https://github.com/airbnb/babel-plugin-inline-react-svg/pull/66