!npmnpmnpm-url
!depsdepsdeps-url
!testtesttest-url
!coveragecovercover-url
!chatchatchat-url
Simply add configuration object to
warning: You should configure this loader only once via
Removes specified tags and its children. You can specify tags by setting
default:
warning: this won't work unless you specify
default:
warns about tags, ex: 'desc', 'defs', 'style'
default:
Removes
default:
Removes attributes from inside the
default:
Warns to console about attributes from inside the
default:
Adds a prefix to class names to avoid collision across svg files.
default:
Adds a prefix to ids to avoid collision across svg files.
default:
Preferred usage is via a
<img width="200" height="200" vspace="" hspace="25"
src="https://cdn.rawgit.com/webpack/media/e7485eb2/logo/icon.svg">
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: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'
}