svgo-loader

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.

README

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$/,
        use: [
          {
            loader: 'file-loader'
          },
          {
            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$/,
        use: [
          {
            loader: 'file-loader'
          },
          {
            loader: 'svgo-loader',
            options: {
              configFile: './scripts/svgo.config.js'
            }
          }
        ]
      }
    ]
  }
}

or to disable loading config:

module.exports = {
  ...,
  module: {
    rules: [
      {
        test: /\.svg$/,
        use: [
          {
            loader: 'file-loader'
          },
          {
            loader: 'svgo-loader',
            options: {
              configFile: false
            }
          }
        ]
      }
    ]
  }
}

You can also specify options which override loaded from config

module.exports = {
  ...,
  module: {
    rules: [
      {
        test: /\.svg$/,
        use: [
          {
            loader: 'file-loader'
          },
          {
            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.