阿里巴巴图标库

图标库

接入方式

下载图标素材

  • 访问图标库
  • 创建一个自己的项目，没有什么要求，谁便起个名称就行
  • 找到自己要的图标，添加到购物车后添加到项目
  • 进入项目页面，以symbol方式下载到本地（目前只有这种方式支持彩色），解压后得到如下文件目录

添加到vue项目

  • 将素材文件复制到src/assets/icons目录，icons为新建的文件夹，名称和位置都无所谓，放这里比较标准
  • 在src/main.js中引用资源
...
import './assets/icons/iconfont'
import './assets/icons/iconfont.css'
...
  • 在一个父组件src/views/HomeView.vue中添加样式（这一步非必须只是用起来方便）
1
2
3
4
5
6
7
8
<style>
.icon {
  height: 25px;
  width: 25px;
  margin-right: 10px;
}
</style>

vue中使用

  • 在需要图标的地方添加一下代码，只要将href中的名称换成下载图标的名称即可（可以通过打开demo文件查看图标名称信息）
<svg class="icon" aria-hidden="true">
  <use xlink:href="#icon-wanopamscloudappxiaochengxuyunyingyong"></use>
</svg>

添加新图标

需要添加新图标时，到图标库中把想要的图标加入项目，再次下载并覆盖到vue项目即可