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就行
在这里插入图片描述
(2)一直点【进】就行,完成以后
在这里插入图片描述
转完要选择格式,默认是.ai,选完拖拽随便放。
注意:转完以后还不能上传,因为这个工具直接给图片加了一个白色背景(这个坑很深·····)
所以还要用到一个工具,去掉多余的图层

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

工具图标

4.上传到阿里巴巴

在这里插入图片描述
上传好以后可以修改样式,变换颜色。批量加入购物车,下载就行
在这里插入图片描述

5.导入iview+vue项目中

解压后把这五个文件夹放到iview中
在这里插入图片描述
文件位置
在这里插入图片描述
注意:要修改iconfont.css中的路径
在这里插入图片描述

6.引用

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

  • 6
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值