给uni-icons添加自定义图标

时间:2024-03-03 08:55:29

背景

当一个项目对界面有要求的时候,uni-app中的图标库远远不及所需,倘若都使用静态资源调用,对其大小颜色的控制又不太尽人意,最方便的就是更改uni-icons自定义字体的链接。记录该过程方便以后查看。

知识储备

  • 【ttf文件】:一种字体文件表示方式,将字体轮廓转换成曲线,可以对曲线进行填充,制成各种颜色和效果等,这也是为什么可以对图标进行颜色和大小的更改。
  • 【加载自定义字体】:通过Weex提供的DOM.addRule进行加载,以下是官方介绍:

Weex官方介绍addRule

步骤

  1. 将自定义的图标上传到【阿里字体图标库】,这里要以SVG格式上传。不管是自制的图标,还是借鉴的图标,都需要将代码下载下来,接下来将用到ttf文件
  • 上传自制图标

  • 下载字体代码

  1. 进入uni-app官方图标界面,打开控制台Network模块,过滤出字体的请求信息,点击下载ttf文件
  • 截获的字体文件
  1. 找一个在线字体编辑器(我用的是FontStore字体编辑器),打开uno-icons的ttf文件,上传自定义的ttf文件,这时在图标界面就能看见自定义的图标,再将添加完毕的字体文件以ttf的格式下载出来
  • 打开uni-app图标库

  • 下载更新后的ttf文件

  1. 获取下载的ttf文件,将项目中的文件替换掉,若以base64读取,通过在线Base64解码器和编码器将文件编码成base64码后在进行替换,注意去掉base64码的空格和换行(使用Notepad,很方便)
  • 编码过程

  • 去空格和换行

  1. 将【字体编辑器】上传图标的Unicode码添加到项目中,以便调用
  • 添加Unicode码

参考

godferyZhu前辈的uni-icons中添加自定义图标

相关文章