YX Icon Fonts

学习官OA系统图标字体库，基于iconfont.ttf和iconfont.json生成的Flutter图标库。

特性

• 🎨 包含50+个精心设计的图标
• 📱 支持Flutter应用
• 🎯 类型安全的图标使用
• 📦 轻量级，无额外依赖
• 🔧 易于集成和使用
• ⚡ 自动化生成脚本

安装

在您的pubspec.yaml文件中添加依赖：

dependencies:
  yx_icon_fonts: ^1.0.0

然后运行：

flutter pub get

使用方法

基本用法

import 'package:flutter/material.dart';
import 'package:yx_icon_fonts/yx_icon_fonts.dart';

class MyWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Icon(
      YXIconFonts.iconMsgContacts,
      size: 24,
      color: Colors.blue,
    );
  }
}

使用YXIcon组件

import 'package:flutter/material.dart';
import 'package:yx_icon_fonts/yx_icon_fonts.dart';

class MyWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return YXIcon(
      YXIconFonts.iconMsgContacts,
      size: 24,
      color: Colors.blue,
    );
  }
}

在AppBar中使用

AppBar(
  title: Text('我的应用'),
  actions: [
    IconButton(
      icon: Icon(YXIconFonts.iconMsgSearch),
      onPressed: () {
        // 搜索操作
      },
    ),
  ],
)

可用图标

消息相关图标

• YXIconFonts.iconMsgContacts - 联系人
• YXIconFonts.iconMsgViedo - 视频
• YXIconFonts.iconMsgSearch - 搜索
• YXIconFonts.iconMsgCall - 通话
• YXIconFonts.iconMsgPhoto - 照片
• YXIconFonts.iconMsgImg - 图片
• YXIconFonts.iconMsgFile - 文件

箭头相关图标

• YXIconFonts.icon32Arrowright - 右箭头32
• YXIconFonts.icon44Arrowleft - 左箭头44
• YXIconFonts.icon44Arrowright - 右箭头44
• YXIconFonts.icon24Arrowleft - 左箭头24
• YXIconFonts.icon24Arrowdown - 下箭头24
• YXIconFonts.icon44Arrowright1 - 右箭头44(1)

编辑相关图标

• YXIconFonts.icon44Edit - 编辑44
• YXIconFonts.icon24Edit - 编辑24
• YXIconFonts.icon36Editline - 编辑线36

个人中心相关图标

• YXIconFonts.icon44MePassword - 密码
• YXIconFonts.icon44MeHelp - 帮助
• YXIconFonts.icon44MeVersion - 版本
• YXIconFonts.icon44MePrivacy - 隐私
• YXIconFonts.icon44MeUser - 用户
• YXIconFonts.icon44MeSafe - 安全
• YXIconFonts.icon44MePhone - 手机

功能图标

• YXIconFonts.icon32Filter - 筛选
• YXIconFonts.icon36Question - 问题
• YXIconFonts.icon36Onlysee - 仅查看
• YXIconFonts.icon36Hint - 提示
• YXIconFonts.icon24Switch - 切换

操作图标

• YXIconFonts.icon44Delete - 删除44
• YXIconFonts.icon36Delete - 删除36
• YXIconFonts.icon24Delete - 删除24
• YXIconFonts.icon44More - 更多
• YXIconFonts.icon44More2 - 更多2
• YXIconFonts.icon24Copy - 复制
• YXIconFonts.icon44Share - 分享
• YXIconFonts.icon44Calendar - 日历

添加相关图标

• YXIconFonts.icon24Add - 添加24
• YXIconFonts.icon24Plus - 加号
• YXIconFonts.icon44Add - 添加44
• YXIconFonts.icon32Add - 添加32

消息功能图标

• YXIconFonts.icon56Msgadd - 消息添加
• YXIconFonts.icon56Msgface - 消息表情
• YXIconFonts.icon56Msgvoice - 消息语音

其他图标

