Webpack 5 и параметры SVG

Я обновился до Webpack 5 и обнаружил, что url-loader устарел в пользу модулей ресурсов. Я могу загрузить SVG так:

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

Но ни один из параметров, таких как заливка и обводка, не влияет на изображение:

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

Я перепробовал все загрузчики, svg-url-loader, svg-inline-loader, vue-svg-loader, new-url-loader и т. д., ни один из них, похоже, не делает того, что url-loader успешно делал в Webpack 4:

        {
            test: /\.svg(\?.*)?$/,
            exclude: [path.resolve(__dirname, 'test')],
            use: ['url-loader', 'svg-transform-loader'],
        },
Создание фильтров для вашего сайта
Создание фильтров для вашего сайта
Фильтры - удобный инструмент в арсенале веб-дизайнера. Они позволяют изменять элементы на странице с помощью всего нескольких строк кода. Эти...
Анимация SVG-узоров без единой строки CSS
Анимация SVG-узоров без единой строки CSS
Недавно я работал над веб-проектом, который позволил мне поэкспериментировать с шаблонами SVG. С SVG очень приятно работать, как только вы получите...
Как использовать d3.js для рисования 2D SVG-элементов в приложении Angular?
Как использовать d3.js для рисования 2D SVG-элементов в приложении Angular?
D3.js - это обширная библиотека, используемая для привязки произвольных данных к объектной модели документа (DOM). Мы разберем основные варианты...
0
0
52
2
Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Ответ принят как подходящий

Я использую эту конфигурацию для 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'
},

И тогда заполнение работает правильно:

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

Да, loader: 'svg-transform-loader' тоже работает. Я перепробовал десятки комбинаций, но, кажется, забыл попробовать svg-transform-loader с type: asset/inline. Спасибо!

Другие вопросы по теме