Skip to content
Branch: master
Go to file
Code

Latest commit

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
Dec 13, 2014
Jun 13, 2019

README.md

svgo loader for webpack

Install

$ npm install svgo svgo-loader --save-dev

... or with Yarn

$ yarn add svgo svgo-loader -D

DON'T FORGET TO INSTALL / UPDATE THE svgo PACKAGE after you update svg-loader (see #20)

Usage

Documentation: Using loaders

Svgo-loader just passes config to the svgo library.

Put the SVGO config into loader's options

module.exports = {
  ...,
  module: {
    rules: [
      {
        test: /\.svg$/,
        use: [
          {loader: 'file-loader'},
          {
            loader: 'svgo-loader',
            options: {
              plugins: [
                {removeTitle: true},
                {convertColors: {shorthex: false}},
                {convertPathData: false}
              ]
            }
          }
        ]
      }
    ]
  }
}

Or use an external config like you would with SVGO CLI

module.exports = {
  ...,
  module: {
    rules: [
      {
        test: /\.svg$/,
        use: [
          {loader: 'file-loader'},
          {
            loader: 'svgo-loader',
            options: {
              externalConfig: "svgo-config.yml"
            }
          }
        ]
      }
    ]
  }
}

In svgo-config.yml:

plugins:
  - removeTitle: true
  - convertPathData: false
  - convertColors:
      shorthex: false

You can use YML or JSON files as external configs.

Legacy Webpack v1 config

There are 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.

However, this option will not work in Webpack 2.
This is only shown here in the documentation for backwards compatibility.

// 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}
    ]
  }
}
You can’t perform that action at this time.