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

转载于:https://www.cnblogs.com/catherLee/p/10069730.html