项目中优雅的使用svg

搭建环境获取图标

我们使用vue-cli3搭建项目,怎么样才算优雅?
首先我们在src目录下新建icons/文件夹，在icons/文件夹下建svg/文件夹，将来我们项目中的svg图标都会统一放在这里,去阿里图标库下载svg图标

点击svg下载到icons/svg目录下修改文件名为qq.svg，或者是在icons/svg目录下新建一个qq.svg文件，把复制的svg代码放进去也可以,这样就获取到了一个图标，很easy.

处理svg图标

ue-cli对svg文件有默认的url-loader 处理，我们要使用svg 图标需单独进行配置

下载一个插件svg-sprite-loader来单独处理我们的svg图标，它是一个webpack loader，支持将多个svg打包成svg sprites,安装插件

npm install svg-sprite-loader -D

我们要怎么使用它呢，首先我们不能覆盖原有的svg解析loader，我们只需要把icons/svg这个文件夹下的svg文件解析打包即可，我们在vue.config.js中chainWebpack函数中配置，来看代码:
// 内置路径包

const path = require("path");

// 定义resolve方法，获取绝对路径
function resolve(dir) {
   
  return path.join(__dirname, dir);
}

module.exports = {
   
  // 一个函数，会接收一个基于 webpack-chain 的 ChainableConfig 实例
  // 允许对内部的 webpack 配置进行更细粒度的修改
  chainWebpack: config => {
   
    // 配置svg默认规则排除icons目录中svg文件处理
    config.module
      .rule("svg")
      .exclude.add(resolve("src/icons"))
      .end();

    // 新增icons规则，设置svg-sprite-loader处理icons目录中svg文件
    config.module
      .rule("icons")
      .test(