我是根据自己的实际项目写的流程,如有不一样请谅解····
1. 首先准备一套png/jpg图标
2. png/jpg要转成.svg格式的失量图标
(1)在线转不太好用:这是我自己找的一个工具Vector Magic破解版(能批量操作)
https://pan.baidu.com/s/1xyKXhuKTl7-eOWA4DCNctA 提取码: h1wm
破解方法 解压后先点KEYGEN 1.15.exe 再打开vmde.exe就行

(2)一直点【进】就行,完成以后

转完要选择格式,默认是.ai,选完拖拽随便放。
注意:转完以后还不能上传,因为这个工具直接给图片加了一个白色背景(这个坑很深·····)
所以还要用到一个工具,去掉多余的图层
3.下载Adobe Illustrator 删掉svg中多余的图层

4.上传到阿里巴巴

上传好以后可以修改样式,变换颜色。批量加入购物车,下载就行

5.导入iview+vue项目中
解压后把这五个文件夹放到iview中

文件位置

注意:要修改iconfont.css中的路径

6.引用
用的时候要看一下iview的自定义图标
https://www.iviewui.com/components/icon

本文详细介绍了一套从PNG/JPG图标转换至SVG格式,并利用VectorMagic与Adobe Illustrator进行背景去除及图层优化的完整流程。最后,通过阿里巴巴平台上传并调整图标样式,批量下载,最终在iview+vue项目中导入使用。

1295

被折叠的 条评论
为什么被折叠?



