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: booleanRemoves 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: booleanRemoves 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 || stringAdds a prefix to class names to avoid collision across svg files.
default: classPrefix: false
idPrefix: boolean || stringAdds 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'
}
|
|
|
|
|
