$ npm install svgo-loader --save-dev
Svgo-loader just passes config to the svgo library.
There is two ways of loading svgo configuration. You can pass it as a JSON string after loader name, like this:
// webpack.config.js
var svgoConfig = JSON.stringify({
plugins: [
{removeTitle: true},
{convertColors: {shorthex: false}},
{convertPathData: false}
]
});
module.exports = {
...
module: {
loaders: [
{
test: /.*\.svg$/,
loaders: [
'file-loader',
'svgo-loader?' + svgoConfig
]
}
]
}
}
Or you can save svgo config in your main webpack config object, and then specify name of the property in the loader query string:
// webpack.config.js
module.exports = {
...
module: {
loaders: [
{
test: /.*\.svg$/,
loaders: [
'file-loader',
'svgo-loader?useConfig=svgoConfig1'
]
}
]
},
svgoConfig1: {
plugins: [
{removeTitle: true},
{convertColors: {shorthex: false}},
{convertPathData: false}
]
}
}
Interpolation is allowed in the svgo configuration. This is useful when using the cleanupIDs plugin, allowing a prefix to be added to id's to make them unique.
See loader-utils for interpolation options.
// webpack.config.js
var svgoConfig = JSON.stringify({
plugins: [
{
cleanupIDs: {
prefix: '[name]-'
}
}
]
});
module.exports = {
...
module: {
loaders: [
{
test: /.*\.svg$/,
loaders: [
'file-loader',
'svgo-loader?' + svgoConfig
]
}
]
}
}