@TOC图标
图标库
http://www.fontawesome.com.cn/faicons/

阿里巴巴矢量图标库
阿里巴巴矢量图标库：https://www.iconfont.cn/

图标库收藏
阿里矢量图标库：阿里矢量图标库
easyicon  ：easyicon
ThinkCMF：ThinkCMF
爱看图标网：爱看图标网

使用阿里巴巴的图标库拓展iview图标库

2019年05月09日 10:15:34 追逐、 阅读数 27

1、前言

现在项目中使用的图标库，如果不是基于某些特定的业务，基本上都可以在阿里巴巴图标库中找到相应的图标，这样大大减少了UI的压力，我们自己需要什么图标，自己可以去创建项目，将需要的图标归类打包到项目中，然后实现下载，直接引用即可。

二、创建图标库

1 进入图标库官网，注册登录（有github账号可以直接登录），然后创建一个项目：



2 然后点击创建项目



3 去首页搜索对应的图标，然后点击添加入库，即可完成入库操作。



4入库之后的图标还需要添加到项目中，点击购物车选项,可以看到内部有我们刚刚添加入库的图标：



5 添加至我们刚才的项目



6 依此法弄2-3个图标，回到刚才的项目，打包进行下载。



7 下载的文件结构如下。



三、在普通项目中引用文件

最基本的用法，假如你没有用任何前端框架，纯html和jquery，那么你只需要将上述资源文件放在你的项目中，然后引入上述文件的iconfont.css和iconfont.js即可。在你的项目中，你就可以按照demo_index.html中的方式使用图标了。

四、在iview中拓展Icon组件

在vue项目中，你首先要在main.js中使用图标文件



这样假如你的项目中使用iview，那么你就可以直接使用你自己定义的图标了~语法如下

  <Icon custom="iconfont icontriangle-right"></Icon>


1

注意一定要填写iconfont 作为其类名。否则无法识别图片