svgo loader for webpack
@hyperbola/svgo-loader
is a zero-dependency, evergreen replacement for
svgo-loader
. @hyperbola/svgo-loader
only supports the latest webpack@5
release.
Install
$ npm i -D svgo @hyperbola/svgo-loader
svgo
is a peer dependency of this package and must be explicitly installed and
added to your package.json
.
Usage
Upstream webpack documentation: loaders.
@hyperbola/svgo-loader
passes config from webpack.config.js
directly to the
svgo
library.
asset
modules
With const svgToMiniDataURI = require("mini-svg-data-uri");
module.exports = {
...,
module: {
rules: [
{
test: /\.svg$/,
type: "asset",
use: "@hyperbola/svgo-loader",
generator: {
dataUrl: (content) => {
content = content.toString();
return svgToMiniDataURI(content);
},
},
},
]
}
}
With SVGO configuration
Pass configuration to SVGO by including it into the loader's options
:
module.exports = {
...,
module: {
rules: [
{
test: /\.svg$/,
type: "asset",
use: {
loader: "@hyperbola/svgo-loader",
options: {
plugins: [
"removeTitle",
{ name: "convertColors", params: { shorthex: false } },
{ name: "convertPathData", active: false },
],
},
},
},
]
}
}