vue项目改图标_vue项目使用svg图标(并可修改颜色)

先提一下修改颜色原理：svg适量矢量图的线条颜色通过stroke：xxx控制，删除.svg文件的原生stroke属性，便可继承包装组件通过prop传进去的新stroke值

1.安装依赖

npm install svg-sprite-loader --save-dev

2.(这里使用vue-cli 4以上版本) 修改vue.config.js配置文件

const path = require('path')

const resolve = dir => {

return path.join(__dirname, dir)

}

module.exports = {

devServer: {

port: 8000

},

configureWebpack: {

name: 'icontest',

resolve: {

alias: {

'@': resolve('src'),

'views': resolve('src/views')

}

}

},

chainWebpack(config) {

config.module

.rule('svg')

.exclude.add(resolve('src/icons'))

.end()

config.module

.rule('icons&#