问题
使用
css无法正常设置svg标签的颜色
资料
参考帖子：svg loader Error: Plugin name should be specified
image.png
操作
- 安装依赖
npm install svgo-loader@3.0.0 -D
-
vue.config.js文件中进行配置（svg-sprite-loader是之前已有的依赖，这里保留主要是为了展示多loader的语法）
module.exports = {
chainWebpack(config) {
config.module.rule('svg').exclude.add(resolve('src/assets/icons')).end()
config.module
.rule('icons')
.test(/\.svg$/)
.include.add(resolve('src/assets/icons'))
.end()
.use('svg-sprite-loader')
.loader('svg-sprite-loader')
.options({
symbolId: 'icon-[name]'
})
.end()
.use('svgo-loader')
.loader('svgo-loader')
.tap((options) => ({
...options,
plugins: [
{
name: 'removeAttrs',
params: {
attrs: '(fill|stroke)'
}
}
]
}))
.end()
}
}
-
css设置
svg {
fill: currentColor;
}
