What is svgo-loader?
svgo-loader is an npm package that optimizes SVG files by using the SVGO (SVG Optimizer) library. It is typically used as a loader in webpack configurations to automatically optimize SVG files during the build process, reducing file size and improving performance.
What are svgo-loader's main functionalities?
Basic SVG Optimization
This feature allows you to optimize SVG files by applying various SVGO plugins. The code sample demonstrates a basic webpack configuration that uses svgo-loader to remove titles, convert colors, and disable path data conversion.
module.exports = {
module: {
rules: [
{
test: /\.svg$/,
use: [
{
loader: 'svgo-loader',
options: {
plugins: [
{ removeTitle: true },
{ convertColors: { shorthex: false } },
{ convertPathData: false }
]
}
}
]
}
]
}
};
Custom Plugin Configuration
This feature allows you to customize the SVGO plugins used during the optimization process. The code sample shows how to configure svgo-loader to remove dimensions and specific attributes like stroke and fill from SVG files.
module.exports = {
module: {
rules: [
{
test: /\.svg$/,
use: [
{
loader: 'svgo-loader',
options: {
plugins: [
{ removeDimensions: true },
{ removeAttrs: { attrs: '(stroke|fill)' } }
]
}
}
]
}
]
}
};
Integration with Other Loaders
This feature demonstrates how svgo-loader can be integrated with other loaders like babel-loader in a webpack configuration. The code sample shows a setup where SVG files are first processed by babel-loader and then optimized by svgo-loader.
module.exports = {
module: {
rules: [
{
test: /\.svg$/,
use: [
'babel-loader',
{
loader: 'svgo-loader',
options: {
plugins: [
{ removeViewBox: false }
]
}
}
]
}
]
}
};
Other packages similar to svgo-loader
image-webpack-loader
image-webpack-loader is a similar package that optimizes images, including SVGs, during the webpack build process. It uses various optimization tools like imagemin and SVGO. Compared to svgo-loader, image-webpack-loader is more versatile as it supports multiple image formats, not just SVG.
svg-url-loader
svg-url-loader is a webpack loader that inlines SVGs as URLs. It can also optimize SVGs using SVGO. Compared to svgo-loader, svg-url-loader provides additional functionality by converting SVGs into data URLs, which can be useful for embedding SVGs directly into HTML or CSS.
Install
$ npm install svgo-loader --save-dev
... or with Yarn
$ yarn add svgo-loader -D
Usage
Documentation: Using loaders
module.exports = {
...,
module: {
rules: [
{
test: /\.svg$/,
type: 'asset',
loader: 'svgo-loader'
}
]
}
}
By default svgo-loader uses config from svgo.config.js
similar to svgo cli.
See how to configure svgo.
Specify configFile option to load custom config module:
module.exports = {
...,
module: {
rules: [
{
test: /\.svg$/,
type: 'asset',
loader: 'svgo-loader',
options: {
configFile: './scripts/svgo.config.js'
}
}
]
}
}
or to disable loading config:
module.exports = {
...,
module: {
rules: [
{
test: /\.svg$/,
type: 'asset',
loader: 'svgo-loader',
options: {
configFile: false
}
}
]
}
}
You can also specify options which override loaded from config
module.exports = {
...,
module: {
rules: [
{
test: /\.svg$/,
type: 'asset',
loader: 'svgo-loader',
options: {
multipass: true,
js2svg: {
indent: 2,
pretty: true,
}
}
}
]
}
}
License and Copyright
This software is released under the terms of the MIT license.