svgo-loader
svgo loader for webpack
Last updated 4 months ago by pozadi .
MIT · Repository · Bugs · Original npm · Tarball · package.json
$ cnpm install svgo-loader 
SYNC missed versions from official npm registry.

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

Current Tags

  • 2.2.1                                ...           latest (4 months ago)

10 Versions

  • 2.2.1                                ...           4 months ago
  • 2.2.0                                ...           a year ago
  • 2.1.0                                ...           2 years ago
  • 2.0.0                                ...           2 years ago
  • 1.2.1                                ...           3 years ago
  • 1.2.0                                ...           3 years ago
  • 1.1.2                                ...           3 years ago
  • 1.1.1                                ...           3 years ago
  • 1.1.0                                ...           5 years ago
  • 1.0.0                                ...           5 years ago
Maintainers (1)
Downloads
Today 57
This Week 299
This Month 1,561
Last Day 242
Last Week 1,061
Last Month 4,594
Dependencies (2)
Dev Dependencies (4)
Dependents (111)

Copyright 2014 - 2016 © taobao.org |