svgo-loader

svgo loader for webpack

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.

Similar packages

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.