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
config/webpack.config.js
)
Current configuration ( {
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 isurl
and notraw
.