阿里矢量图标库

第一步: 声明字体 -> 推荐使用在线字体
@font-face {
  font-family: 'iconfont';  /* project id 1072741 */
  src: url('//at.alicdn.com/t/font_1072741_kyk02u4tobq.eot');
  src: url('//at.alicdn.com/t/font_1072741_kyk02u4tobq.eot?#iefix') format('embedded-opentype'),
  url('//at.alicdn.com/t/font_1072741_kyk02u4tobq.woff2') format('woff2'),
  url('//at.alicdn.com/t/font_1072741_kyk02u4tobq.woff') format('woff'),
  url('//at.alicdn.com/t/font_1072741_kyk02u4tobq.ttf') format('truetype'),
  url('//at.alicdn.com/t/font_1072741_kyk02u4tobq.svg#iconfont') format('svg');
}

第二步: 定义类名
.iconfont {
    font-family: 'iconfont' !important;
    font-size: 16px;
    font-style: normal;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

第三步: 使用
 <i class="iconfont">&#xe64b;</i>

带颜色的字体图标使用方式
第一步: 选中symbol栏目 --> 复制代码 js路径

我在App.vue文件中添加的这部分代码的
const element = document.createElement('script')
element.src = '//at.alicdn.com/t/font_1072741_kyk02u4tobq.js'
document.body.appendChild(element)

第二步: 使用svg显示图标

<svg aria-hidden="true">
  <use xlink:href="#iconwujieguo" />
</svg>
href属性: # + 字体图标的名字