A svg compression tool for webpack loader
npm install svg-min-loader该包依赖于 svgo
``shell`
npm i svgo svg-min-loader --save-dev
shell
webpack {
test: /\.svg$/,
include: [resolve('packages/SvgIcon/svg')],
use: [
{
loader: 'svg-mini-loader'
}
]
},
` 也可配合svg-sprite-loader使用,svg-sprite-loader 将我们引用的指定文件夹下的 svg 制作成 svg sprite 并插入 html 的 body 中。
`shell
npm i svg-sprite-loader --save-dev {
test: /\.svg$/,
include: [resolve('packages/SvgIcon/svg')],
use: [
{
loader: 'svg-sprite-loader',
options: {
symbolId: 'icon-[name]'
}
},
{
loader: 'svg-mini-loader'
}
]
},
` svg-min-loader 中在不传参数的时候它默认了一套压缩svg机制,当然可传参进行定制化
`
{
test: /\.svg$/,
include: [resolve('packages/SvgIcon/svg')],
use: [
{
loader: 'svg-sprite-loader',
options: {
symbolId: 'icon-[name]'
}
},
{
loader: 'svg-mini-loader',
options: {
plugins:[
{
removeViewBox: false
},
{
removeUselessStrokeAndFill: false
},
{
removeAttrs: {
attrs: ['xmlns']
}
}
]
}
}
]
},
`$3
`[ cleanupAttrs ] 清除换行,结束符以及重复空格
[ removeDoctype ] 删除文档声明
[ removeXMLProcInst ] 删除XML处理指令
[ removeComments ] 删除注释
[ removeMetadata ] 删除源信息
[ removeTitle ] 删除标题(默认禁用)
[ removeDesc ] 删除描述 (默认只有desc元素无意义的时候)
[ removeUselessDefs ] 删除元素如果没有id
[ removeEditorsNSData ] 删除编辑器的命名空间,元素和属性
[ removeEmptyAttrs ] 删除空属性
[ removeHiddenElems ] 删除隐藏元素
[ removeEmptyText ] 删除隐藏文本元素
[ removeEmptyContainers ] 删除空的容器元素
[ removeViewBox ]如果可以,删除viewBox属性(默认进行)
[ cleanUpEnableBackground ] 如果可以,删除enable-background属性
[ minifyStyles ] 使用CSSO最小化元素的