Vue 将 IconFont 封装成组件

SvgIcon.vue

<template>
  <svg class="icon" aria-hidden="true">
    <use :xlink:href="iconName"></use>
  </svg>
</template>


<script >
export default {
    props: ['name'],
    computed:{
      iconName(){
         return `#icon-`+this.name;
      }
    }
}
</script>

<style type="text/css">
  .icon {
    width: 1em;
    height: 1em;
    vertical-align: -0.15em;
    fill: currentColor;
    overflow: hidden;
  }
</style>

在main.js注册成全局组件

  import SvgIcon from '@/components/SvgIcon.vue';
  Vue.component('icon', SvgIcon);

在其它页面调用

<icon name="caozuo-shangchuan-upload"></icon>