以往方法：

• 在Iconfont官網中搜索所需圖標
• 添加入庫
• 添加至項目
• 下載素材至本地
• 頁面中引入字體文件
• 使用方法：

<i class="iconfont user-icon"></i>

缺點：項目想要添加新的圖標時诀黍，需要重復上述操作并重新下載覆蓋文件

手動分割線

解決方案：采用svg-sprite-loader自動加載打包，方便維護

// 項目默認配置文件
|-- vue3.0-project
  |-- node_modules
  |-- public
  |-- src
   |- - assets
    |-- components
    |-- icons
    |-- views
    |--App.vue
    |--main.js
 |-- .gitignore
 |-- babel.config.js
 |-- package-lock.json
 |-- package.json
 |-- README.en.md
 |-- README.md
 |-- vue.config.js

一、安裝依賴 svg-sprite-loader

$ cnpm install svg-sprite-loader -D

二浑吟、vue.config.js配置

1、引入path模塊竿痰，處理文件路徑

const path = require('path')

// 獲取絕對路徑
function resolve(dir) {
  return path.join(__dirname, dir)
}

2苟弛、配置規(guī)則

module.exports = {
  // 鏈式webpack配置
  chainWebpack(config) {
    // svg規(guī)則配置，排除icons目錄
    config.module.rule('svg')
    .exclude.add(resolve('src/icons'))
    .end()

    // 新增icons規(guī)則，設置svg-sprite-loader
    config.module.rule('icons') // 創(chuàng)建規(guī)則 ‘icons’
    .test(/\.svg$/) // 檢測的具體目錄
    .include.add(resolve('src/icons')) // 只考慮‘src/icons’目錄下
    .end()
    .use('svg-sprite-loader') // 運用
    .loader('svg-sprite-loader') // 指定loader
    .options({ symbolId: 'icon-[name]' }) // 選項配置潦刃，將來使用圖標的名稱, 例：icon-qq
  }
}

查看所有規(guī)則

$ vue inspect --rules

[
  'vue',
  'images',
  'svg',
  'media',
  'fonts',
  'pug',
  'css',
  'postcss',
  'scss',
  'sass',
  'less',
  'stylus',
  'js',
  'eslint',
  'icons'
]

查看當前配置的icons規(guī)則

$ vue inspect --rule icons

/* config.module.rule('icons') */
{
  test: /\.svg$/,
  include: [
    'E:\\Code\\gitee\\vue3.0-project\\src\\icons'
  ],
  use: [
    {
      loader: 'svg-sprite-loader',
      options: {
        symbolId: 'icon-[name]'
      }
    }
  ]
}

三侮措、編寫svg-icon組件（src\components\SvgIcon.vue）

<template>
  <svg :class="svgClass" aria-hidden="true" v-on="$listeners">
    <use :xlink:href="iconName"/>
  </svg>
</template>

<script>
export default {
  name: 'SvgIcon',
  props: {
    iconClass: {
      type: String,
      required: true
    },
    className: {
      type: String,
      default: ''
    }
  },
  computed: {
    iconName() {
      return `#icon-${this.iconClass}`
    },
    svgClass() {
      if(this.className) {
        return 'svg-icon' + this.className
      } else {
        return 'svg-icon'
      }
    }
  }
}
</script>

<style scoped>
/* 自定義默認圖標樣式 */
.svg-icon {
  width: 1em;
  height: 1em;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}
</style>

四、配置icon文件及目錄（src\icons）

svg圖標文件放置src\icons\svg下（每次新增文件乖杠，只需將svg文件放置該文件下即可分扎，無需重復配置）

例：src\icons\svg\qq.svg

全局組件注冊，icons規(guī)則匹配（src\icons\index.js）

import Vue from 'vue'

// 導入svgIcon組件
import SvgIcon from '@/components/SvgIcon'

// 全局注冊svg-icon組件
Vue.component('svg-icon', SvgIcon)

// require.context 指定規(guī)則匹配
const req = require.context('./svg', false, /\.svg$/)

// keys =》 ['qq.svg', 'wx.svg']
req.keys().map(req)

五胧洒、全局引入icon配置文件（src\main.js）

// src\icons\index.js
import './icons'

六畏吓、使用

<svg-icon icon-class="qq"></svg-icon>
<svg-icon icon-class="wx"></svg-icon>