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
只需加载配置对象到 module.loaders
像下面这样。
{
test: /\.svg$/,
loader: 'svg-inline-loader'
}
警告: 这个loader你应只配置一次,通过 module.loaders
或者 require('!...')
配置。 更多细节参考 #15。
删除指定的标签和它的子元素,你可以指定标签通过设置 removingTags
查询多个。
默认值: removeTags: false
removingTags: [...string]
警告: 你指定 removeTags: true
时,它才会执行。
默认值: removingTags: ['title', 'desc', 'defs', 'style']
warnTags: [...string]
警告标签,例: ['desc', 'defs', 'style']
默认值: warnTags: []
removeSVGTagAttrs: boolean
删除 <svg />
的 width
和 height
属性。
默认值: removeSVGTagAttrs: true
removingTagAttrs: [...string]
删除内部的 <svg />
的属性。
默认值: removingTagAttrs: []
warnTagAttrs: [...string]
在console发出关于内部 <svg />
属性的警告
默认值: warnTagAttrs: []
classPrefix: boolean || string
添加一个前缀到svg文件的class,以避免碰撞。
默认值: classPrefix: false
idPrefix: boolean || string
添加一个前缀到svg文件的id,以避免碰撞。
默认值: idPrefix: false
// 使用默认 hashed prefix (__[hash:base64:7]__)
var logoTwo = require('svg-inline-loader?classPrefix!./logo_two.svg');
// 使用自定义字符串
var logoOne = require('svg-inline-loader?classPrefix=my-prefix-!./logo_one.svg');
// 使用自定义字符串和hash
var logoThree = require('svg-inline-loader?classPrefix=__prefix-[sha512:hash:hex:5]__!./logo_three.svg');
hash 操作请参照 loader-utils。
通过 module.loaders
优先使用:
{
test: /\.svg$/,
loader: 'svg-inline-loader?classPrefix'
}
Juho Vepsäläinen | Joshua Wiens | Kees Kluskens | Sean Larkin |