安裝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 aria-hidden="true">
<use :xlink:href="#icon-data" />
</svg>

svg修改顏色

.svg-icon {
width: 1em;
height: 1em;
vertical-align: -0.15em;
fill: currentColor;
overflow: hidden;
}
修改父元素顏色即可
如果顏色沒有改變，刪除svg文件中的fill屬性