vue中使用svg

安装vue-sprite-loader

npm install -D vue-sprite-loader

修改vue.config.js文件

module.exports = {
chainWebpack(config) {
config.module
.rule("svg")
.exclude.add(resolve("src/icons"))
.end()
config.module
.rule("icons")
.test(/.svg$/)
.include.add(resolve("src/icons"))
.end()
.use("svg-sprite-loader")
.loader("svg-sprite-loader")
.options({
symbolId: "icon-[name]",
})
.end()
},
}

使用

import "@/icons/data.svg"

svg修改颜色

.svg-icon {
width: 1em;
height: 1em;
vertical-align: -0.15em;
fill: currentColor;
overflow: hidden;
}
修改父元素颜色即可
如果颜色没有改变，删除svg文件中的fill属性