Miss any of our Open RFC calls?Watch the recordings here! »

svgo-loader

2.2.1 • Public • Published

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}
    ]
  }
}

Keywords

Install

npm i svgo-loader

DownloadsWeekly Downloads

144,328

Version

2.2.1

License

MIT

Unpacked Size

27.1 kB

Total Files

14

Last publish

Collaborators

  • avatar