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

Need `includePattern` as option

Open
#62 11 comments 0 reactions 0 assignees View on GitHub
enhancement help wanted
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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.