SVG files imported as React components should not end up in build directory

Intro

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

[Soberia]

Overall, this isn’t critical

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 all

[dominique-mueller]

Not stale.