SVG files imported as React components should not end up in build directory
See original GitHub issueIntro
SVG files can be imported as React component, and thus inlined into the bundle, using the following syntax:
import { ReactComponent as MySvg } from '../../assets/icons/my-svg.svg'
Actual behaviour
Although inlined, the original SVG files will still be processed (by Webpack?) and end up
- in the
build/static/media
folder - in the
asset-manifest.json
file
Overall, this isn’t critical - it only means that unused files end up in the build
folder. Nevertheless, it’s a very confusing behaviour, developers might assume those files are being used or even that SVGs imported the way described above are not being inlined.
Expected behaviour
The expected behaviour is that inlined resources do not end up in the build folder, resulting in a smaller and clean build
folder.
Related
- Follow up on https://github.com/facebook/create-react-app/issues/7941 which was marked as stale
- Related to https://github.com/facebook/create-react-app/issues/9009
Issue Analytics
- State:
- Created 3 years ago
- Reactions:10
- Comments:7
Top Results From Across the Web
Importing SVG as React component not working with Next.js
I end up with this error: Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite ...
Read more >How to use SVGs in React | Sanity.io guide
Use it as a regular image; Import it as a component via bundler magic (SVGR); Include it directly as JSX. Let's quickly go...
Read more >React SVG: How to use SVGs best in React - CopyCat Blog
In this article, we'll look at react SVG - importing SVG into react, how to convert SVG to components, and much more.
Read more >How to use SVGs in React - LogRocket Blog
Let's start by taking a look at some of SVG's advantages over other ... Also, if you use inline SVG in your code,...
Read more >Optimizing Performance - React
This will create a production build of your app in the build/ folder of your project. ... Remember that only React files ending...
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
It’s critical when using Service Worker. Because SVG files also included in
self.__WB_MANIFEST
value which contains URLs to precache. That means browsers will send requests to precache all these SVG files which don’t need at allNot stale.