airbnb / airbnb/babel-plugin-inline-react-svg

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

Open
#95 6 comments 4 reactions 0 assignees View on GitHub
Dominant language
JavaScript
Stars
474
Forks
90
PR merge metrics
No merged PRs in 30d

Description

For some reason this SVG:
```html

```

is being parsed to
```html

```

I'm importing and using like this:
```jsx
import CheckboxIcon from "./CheckboxIcon.svg"
```

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

Contributor guide

No contributing guide indexed for this repository

Research direction

Reproduce issue 95 with the supplied CheckboxIcon.svg import and .babelrc configuration, then compare the source path with the generated path containing NaN values. Trace the inline-react-svg transformation to find where arc commands are corrupted. Done means the SVG remains valid and a regression test covers this input.

Written by the indexing model from the issue text.

Assessment

Tech stack
babel, javascript, react
Domain
frontend, tooling
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
30/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.