! NO LONGER MAINTAINED !

This module is deprecated and will no longer be maintained.

In most cases, you can replace the functionality by using raw-loader and image-minimizer-webpack-plugin instead:

webpack.config.js

const ImageMinimizerPlugin = require('image-minimizer-webpack-plugin');

module.exports = {
  module: {
    rules: [
      {
        test: /\.svg$/,
        use: [
          {
            loader: "raw-loader"
          }
        ]
      },
    ],
  },
  plugins: [
    new ImageMinimizerPlugin({
      minimizerOptions: {
        plugins: [
          [
            'imagemin-svgo',
            {
              plugins: [
                // SVGO options is here "https://github.com/svg/svgo#what-it-can-do"
                {
                  removeViewBox: false,
                  removeXMLNS: true,
                },
              ],
            },
          ],
        ],
      },
    }),
  ],
};

For optimization svg use imagemin-svgo.

SVG Inline Loader for Webpack

This Webpack loader inlines SVG as module. If you use Adobe suite or Sketch to export SVGs, you will get auto-generated, unneeded crusts. This loader removes it for you, too.

Install

npm install svg-inline-loader --save-dev

Configuration

Simply add configuration object to module.loaders like this.

    {
        test: /\.svg$/,
        loader: 'svg-inline-loader'
    }

warning: You should configure this loader only once via module.loaders or require('!...'). See #15 for detail.

Query Options

removeTags: boolean

Removes specified tags and its children. You can specify tags by setting removingTags query array.

default: removeTags: false

removingTags: [...string]

warning: this won't work unless you specify removeTags: true

default: removingTags: ['title', 'desc', 'defs', 'style']

warnTags: [...string]

warns about tags, ex: ['desc', 'defs', 'style']

default: warnTags: []

removeSVGTagAttrs: boolean

Removes width and height attributes from <svg />.

default: removeSVGTagAttrs: true

removingTagAttrs: [...string]

Removes attributes from inside the <svg />.

default: removingTagAttrs: []

warnTagAttrs: [...string]

Warns to console about attributes from inside the <svg />.

default: warnTagAttrs: []

classPrefix: boolean || string

Adds a prefix to class names to avoid collision across svg files.

default: classPrefix: false

idPrefix: boolean || string

Adds a prefix to ids to avoid collision across svg files.

default: idPrefix: false

Example Usage

// Using default hashed prefix (__[hash:base64:7]__)
var logoTwo = require('svg-inline-loader?classPrefix!./logo_two.svg');

// Using custom string
var logoOne = require('svg-inline-loader?classPrefix=my-prefix-!./logo_one.svg');

// Using custom string and hash
var logoThree = require('svg-inline-loader?classPrefix=__prefix-[sha512#️⃣hex:5]__!./logo_three.svg');

See loader-utils for hash options.

Preferred usage is via a module.loaders:

    {
        test: /\.svg$/,
        loader: 'svg-inline-loader?classPrefix'
    }

Maintainers

Juho Vepsäläinen

Joshua Wiens

Kees Kluskens

Sean Larkin