1、通過 https://www.iconfont.cn 下載資源，引入iconfont.js文件

• icon/index.js

import Vue from 'vue'
import SvgIcon from '@/components/SvgIcon' // svg component

import '@/icons/iconFonts/iconfont.js'

Vue.component('svg-icon', SvgIcon)

• scgIcon組件

<template>
  <svg class="icon" aria-hidden="true" v-on="$listeners">
    <use xlink:href="#icon-user" />
  </svg>
</template>
<script>
export default {
  name: 'svgIcon',
  props: {
    iconClass: {
      type: String,
      required: true,
    },
  },
  computed: {
    iconName() {
      return `#icon-${this.iconClass}`
    },
  },
}
</script>
<style lang="less">
.icon {
  width: 1em;
  height: 1em;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}
</style>

• 使用

<svg-icon icon-class="user"></svg-icon>

2、使用 svg-sprite

接下來我們就要自己來制作 svg-sprite 了。這里要使用到 svg-sprite-loader 這個(gè)神器了， 它是一個(gè) webpack loader ，可以將多個(gè) svg 打包成 svg-sprite 。

我們來介紹如何在 vue-cli 的基礎(chǔ)上進(jìn)行改造，加入 svg-sprite-loader。

我們發(fā)現(xiàn)vue-cli默認(rèn)情況下會(huì)使用 url-loader 對svg進(jìn)行處理，會(huì)將它放在/img 目錄下，所以這時(shí)候我們引入svg-sprite-loader 會(huì)引發(fā)一些沖突。

//默認(rèn)`vue-cli` 對svg做的處理，正則匹配后綴名為.svg的文件，匹配成功之后使用 url-loader 進(jìn)行處理。
 {
    test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
    loader: 'url-loader',
    options: {
      limit: 10000,
      name: utils.assetsPath('img/[name].[hash:7].[ext]')
    }
}

解決方案有兩種，最簡單的就是你可以將 test 的 svg 去掉，這樣就不會(huì)對svg做處理了，當(dāng)然這樣做是很不友善的。

• 你不能保證你所有的 svg 都是用來當(dāng)做 icon的，有些真的可能只是用來當(dāng)做圖片資源的。
• 不能確保你使用的一些第三方類庫會(huì)使用到 svg。

所以最安全合理的做法是使用 webpack 的 exclude 和 include ，讓svg-sprite-loader只處理你指定文件夾下面的 svg，url-loaer只處理除此文件夾之外的所以 svg，這樣就完美解決了之前沖突的問題。 代碼如下

    // set svg-sprite-loader
    config.module
      .rule('svg')
      .exclude.add(resolve('src/icons'))
      .end()
    config.module
      .rule('icons')
      .test(/\.svg$/)
      .include.add(resolve('src/icons'))
      .end()
      .use('svg-sprite-loader')
      .loader('svg-sprite-loader')
      .options({
        symbolId: 'icon-[name]'
      })
      .end()

這樣配置好了，只要引入svg之后填寫類名就可以了

import '@/src/icons/qq.svg; //引入圖標(biāo)

<svg><use xlink:href="#qq" /></svg>  //使用圖標(biāo)

• 自動(dòng)導(dǎo)入

const requireAll = requireContext => requireContext.keys().map(requireContext)
const req = require.context('./svg', false, /\.svg$/)
requireAll(req)

參考https://juejin.cn/post/6844903517564436493