airbnb / airbnb/babel-plugin-inline-react-svg
Need `includePattern` as option
- Dominant language
- JavaScript
- Stars
- 474
- Forks
- 90
- PR merge metrics
- No merged PRs in 30d
Description
My issue is that we want to use this babel transform just for icons that we want to style - inline icons that should have the same color as surrounding text, etc.
On the other hand, we'd like to use webpack's `url-loader` to handle all larger "illustration" SVGs. We would rather put those in `img` tags and let them be cached by the browser and not have them in our javascript bundle.
To do so, an `includePattern` could be used that would only use this babel transform on (for example):
- `*.icon.svg`
- `*/icons/*.svg`
Thoughts? I'm about to make a PR.
Contributor guide
No contributing guide indexed for this repository
Research direction
Start by reviewing the plugin's current option handling and how it selects SVG imports. Compare the requested *.icon.svg and */icons/*.svg patterns with existing behavior. Done means the transform applies only to matching files while other SVGs remain available to webpack's url-loader, with coverage for the new option.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript, react, webpack
- Domain
- build-system, tooling
- Issue type
- Feature
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 35/100