vue项目接入iconfont

样式文件夹下面添加icon.less

@font-face {
  font-family: 'iconfont';  /* project id 2110452 */
  src: url('//at.alicdn.com/t/font_2110452_3hp60yzuc17.eot');
  src: url('//at.alicdn.com/t/font_2110452_3hp60yzuc17.eot?#iefix') format('embedded-opentype'),
  url('//at.alicdn.com/t/font_2110452_3hp60yzuc17.woff2') format('woff2'),
  url('//at.alicdn.com/t/font_2110452_3hp60yzuc17.woff') format('woff'),
  url('//at.alicdn.com/t/font_2110452_3hp60yzuc17.ttf') format('truetype'),
  url('//at.alicdn.com/t/font_2110452_3hp60yzuc17.svg#iconfont') format('svg');
}

.iconfont {
  font-family:"iconfont" !important;
  font-size:16px;
  font-style:normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon {
  width: 1em; height: 1em;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}

在index.less中引入icon.less

@import './icon.less'

// main.js
import SvgIcon from './components/SvgIcon'

Vue.component('svg-icon', SvgIcon)

<template>
  <svg :class="svgClass" aria-hidden="true" v-on="$listeners">
    <use :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-icon icon-class="plane"></svg-icon>