Vue引入阿里巴巴矢量图【Vue2】

---

一、在阿里巴巴官网中创建项目

在 阿里巴巴矢量图官网，资源管理 —> 我的项目中 —> 新建项目

二、选择需要的矢量图增加的项目中并下载

注意：这里选择的是Font class，下载到本地

三、vue工程创建icon目录

创建icon目录，将下载的文件放入到该目录中

四、在main.js中引入icon

// 阿里巴巴矢量图
import '@/styles/icon/iconfont.js'
import '@/styles/icon/iconfont.css'

五、在App.vue中设置icon样式

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

六、使用测试

<template>
  <div>首页
  //单色图标
    <i class="iconfont h-icon-xiaolian1"></i>
	//彩色图标如下
    <svg class="icon" aria-hidden="true">
      <use xlink:href="#h-icon-xiaolian"></use>
    </svg>
  </div>
</template>