vue调整图标的大小_Vue项目使用svg图标(并使svg图标如icon一样可修改font-size、color)...

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

如不想手动给svg去色，可借用阿里巴巴图标库批量操作

通过icon-font快速给图标批量去色

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&