Vue中线上引入Symbol形式的icon

1.选择喜欢的图标添加入库：

2.添加至项目(第一次使用直接新建一个项目再添加就可以了)：

3.到我的项目页 ，Symbol下面点击生成代码：

4.将生成的代码复制，引用到index.html中：

 <!--线上引用js文件-->
    <script src="http://at.alicdn.com/t/font_3384739_nwkd1ljme1n.js"></script>

 5.在components文件夹下创建icon-svg组件：

<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>

 6.在main.js中引入并全局注册icon-svg组件:

//引入svg组件
import IconSvg from './components/icon-svg.vue'
//全局注册icon-svg
Vue.component('icon-svg', IconSvg)

7.在代码中使用(在官网里复制图标代码)：

<icon-svg iconClass="position-fill"></icon-svg>