fork-svg-loader

fork-svg-loader

Webpack loader that inlines SVG content so that you can control and alter it. Unlike SVG inserted as an image, svg-loader allows to animate, change color, control size, etc.

Notice

This is a fork of svg-loader to add some features.

Installation

npm install fork-svg-loader --save-dev
# or
yarn add --dev fork-svg-loader

Configuration

// ...
{
  test: /\.svg$/,
  use: ['svg-loader'] // 👈 Add loader
},
// ...

// with options
{
  test: /\.svg$/,
  use: [{
    loader: 'svg-loader',
    options: {
      transformAttributes: function (attributes) {
        // do your transform
        return attributes;
      }
    }
  }] // 👈 Add loader
},

Usage

svg-loader exports an object with two properties:

• attributes - the root SVG tag attributes.
• content - the SVG content (excluding the root svg tag).

See example output for require('./icon.svg'):

{
  attributes: {
    xmlns: 'http://www.w3.org/2000/svg',
    viewBox: '0 0 448 512'
  },
  content: '<path d="M441.9 167.3l-19.8-19.8c-4.7-4.7-12.3-4.7-17 0L224 328.2 42.9 147.5c-4.7-4.7-12.3-4.7-17 0L6.1 167.3c-4.7 4.7-4.7 12.3 0 17l209.4 209.4c4.7 4.7 12.3 4.7 17 0l209.4-209.4c4.7-4.7 4.7-12.3 0-17z"/>'
}

License

MIT © Andrei Terentev