I have a project where i need to generate svg sprite(symbol) in case the build is in development mode using webpack. This was working fine till i had old version (3.x.x) version of webpack.
I have now upgraded the the webpack to version 5. and accordingly updated the dependencies and changed a bit of the structure. now it is not generating the sprite. i have tried a lot of things but nothing works.
here is my old code:
if(!isProd){
rules.push({
test: /.svg$/,
include: path.join(__dirname, './library/basics/Icons'),
loaders: [
'svg-sprite-loader?' +
JSON.stringify({
name: 'icon-[name]',
prefixize: true,
}),
'svgo-loader?' +
JSON.stringify({
plugins: [
{removeTitle: true},
{convertPathData: false},
{removeUselessStrokeAndFill: true},
],
}),
],
})
and the dependencies for this were as mentioned below
"svg-sprite-loader": "0.3.1",
"svgo": "^1.1.1",
"svgo-loader": "^2.2.0",
"webpack": "3.12.0",
"webpack-dev-server": "2.11.2"
Now I have updated the webpack code to this
if(!isProd){
test: /.svg$/,
include: path.join(__dirname, "./library/basics/Icons"),
use: [
{
loader: "svg-sprite-loader",
options: { name: "icon-[name]", prefixize: true },
},
{
loader: "svgo-loader",
options: {
removeTitle: true,
convertPathData: false,
removeUselessStrokeAndFill: true,
},
},
],
}
And updated dependencies
"svg-sprite-loader": "^6.0.11",
"svgo": "^1.3.2",
"svgo-loader": "^4.0.0",
"webpack": "^5.39.1",
"webpack-cli": "^5.0.1",
"webpack-dev-server": "^4.11.1",
Here is my Unchanged javscript code :
var general = null;
var tickets = null;
general = require.context('./General', true, /.*.svg$/)
general.keys().forEach(general)
tickets = require.context('./Tickets', true, /.*.svg$/)
tickets.keys().forEach(tickets)