Use file-loader by default to import SVG images, allow to `?raw` for legacy imports

Description

We always loaded all the svg files using the raw-loader which fetches the entire svg body to add it inline inside an our HTML.

We should use the URL by default: it easier to use, does not require sanitization, and query at the end of the import so it can be loaded as any old image.

After merging !111451 (merged) we could refactor so our imports do the "right thing" by default:

case from to
new imports import AWS_LOGO_URL from '@gitlab/svgs/dist/illustrations/logos/aws.svg?url'; import AWS_LOGO_URL from '@gitlab/svgs/dist/illustrations/logos/aws.svg';
legacy imports import AWS_LOGO_URL from '@gitlab/svgs/dist/illustrations/logos/aws.svg'; import AWS_LOGO_URL from '@gitlab/svgs/dist/illustrations/logos/aws.svg?raw';

Proposal

Split this work in two steps, to make sure our imports are always working:

  • Require setting a query: ?raw or ?url on all SVG imports !112836 (merged)
  • Move the default to behave the same as ?url, and remove ?url

Current configuration (config/webpack.config.js)

      {
        test: /\.svg$/,
        exclude: /icons\.svg$/,
        oneOf: [
          {
            resourceQuery: /url/,
            loader: 'file-loader',
            options: {
              name: '[name].[contenthash:8].[ext]',
              esModule: false,
            },
          },
          {
            loader: 'raw-loader',
          },
        ],
      },

Proposed configuration

      {
        test: /\.svg$/,
        exclude: /icons\.svg$/,
        oneOf: [
          {
            resourceQuery: /raw/,
            loader: 'raw-loader',
          },
          {
            loader: 'file-loader',
            options: {
              name: '[name].[contenthash:8].[ext]',
              esModule: false,
            },
          },
        ],
      },

Original MR comment

The following discussion from !111451 (merged) should be addressed:

  • @mrincon started a discussion: (+1 comment)

    Maybe we should change those imports to be something like .*.svg?raw-loader and create an issue to migrate them over to use an image instead of a data URL?

    I'll open a follow up for migrating usages of import ... from '...svg' so the default behavior is url and not raw.

Edited by Miguel Rincon