标签：阿里巴巴 项目 图标库 iconfont iview 入库 图标

使用阿里巴巴的图标库拓展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 作为其类名。否则无法识别图片

标签：阿里巴巴,项目,图标库,iconfont,iview,入库,图标
来源： https://blog.csdn.net/zhongzk69/article/details/94900608

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。