airbnb / airbnb/babel-plugin-inline-react-svg
Specifying SVGO option breaks JSX transform
- Dominant language
- JavaScript
- Stars
- 474
- Forks
- 90
- PR merge metrics
- No merged PRs in 30d
Description
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.
```
```
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.
Contributor guide
No contributing guide indexed for this repository
Research direction
Start in src/index.js at the parse call on line 78 and reproduce the transform with the shown inline-react-svg SVGO configuration and SVG. Compare the failing JSX transform with the no-options case; done means the configured SVG transforms successfully while preserving the viewBox attribute.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript
- Domain
- tooling
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 35/100