uniapp uni-icons组件自定义图标

本文指导如何找到uni-icons组件,从阿里图标库获取SVG文件,通过fontstore工具导入并编辑,自定义ttf文件,添加到icons.js和uniicons.css中实现个性化图标。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

1、找到自己的uni-icons组件位置

2、去阿里图标下载自己需要的svg格式的图标

3、

在线字体编辑器-JSON在线编辑器(fontstore)

  • 将自己的uni-icons组件中的uniicons.ttf在fontstore中打开,
  • fontstore工具栏点击导入svg

  • 点击图片上的标记按钮,出车险以下情况,根据自己的情况编辑比例

  • 鼠标左键点击修改字形信息

点击

  • 保存就会看到右下角的图标名称和unicode发生变化

  • 导出ttf后缀文件,替换原本的的uniicons.ttf(可以现将原本的文件备份一下,以免出现问题)

  • 在icons.js文件中加上自己的自定义图标名称

  • 在uniicons.css的文件中加上自定义的图标代码

这样就完成了,可以取试用一下了。

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值