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

Specifying SVGO option breaks JSX transform

Open
#103 11 comments 1 reaction 0 assignees View on GitHub
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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.