Revisit SVG data URI

[dimaqq]

Background

SVG files are treated differently than other images in CRA.
(https://create-react-app.dev/docs/adding-images-fonts-and-files)

#1153 disabled automatic conversion of small SVG files into data URIs. The reason for that was incompatibility with SVG sprite systems, where the "fat" SVG document needs to be an external entity (or it could be inlined).

Oddly, the referenced svg-sprite and gulp-svg-sprite projects are not very active, with last releases ~1year ago each. Does that make the sprite technique obsolete? grandfathered? in active use?

I suspect that the <style> limitation (see below), also applies to SVG sprite systems.

It's odd to have special handling for SVG in CRA, when a sprite system is not bundled by default.

Inline SVG

(https://create-react-app.dev/docs/adding-images-fonts-and-files#adding-svgs)
There's an alternative of using inline SVG XML, with some limitations:

• namespaces
• inline <style> elements

The core of the latter is that SVG styles are global, i.e. style in one inlined SVG pollutes all inlined SVG and even HTML. There are projects that attempt to inline the style into the SVG elements, but that's not always possible, for example, keyframes cannot be inlined. It may be possible to rename all inline styles to unique names for a given project [link? help needed to reference such projects].

SVG is typically designed in variety of 3rd party tools (let's say design team vs. dev team), thus it's unrealistic to require users to "make better SVG".

Proposal.

As it is now, SVG handling is an ugly nit.

Let's reinstate data URI conversion of SVG files by default. This allows isolation between SVG files. I believe that's what most users expect. It's certainly more common for beginners than advanced techniques like sprites.

Let's optionally provide an escape hatch for sprite system users.

[heyimalex]

Unless I'm misunderstanding, everything works perfectly, it's just that small svgs aren't inlined so there are extra requests? It seems like reverting this would be breaking, since any svg with a fragment identifier would be broken.

That being said, I think we could pretty easily update our use of babel-plugin-named-asset-import to include support for a named Url type for people who explicitly want a non-inlined file, or maybe Inline for the opposite.

[dimaqq]

That would be dandy!

[dimaqq]

Thanks @heyimalex for the pointer.
Adding /[.]svg$/ to the image format list at https://github.com/facebook/create-react-app/blob/6560858398ddc8d1c5b8d7f51929fcb3d9c3055c/packages/react-scripts/config/webpack.config.js#L377 in my node_modules/react-scripts/config/ does what I want.
Question is, can I make it permanent in my project?
And, how to go about making it permanent in CRA?

[dimaqq]

I am able to work around this with https://github.com/timarney/react-app-rewired and following config-overrides.js:

const immer = require("immer");

module.exports = function override(config, env) {
  const reconf = immer.produce(config, draft => {
    // I just happen to know these indices:
    // https://github.com/facebook/create-react-app/issues/7581#issuecomment-535305630
    draft.module.rules[2].oneOf[0].test.push(/[.]svg$/);
  });
  return reconf;
};

[mrhether]

Or a slightly less coupled solution:

const {
  override,
  addWebpackModuleRule
} = require('customize-cra');

module.exports = override(
  addWebpackModuleRule({
    test: /[.]svg$/,
    loader: require.resolve('url-loader'),
    options: {
      name: 'static/media/[name].[hash:8].[ext]'
    }
  })
);