Flutter for OpenHarmony：icon_font_generator — 自动化图标字体工作流
欢迎加入开源鸿蒙跨平台社区：https://openharmonycrossplatform.ZEEKLOG.net。
前言
在鸿蒙（OpenHarmony）应用中，使用 IconFont 是优化性能与包体积的最佳实践。icon_font_generator 命令行工具能将 SVG 图标一键转换为 .ttf 字体文件并生成 Dart 引用类，大幅提升了图标资产管理的自动化程度。
一、核心价值
1.1 基础概念
图标字体的本质是将矢量图映射到字体的特定“码点”（Glyph）上。
引用名字
SVG 图标文件夹
icon_font_generator
HarmonyIcons.ttf: 字体文件
harmony_icons.dark: 代码类
IconData: 名字对应码点
鸿蒙 UI 页面
1.2 进阶概念
- 自动化命名：根据 SVG 文件名（如
home_active.svg）自动生成 Dart 变量名（static const homeActive = ...）。 - 零配置成本：无需开启庞大的第三方设计网站，在鸿蒙工程本地即可完成闭环。
二、核心 API / 组件详解
2.1 安装与运行
这是一个纯粹的 CLI 工具。推荐作为开发依赖加入当前项目，以便团队协作和 CI/CD 环境：
# 作为开发依赖安装到当前项目 flutter pub add --dev icon_font_generator # 在鸿蒙工程根目录执行一键转换（注意可执行文件名称） dart run icon_font_generator:generator assets/svgs assets/fonts/MyIcons.ttf --class-name MyIcons --output-class-file lib/src/icons/my_icons.dart 2.2 在鸿蒙工程中注册字体
修改 pubspec.yaml：
flutter:fonts:-family: MyIcons fonts:-asset: assets/fonts/MyIcons.ttf 
三、场景示例
3.1 场景一：鸿蒙级项目的“统一度量衡”
当设计师新增了 10 个业务图标时，开发者只需将 SVG 丢入文件夹，跑一次命令，即可在代码中直接调用，完全不需要管 Unicode。
// 💡 技巧：生成的代码通常如下，极其直观import'package:your_app/gen/my_icons.dart';WidgetbuildIcon(){returnconstIcon(MyIcons.scanner_filled, color:Colors.blue);}
四、OpenHarmony 平台适配挑战
4.1 字体文件的实时加载与缓存
在鸿蒙特定的元服务（元服务卡片）中，字体文件的大小直接影响加载延迟。
✅ 适配策略建议：
- 子集化生成：
icon_font_generator只包含你目录下的图标，确保了.ttf文件的极致精简。 - 预览校验：由于 SVG 转换为字体 Glyphs 时可能会出现路径闭合问题。建议在运行完命令后，通过鸿蒙预览器快速查看一次图标是否有“实心”或“缺失”现象。
# 💡 技巧：使用 --output-class-file 指定生成代码的位置，方便鸿蒙工程管理 dart run icon_font_generator:generator assets/svgs assets/fonts/MyIcons.ttf --class-name MyIcons --output-class-file lib/src/icons/my_icons.dart 
五、综合实战示例代码
这是一个演示如何利用生成的图标字体构建鸿蒙侧边栏导航的示例：
import'package:flutter/material.dart';// 假设已通过工具生成了 HarmonyIcons 类// import 'package:app/icons/harmony_icons.dart';classHarmonyDrawerMenuextendsStatelessWidget{constHarmonyDrawerMenu({super.key});@overrideWidgetbuild(BuildContext context){returnDrawer( child:ListView( children:[constDrawerHeader(child:Text('鸿蒙业务中心')),_buildItem('数据看板',Icons.dashboard),// 💡 以后可替换为 HarmonyIcons.dashboard_buildItem('分布式流转',Icons.sync_alt),_buildItem('设置',Icons.settings),],),);}Widget_buildItem(String title,IconData icon){returnListTile( leading:Icon(icon, color:Colors.blue), title:Text(title), onTap:(){},);}}六、总结
icon_font_generator 彻底终结了“人工维护图标 Unicode 码”的历史。它让 UI 资源到代码的转化过程变得极其工业化、自动化。
✅ 核心建议：
- 建立专门的
assets/icons_src文件夹存放原始 SVG。 - 将生成命令加入到鸿蒙项目的
pre-commit钩子或简单的shell脚本中，实现真正的一键同步。
