Flutter图标字体转换插件iconfont_convert的使用

Flutter图标字体转换插件iconfont_convert的使用

安装

在项目中安装（推荐）

在 pubspec.yaml 中添加：

dev_dependencies:
  iconfont: ^1.0.0

运行方式：

flutter packages pub run iconfont_convert

全局安装

flutter pub global activate iconfont_convert

运行方式：

iconfont-convert

参数：

-c  --config     config file path
                 (defaults to "pubspec.yaml")
-h, --help       help

使用

在 pubspec.yaml 中添加配置：

# pubspec.yaml
iconfont:
  - icons:
    - url: //at.alicdn.com/t/c/font_3892650_94qckhszrmg.css
      icon_name: test_icons
      icon_class: TestIcons
      #font_family: other_test_icons #可以用来覆盖默认的 Font Family
      #package: other_package #在其他 package 中定义图标时记得添加包名
    font_assets_path: assets/iconfont/
    icon_class_path: lib/icons/

运行 iconfont-convert

或者使用独立配置文件 iconfont.yaml：

# iconfont.yaml
- icons:
  - url: //at.alicdn.com/t/c/font_3892650_94qckhszrmg.css
    icon_name: test_icons
    icon_class: TestIcons
  font_assets_path: assets/iconfont/
  icon_class_path: lib/icons/

运行 iconfont-convert --config iconfont.yaml

常见问题

1. 参考官方文档解决 iconfont command not found。
2. 多个项目中的字体名可能会冲突，可以使用 font_family 来设置不同的字体名。推荐在 iconfont.cn 的项目设置中修改 Font Family。

感谢

• iconfont_flutter
• voca.js

示例代码

example/lib/main.dart

import 'package:flutter/material.dart';
import 'package:iconfont_convert_example/icons/test_icons.dart'; // 引入测试图标类
import 'package:other_package/icons/other_test_icons.dart'; // 引入其他包中的图标类

void main() {
  runApp(const MyApp()); // 运行应用
}

class MyApp extends StatefulWidget {
  const MyApp({super.key}); // 构造函数

  [@override](/user/override)
  State<MyApp> createState() => _MyAppState(); // 创建状态对象
}

class _MyAppState extends State<MyApp> {
  int _currentTabIndex = 0; // 当前选中的标签页索引

  void _onItemTapped(int index) { // 底部导航栏点击事件处理
    setState(() {
      _currentTabIndex = index;
    });
  }

  final _previewPages = [
    const TestIconsPreview(), // 测试图标预览页面
    const OtherTestIconsPreview(), // 其他包中的图标预览页面
  ];

  [@override](/user/override)
  Widget build(BuildContext context) { // 构建UI
    return MaterialApp(
      title: 'Iconfont Convert Demo', // 应用标题
      theme: ThemeData(
        primarySwatch: Colors.blue, // 主色调
      ),
      home: Scaffold(
        body: _previewPages[_currentTabIndex], // 显示当前选中的预览页面
        bottomNavigationBar: BottomNavigationBar(
          currentIndex: _currentTabIndex, // 当前选中的底部导航栏项
          onTap: _onItemTapped, // 点击事件处理器
          items: const [
            BottomNavigationBarItem(
              icon: Icon(TestIcons.appstore), // 图标
              label: 'Example Icon', // 文本标签
            ),
            BottomNavigationBarItem(
              icon: Icon(OtherTestIcons.faxian), // 图标
              label: 'Other Package Icon', // 文本标签
            ),
          ],
        ),
      ),
    );
  }
}