iview 如何建立图标库?前端开发,

我是根据自己的实际项目写的流程,如有不一样请谅解····

1. 首先准备一套png/jpg图标

2. png/jpg要转成.svg格式的失量图标

(1)在线转不太好用:这是我自己找的一个工具Vector Magic破解版(能批量操作)
https://pan.baidu.com/s/1xyKXhuKTl7-eOWA4DCNctA 提取码: h1wm
破解方法 解压后先点KEYGEN 1.15.exe 再打开vmde.exe就行
iview 如何建立图标库?前端开发,_第1张图片
(2)一直点【进】就行,完成以后
iview 如何建立图标库?前端开发,_第2张图片
转完要选择格式,默认是.ai,选完拖拽随便放。
注意:转完以后还不能上传,因为这个工具直接给图片加了一个白色背景(这个坑很深·····)
所以还要用到一个工具,去掉多余的图层

3.下载Adobe Illustrator 删掉svg中多余的图层

工具图标

4.上传到阿里巴巴

iview 如何建立图标库?前端开发,_第3张图片
上传好以后可以修改样式,变换颜色。批量加入购物车,下载就行
iview 如何建立图标库?前端开发,_第4张图片

5.导入iview+vue项目中

解压后把这五个文件夹放到iview中
iview 如何建立图标库?前端开发,_第5张图片
文件位置
iview 如何建立图标库?前端开发,_第6张图片
注意:要修改iconfont.css中的路径
在这里插入图片描述

6.引用

用的时候要看一下iview的自定义图标
https://www.iviewui.com/components/icon
在这里插入图片描述

你可能感兴趣的:(iview,前端,图标库,css样式,项目开发,iview自定义图标)