安装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属性
