前言：上一篇記錄了iconfont的三種基本使用方法。
     在Vue中應該如何使用吶？Vue中的元件化思想很明確，要提高元件的複用率，增強專案的可維護性，擴充套件性。以下是採用icontfont的使用方式之symbol封裝的icon-component元件。

//components/Icon-svg 
//建立 icon-component 元件  
<template>
  <svg class="svg-icon" aria-hidden="true">
    <use :xlink:href="iconName"></use>
  </svg>
</template>


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

<style>
.svg-icon {
  width: 1em;
  height: 1em;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}
 
</style>


//引入svg元件
import IconSvg from '@/components/IconSvg'

//全域性註冊icon-svg
Vue.component('icon-svg', IconSvg)

//在程式碼中使用
<icon-svg icon-class="password" />

參考：https://juejin.im/post/59bb864b5188257e7a427c09