• YXIconFonts.icon36Team - 团队
• YXIconFonts.icon32Student - 学生
• YXIconFonts.icon44Keyboard - 键盘
• YXIconFonts.icon24Minus - 减号
• YXIconFonts.icon44Quitlite - 退出轻量
• YXIconFonts.icon32Quit - 退出32
• YXIconFonts.icon44Quit - 退出44

示例

运行示例应用查看所有图标：

cd example
flutter run

自定义

修改图标大小

Icon(
  YXIconFonts.iconMsgContacts,
  size: 48, // 自定义大小
)

修改图标颜色

Icon(
  YXIconFonts.iconMsgContacts,
  color: Colors.red, // 自定义颜色
)

在主题中使用

Theme(
  data: Theme.of(context).copyWith(
    iconTheme: IconThemeData(
      color: Colors.blue,
      size: 24,
    ),
  ),
  child: Icon(YXIconFonts.iconMsgContacts),
)

开发

自动化生成脚本

项目提供了 generate.sh 脚本来自动化图标数据的生成过程。

脚本功能

• 🔄 自动生成图标数据文件 (lib/src/yx_icon_fonts_data.dart)
• 📝 自动生成示例文件 (example/lib/icons.dart)
• ✅ 错误检查和验证
• 🎨 彩色输出和进度提示

使用方法

# 生成所有文件（默认）
./generate.sh

# 只生成图标数据
./generate.sh icons

# 只生成示例文件
./generate.sh example

# 显示帮助信息
./generate.sh help

脚本选项

选项	功能	生成文件
all (默认)	生成所有文件	lib/src/yx_icon_fonts_data.dart + example/lib/icons.dart
icons	只生成图标数据	lib/src/yx_icon_fonts_data.dart
example	只生成示例文件	example/lib/icons.dart
help	显示帮助信息	-

使用示例

# 首次使用，确保脚本有执行权限
chmod +x generate.sh

# 生成所有文件
./generate.sh

# 只更新图标数据（当修改了 iconfont.json 时）
./generate.sh icons

# 只更新示例文件（当修改了图标数据时）
./generate.sh example

脚本输出示例

ℹ️  开始生成所有文件...

ℹ️  正在生成图标数据...
✅ 图标数据生成完成

ℹ️  正在生成示例文件...
✅ 示例文件生成完成

✅ 所有文件生成完成！

项目结构

yx_icon_fonts/
├── lib/
│   ├── yx_icon_fonts.dart          # 主库文件
│   ├── main.dart                   # 库入口文件
│   └── src/
│       ├── yx_icon_data.dart       # 图标数据类
│       ├── yx_icon.dart            # 图标组件
│       └── yx_icon_fonts_data.dart # 图标常量定义（自动生成）
├── fonts/
│   └── iconfont.ttf                # 字体文件
├── scripts/
│   ├── generate_icons.dart         # 图标数据生成脚本
│   ├── generate_example.dart       # 示例文件生成脚本
│   └── utils.dart                  # 共享工具函数
├── example/
│   └── lib/
│       ├── main.dart               # 示例应用
│       └── icons.dart              # 示例图标文件（自动生成）
├── generate.sh                     # 自动化生成脚本
├── iconfont.json                   # 图标配置数据
├── pubspec.yaml                    # 包配置
└── README.md                       # 项目文档

更新图标

1. 替换 fonts/iconfont.ttf 文件
2. 更新 iconfont.json 文件
3. 运行生成脚本：

   ./generate.sh icons
   

4. 更新版本号

开发工作流

1. 修改图标源文件：

   • 更新 fonts/iconfont.ttf
   • 更新 iconfont.json

2. 生成代码：

   ./generate.sh
   

3. 测试：

   flutter analyze
   flutter test
   cd example && flutter run
   

4. 发布：

   flutter pub publish
   

许可证

MIT License

贡献

欢迎提交Issue和Pull Request！

更新日志

1.0.0

• 初始版本
• 包含50+个图标
• 支持Flutter 3.0+
• 添加自动化生成脚本
• 优化项目结构和文档