"SVG as a component" doesn't quite work in 2.x
See original GitHub issueWe merged https://github.com/facebookincubator/create-react-app/pull/3718 and released the first 2.x alpha, but quickly discovered a few issues:
- Importing SVG from CSS is now broken, you get
[Object object]
in URLs. - While that can be fixed by adding a named export called
toString()
here (which would just return the URL), it looks like the resulting JS bundle contains the React component as soon as CSS imports it. It’s my impression that webpack CSS pipeline still relies on CommonJS and therefore can’t tree shake the component.
I’m not sure if there’s any solution even possible here 😢 We probably need to revert the feature.
Issue Analytics
- State:
- Created 6 years ago
- Comments:65 (46 by maintainers)
Top Results From Across the Web
React SVG import as a Component does not render
Try: import { default as logo } from '../logo.svg';. and use as source in a node of type img, like this: <img src={logo}...
Read more >How to use SVGs in React | Sanity.io guide
There are a few ways to use an SVG in a React app: Use it as a regular image; Import it as a...
Read more >How to use SVGs in React - LogRocket Blog
SVGs are useful for building fast and accessible webpages. In this post, we will go through various ways we can use or render...
Read more >Resizing an SVG When the Window is Resized in d3.js - Chartio
Since SVG isn't an image and thus can be drawn (rendered) at any pixel size, the browser doesn't inherently associate a width or...
Read more >Document Structure — SVG 2
Known elements in the SVG namespace that occur in places where SVG's content model doesn't explicitly allow it must not render unless explicitly...
Read more >
Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free
Top Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
I’ll take a crack at an implementation after work hours, think this is important enough to exist before 2.0 launches
Hmm. I don’t think a macro that generates a webpack import is much better than just a webpack import. Both lock you into a non-standard system.
The strong side of the macro is that it can run without webpack. Coupling it to webpack removes that strong side.
The strong side of Babel+webpack (but no macro) is that it “looks” seamlessly.
I think combining macro+webpack doesn’t give us benefits of either approach.