figma移植私有icon至lvgl

本文主要讲述将figma的icon导入至lvgl的iconfont,及怎么使用。

• A figma导入阿里巴巴个人矢量库
• B 个人矢量库导入lvgl
• C 使用加入的icon

A figma导入阿里巴巴个人矢量库

---

• 首先先将figma的icon图片导出为svg格式
  

• 打开 阿里巴巴矢量库，注册登入，进入个人空间，新建项目，导入图标，

• 将之前从figma导出svg文件上传，（有不合规的如国旗等显示失败）。

• 如果上传的图片不违规，但是显示为白色，是因为你的图标主体为白色，选中去除颜色提交。（颜色在后面可以重新设置）
  

• 上传之后可以看到你的icon图标，到现在你的图片成功上传到你的个人图标库了，最好设置为私有图标。
  在你的图标库里.
  

B 个人矢量库导入lvgl

---

• 从个人矢量库导出。
  在图标库里批量操作选择你要导出的图标，加入购物车。 将需要的图标加入完购物车，点击购物车，下载代码
  

• 下载的压缩包打开有demo_index.html和iconfont.ttf文件
  打开demo_index.html，可以看到所有的图标的unicode码，我们需要将unicode转成lvgl可使用utf-8编码的宏，这里提供一个脚本和在线转化网站，根据需要自己选择.
  在线网站填充unicode码在前面加四个0，否则转换错误
  

脚本使用

• 打开demo_index.html，选上所有控件，复制粘贴至data.txt。
  

• 脚本网站：https://blog.csdn.net/weixin_50035676/article/details/136037107?spm=1001.2014.3001.5502
  执行python3 UnicodeToUtf_8.py data.txt后，输出lvgl可直接使用的宏。
  

• 从阿里导出的压缩包里的xxx.ttf文件，通过https://lvgl.io/tools/fontconverter lvgl的ttf转c.
  

• 将转化的xxx.c文件丢入/lvgl/src/font/。新建同名xxx.h文件

    #ifndef LVGL_ICON_H
    #define LVGL_ICON_H

    #ifdef __cplusplus
    extern "C" {
    #endif

    #include "lvgl/lvgl.h"

    LV_FONT_DECLARE(lvgl_icon60);

    #ifdef __cplusplus
    }
    #endif

• 再lv_font.mk加入要你的.c文件。
  在lv_symbol_def.h加入通过脚本解析的data.txt数据

    /*******************************************************************************
    * Opts: Private icons
    ******************************************************************************/
    #define LVGL_ICON_PLUS			"\xEE\x98\x9F"    
    #define LVGL_ICON_NET           "\xEE\x9B\x87" 

C 使用加入的icon

---

    //使用图标字库前先初始化
    LV_FONT_DECLARE(lvgl_icon60);
    //指定图库
    lv_obj_set_style_text_font(btn_label, &lvgl_icon60, LV_PART_MAIN);
    //调用宏        
    lv_label_set_text(btn_label, LVGL_ICON_NET);