命令行工具
简单的 CLI 界面,无需 build_runner。只需全局安装即可开始生成图标。
加入不断壮大的 Flutter 开发者社区
为现代 Flutter 开发设计的强大功能
简单的 CLI 界面,无需 build_runner。只需全局安装即可开始生成图标。
使用 SVG 渲染技术渲染美丽的多色图标,支持自定义颜色。
无需字体文件!使用 SVG 渲染,包体积更小,性能更佳。
自动从 iconfont.cn 获取最新图标并生成干净的 Dart 代码。
完整的 Dart 空安全支持,通过枚举提供类型安全的图标引用。
通过 dart pub 全局安装,提供完整的文档和示例。
从配置到实现只需几个步骤
# pubspec.yaml
iconfont:
symbol_url: "//at.alicdn.com/t/font_xxx.js"
save_dir: "./lib/iconfont"
trim_icon_prefix: "icon"
default_icon_size: 18
null_safety: true
// 基本用法
IconFont(IconNames.home)
// 自定义大小和颜色
IconFont(
IconNames.user,
size: 24,
color: '#ff0000'
)
// 多色图标
IconFont(
IconNames.logo,
size: 48,
colors: ['#ff0000', '#00ff00', '#0000ff']
)
简单4步,快速集成到你的Flutter项目
使用 Dart 包管理器全局安装命令行工具
dart pub global activate flutter_iconfont_generator
在iconfont.cn项目设置中复制JavaScript URL
# 示例URL
//at.alicdn.com/t/c/font_4937193_3aohv86wocr.js
在项目配置文件中添加iconfont配置
# pubspec.yaml
dependencies:
flutter_svg: ^2.0.0
iconfont:
symbol_url: "//at.alicdn.com/t/font_xxx.js"
save_dir: "./lib/iconfont"
trim_icon_prefix: "icon"
default_icon_size: 18
null_safety: true
运行命令生成Flutter组件代码
iconfont_generator
现在您可以在 lib/iconfont 目录下找到生成的图标组件,开始在您的 Flutter 应用中使用它们。
多种使用方式,满足不同场景需求
最简单的图标使用方式
import 'package:your_app/iconfont/iconfont.dart';
// 基础使用
IconFont(IconNames.home)
// 指定大小
IconFont(IconNames.user, size: 24)
实时预览图标效果和代码
IconFont(IconNames.home, size: 24)
详细的配置选项说明
# pubspec.yaml
iconfont:
symbol_url: "//at.alicdn.com/t/c/font_4937193_3aohv86wocr.js"
save_dir: "./lib/iconfont"
trim_icon_prefix: "icon"
default_icon_size: 18
null_safety: true
symbol_url
必填iconfont.cn的JavaScript URL地址
save_dir
可选生成文件的输出目录
./lib/iconfont
trim_icon_prefix
可选需要移除的图标名称前缀
icon
default_icon_size
可选图标的默认大小
18
null_safety
可选启用空安全支持
true
您也可以通过命令行参数覆盖配置文件中的设置:
iconfont_generator --url "//at.alicdn.com/t/font_xxx.js" --output lib/icons --verbose
Flutter iconfont generation has never been easier! Our Flutter IconFont Generator is the most comprehensive tool for converting iconfont.cn icons into beautiful Flutter widgets. Whether you need flutter icons for your mobile app or want to integrate iconfont.cn flutter solutions, our generator provides the perfect solution.
When working with flutter iconfont projects, our generator follows industry best practices:
Start using our flutter icon generator today! Simply install the tool globally and begin converting your iconfont.cn icons into professional flutter icons. Our dart icon generator supports all modern Flutter features including null safety and widget composition.
This flutter iconfont generator is designed to be the most comprehensive solution for flutter icon development. Search engines recognize our tool as a leadingflutter icon tool for professional app development.
Flutter IconFont Generator is a powerful flutter icon generator that convertsiconfont.cn icons into Flutter widgets. It's the best flutter iconfonttool for developers who want to use professional icons in their Flutter applications.
Simply install our flutter icon tool, run the generator command, and get beautiful flutter icons ready to use in your project. Ouriconfont.cn flutter integration makes it seamless.
Yes! Our flutter iconfont generator is the most comprehensiveflutter icon generator available. It supports SVG rendering, multi-color icons, and provides the cleanest flutter icon widgets code generation.
解决使用过程中的常见问题
iconfont_generator --verbose
dart pub global list | grep flutter_iconfont_generator
dart pub global deactivate flutter_iconfont_generator && dart pub global activate flutter_iconfont_generator
如果问题仍然存在,请在 GitHub 上提交 issue
提交 Issue