How to use svg-chunk-webpack-plugin along with prefixing the svg IDs using webpack 5?

248 Views Asked by At

Hi I have got lot of individual svg files which I want to chunk in a single file using svg-chunk-webpack-plugin. I followed the example here and was able to do it. It is internally taking care of adding ids to each SVGs in a sprite file based on its individual SVG fileName

Now I wanted to prefix those svg ids with my desired string and I used SVGO plugin prefixIds as mentioned here.

But webpack is not prefixing the ids with my desired string. Not sure what i am doing wrong?

I created below svgo.config.js file

export default {
    multipass: true,
    plugins: [
        {
            name: 'preset-default',
            params: {
                overrides: {
                    inlineStyles: {
                        onlyMatchedOnce: false
                    },
                    removeViewBox: false,
                    removeDoctype: false
                }
            }
        },
        {
            name: 'convertStyleToAttrs' // Disabled by default since v2.1.0
        },
        {
            name: 'prefixIds',
            params: {
                prefix: 'inm-icon'
            }
        }
    ]
};

And passed this to my webpack.config.js file like this under module.rules

{
    test: /\.svg$/,
    use: [
        {
            loader: SvgChunkWebpackPlugin.loader,
            options: {
                configFile: path.resolve(__dirname, './svgo.config.js')
            },
        }

    ]
}

I also mentioned this in module.plugins in-order to generate the sprite manifest and preview file

new SvgChunkWebpackPlugin({
                filename: 'icons.svg',
                generateSpritesManifest: true,
                generateSpritesPreview: true
            })

Everything works fine. Just that the ids in sprite file are not getting prefixed with the mentioned string. Any help on this is highly appreciated

0

There are 0 best solutions below