airbnb / airbnb/babel-plugin-inline-react-svg
Dynamically import svgs
- Dominant language
- JavaScript
- Stars
- 474
- Forks
- 90
- PR merge metrics
- No merged PRs in 30d
Description
So we have a library with all our svg icons in it.
I'm looking for a way to import all these svgs dynamically and display them in our styleguide (storybook) to give a visual representation of which icons we have.
I was trying something like this but no luck:
```js
const reqSvgs = require.context('./svgdir', true, /\.svg$/);
reqSvgs.keys().map((filename) => {
return (
{reqSvgs(filename)}
);
})
```
But no luck, anyone any idea how i can make this work?
Contributor guide
No contributing guide indexed for this repository
Research direction
Start with the require.context example in the issue and the Storybook styleguide setup, then determine how the SVG library is exposed to the displayed components. Done means the styleguide can enumerate the SVGs from ./svgdir and render a visual representation of each icon.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript, react, storybook
- Domain
- frontend, tooling
- Issue type
- Feature
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Needs clarification
- Newbie friendliness
- 25/100