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

[dominique-mueller]

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

[stale[bot]]

This issue has been automatically marked as stale because it has not had any recent activity. It will be closed in 5 days if no further activity occurs.

[dominique-mueller]

Not stale.

[stale[bot]]

This issue has been automatically marked as stale because it has not had any recent activity. It will be closed in 5 days if no further activity occurs.

[dominique-mueller]

Not stale.

[stale[bot]]

This issue has been automatically marked as stale because it has not had any recent activity. It will be closed in 5 days if no further activity occurs.

[dominique-mueller]

Not stale.

[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