[v5] Use webpack 5 asset modules also for svgr

Created by: raix

Is your proposal related to a problem?

This issue is related to Webpack 5 and the svg loader part of the configuration. Webpack 5 now use Asset modules to replace raw/url/file loaders.

Most of file loading is already converted into asset modules in the new CRA webpack 5 config but theres on outstanding regarding loading svg.

Describe the solution you'd like

When converting to webpack 5 I didn't manage to convert the svgr loader setup to be using asset modules, for now it's using file-loader still. It would be great if it could be converted into the asset module pattern, ideally by setting the asset type instead of using other loaders to be webpack 5 native.

Describe alternatives you've considered

@marella mentioned that he did a new-url-loader as an alternative see comment for more details

Additional context

Reading the webpack 5 documentation I would imagine that something like this would have worked: (Also note that we might have to think about url assets maybe thats out of scope for now?)

  test: /\.svg$/,
  use: [
    {
      loader: '@svgr/webpack',
      options: {
        prettier: false,
        svgo: false,
        svgoConfig: {
          plugins: [{ removeViewBox: false }],
        },
        titleProp: true,
        ref: true,
      },
    },
    type: 'asset/resource',
    generator: {
      filename: 'static/media/[name].[hash].[ext]',
    }
/* replacing:
    {
      loader: 'file-loader',
      options: {
        name: 'static/media/[name].[hash].[ext]',
      },
    },
*/
  ],