iconfont 在vue項目中的應用（icon-component組件）

前言：上一篇記錄了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