之前也寫過一篇這樣的文章，只需要配置線上地址，即可自動下載幾個字型檔案，但是呢，我發現還有一種更好的寫法，也是大眾化的寫法，即 svg標籤，參考如何優雅的使用icon，可以完全參考這篇進行開發。

    我就是記錄一下如何使用

1 在src目錄新建一個icons目錄，目錄結構如下

svg下面放iconfont的icon標籤的svg標籤檔案，下下來複制貼上即可使用

index.js檔案：

import Vue from 'vue'
import SvgIcon from '@/components/SvgIcon'// svg元件

// register globally
Vue.component('svg-icon', SvgIcon)

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

如上面程式碼而言，我們需要封裝一下icon，在components下新建SvgIcon檔案

index.vue檔案內容：

<template>
  <svg :class="svgClass" aria-hidden="true">
    <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>
 

當然如參考文章所言，我們須載入依賴svg-sprite-loader，在webpack.base.conf.js 中

具體為什麼這麼用，請參考優雅的使用icon。

因為元件已經全域性註冊，即在元件中   <svg-icon iconClass="money"></svg-icon>  使用即可，這種用法好處很多。具體參考 你懂的。我就簡單記錄一下copy程式碼的過程而已。