Webpack 5 and SVG parameters

Question

I updated to Webpack 5 and found out that url-loader is deprecated in favor of asset modules. I can load SVG's like so:

        {
            test: /\.svg(\?.*)?$/,
            exclude: [path.resolve(__dirname, 'test')],
            type: 'asset/inline',
        },

But none of the params like fill and stroke have any effect on the image:

    background-image: url('~assets/img/icon_home.svg?fill=#{$normal-fill} .filling&stroke=#{$normal-stroke}');

I've tried all loaders, svg-url-loader, svg-inline-loader, vue-svg-loader, new-url-loader etc, none of them seem to do what the url-loader did successfully in Webpack 4:

        {
            test: /\.svg(\?.*)?$/,
            exclude: [path.resolve(__dirname, 'test')],
            use: ['url-loader', 'svg-transform-loader'],
        },

Answer 1

I use this config for Webpack 5.

{
    test: /\.svg(\?.*)?$/, // match img.svg and img.svg?param=value
    exclude: path.resolve(__dirname, 'src/media/sprite-images'),
    use: [
        'svg-transform-loader'
    ],
    type: 'asset/inline'
},

And then fill is working correct:

background: url("arr.svg?fill=%23fff") center no-repeat