Sponsor webpack and get apparel from the official shop! All proceeds go to our open collective!
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.
npm install svg-inline-loader --save-dev
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.
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
// 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:hash: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'
}
Juho Vepsäläinen | Joshua Wiens | Kees Kluskens | Sean Larkin |