339 lines
7.2 KiB
Markdown
339 lines
7.2 KiB
Markdown
# YX Icon Fonts
|
||
|
||
学习官OA系统图标字体库，基于iconfont.ttf和iconfont.json生成的Flutter图标库。
|
||
|
||
## 特性
|
||
|
||
- 🎨 包含50+个精心设计的图标
|
||
- 📱 支持Flutter应用
|
||
- 🎯 类型安全的图标使用
|
||
- 📦 轻量级，无额外依赖
|
||
- 🔧 易于集成和使用
|
||
- ⚡ 自动化生成脚本
|
||
|
||
## 安装
|
||
|
||
在您的`pubspec.yaml`文件中添加依赖：
|
||
|
||
```yaml
|
||
dependencies:
|
||
yx_icon_fonts: ^1.0.0
|
||
```
|
||
|
||
然后运行：
|
||
|
||
```bash
|
||
flutter pub get
|
||
```
|
||
|
||
## 使用方法
|
||
|
||
### 基本用法
|
||
|
||
```dart
|
||
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组件
|
||
|
||
```dart
|
||
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中使用
|
||
|
||
```dart
|
||
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
|
||
|
||
## 示例
|
||
|
||
运行示例应用查看所有图标：
|
||
|
||
```bash
|
||
cd example
|
||
flutter run
|
||
```
|
||
|
||
## 自定义
|
||
|
||
### 修改图标大小
|
||
|
||
```dart
|
||
Icon(
|
||
YXIconFonts.iconMsgContacts,
|
||
size: 48, // 自定义大小
|
||
)
|
||
```
|
||
|
||
### 修改图标颜色
|
||
|
||
```dart
|
||
Icon(
|
||
YXIconFonts.iconMsgContacts,
|
||
color: Colors.red, // 自定义颜色
|
||
)
|
||
```
|
||
|
||
### 在主题中使用
|
||
|
||
```dart
|
||
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`)
|
||
- ✅ 错误检查和验证
|
||
- 🎨 彩色输出和进度提示
|
||
|
||
#### 使用方法
|
||
|
||
```bash
|
||
# 生成所有文件（默认）
|
||
./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` | 显示帮助信息 | - |
|
||
|
||
#### 使用示例
|
||
|
||
```bash
|
||
# 首次使用，确保脚本有执行权限
|
||
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. 运行生成脚本：
|
||
```bash
|
||
./generate.sh icons
|
||
```
|
||
4. 更新版本号
|
||
|
||
### 开发工作流
|
||
|
||
1. **修改图标源文件**：
|
||
- 更新 `fonts/iconfont.ttf`
|
||
- 更新 `iconfont.json`
|
||
|
||
2. **生成代码**：
|
||
```bash
|
||
./generate.sh
|
||
```
|
||
|
||
3. **测试**：
|
||
```bash
|
||
flutter analyze
|
||
flutter test
|
||
cd example && flutter run
|
||
```
|
||
|
||
4. **发布**：
|
||
```bash
|
||
flutter pub publish
|
||
```
|
||
|
||
## 许可证
|
||
|
||
MIT License
|
||
|
||
## 贡献
|
||
|
||
欢迎提交Issue和Pull Request！
|
||
|
||
## 更新日志
|
||
|
||
### 1.0.0
|
||
- 初始版本
|
||
- 包含50+个图标
|
||
- 支持Flutter 3.0+
|
||
- 添加自动化生成脚本
|
||
- 优化项目结构和文档 |