Sign Up for Free

RunKit +

Try any Node.js package right in your browser

This is a playground to test code. It runs a full Node.js environment and already has all of npm’s 1,000,000+ packages pre-installed, including svgo-loader with all npm packages installed. Try it out:

require("svgo/package.json"); // svgo is a peer dependency. var svgoLoader = require("svgo-loader")

This service is provided by RunKit and is not affiliated with npm, Inc or the package authors.

svgo-loader v2.2.1

svgo loader for webpack

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}
    ]
  }
}
RunKit is a free, in-browser JavaScript dev environment for prototyping Node.js code, with every npm package installed. Sign up to share your code.
Sign Up for Free