ElementUI使用第三方图标库Iconfont

1. 在iconfont项目中生成在线链接

2. index.html中插入

```js

<script src="//at.alicdn.com/t/xxx.js"></script>

```

3. 新建一个组件Icon.vue

```vue

<template>

  <svg :class="svgClass" aria-hidden="true" :style="style">

    <use :xlink:href="iconName"></use>

  </svg>

</template>

<script>

export default {

  name: 'svg-icon',

  props: {

    name: {

      type: String,

      required: true

    },

    className: {

      type: String

    },

    size: {

      default: 20,

      type: [Number, String]

    },

    color: {

      type: String

    },

    rotate: {

      default: 0,

      type: Number

    }

  },

  computed: {

    iconName () {

      return `#icon-${this.name}`

    },

    svgClass () {

      if (this.className) {

        return 'svg-icon ' + this.className

      } else {

        return 'svg-icon'

      }

    },

    style () {

      let style = {}

      if (this.size) {

        style.fontSize = this.size + 'px'

      }

      if (this.color) {

        style.color = this.color

      }

      if (this.rotate) {

        style.transform = `rotate(${this.rotate}deg)`

      }

      return style

    }

  }

}

</script>

<style>

.svg-icon {

  width: 1em;

  height: 1em;

  vertical-align: -0.15em;

  fill: currentColor;

  overflow: hidden;

}

</style>

```

4. 引用组件即可

```js

import Icon from '@/components/Icon.vue'

```

在vue中使用：

<icon name="xxx" />