在vue项目中使用svg，并能根据需要修改svg大小颜色等样式

1、介绍

考虑到一部分人还在用vue-cli 2.x，故本教程既包含2.x版本，也包含3.x版本

2、安装依赖

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

3、把svg文件放入项目中

如图所示：

我把svg文件放入到了assets目录下的icons目录里面了

4.1、vue-cli 2.x 配置

在webpack.base.conf.js中配置允许svg依赖

 module: {
   
    rules: [
      {
   
        test: /\.svg$/,
        loader: 'svg-sprite-loader',
        include: [resolve('src/assets/icons')],
        options: {
   
          symbolId: 'icon-[name]'
        }
      },
      {
   
        test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
        loader: 'url-loader',
        exclude: [resolve('src/assets/icons')],
        options: {
   
          limit: 10000,
          name: utils.assetsPath('img/[name].[hash:7].[ext]')
        }
      }
    ]
  },

4.2、vue-cli 3.x 配置

在根目录新建vue.config.js文件中配置loader

module.exports =