Flutter Iconfont 的使用

39 min read

下载资源

选择iconfont.cssiconfont.ttf导入Flutter项目中,路径为assets/fonts/

配置yaml

pubsepc.yaml文件中加载iconfont.ttf

flutter:
  uses-material-design: true

  fonts:
    - family: IconFont
      fonts:
        - asset: assets/fonts/iconfont.ttf

转换文件

使用 https://bytenote.net/iconfont

生成的文件内容:

import 'package:flutter/widgets.dart';
class IconFont{
	static const String _family = 'iconfont';
	IconFont._();
	static const IconData icon_a_ziyuan5 = IconData(0xe61f, fontFamily: _family);
	static const IconData icon_a_ziyuan4 = IconData(0xe61e, fontFamily: _family);
	static const IconData icon_a_ziyuan3 = IconData(0xe61d, fontFamily: _family);
	static const IconData icon_a_ziyuan2 = IconData(0xe61c, fontFamily: _family);
	static const IconData icon_a_ziyuan1 = IconData(0xe61b, fontFamily: _family);
	static const IconData icon_quanping = IconData(0xe8fa, fontFamily: _family);
	static const IconData icon_tuichuquanping = IconData(0xe8fb, fontFamily: _family);
	static const IconData icon_caigouguanli = IconData(0xe60f, fontFamily: _family);
	static const IconData icon_nengxiaofenxiyujixiaokaohe = IconData(0xe610, fontFamily: _family);
	static const IconData icon_cangkuguanli = IconData(0xe611, fontFamily: _family);
	static const IconData icon_renyuanguanli = IconData(0xe612, fontFamily: _family);
	static const IconData icon_jifeiyuyufufei = IconData(0xe613, fontFamily: _family);
	static const IconData icon_shenpiguanli = IconData(0xe614, fontFamily: _family);
	static const IconData icon_weixiuguanli = IconData(0xe615, fontFamily: _family);
	static const IconData icon_shebeitaizhang = IconData(0xe616, fontFamily: _family);
	static const IconData icon_baoyangguanli = IconData(0xe617, fontFamily: _family);
	static const IconData icon_zhishikuguanli = IconData(0xe618, fontFamily: _family);
	static const IconData icon_yunweigaojing = IconData(0xe619, fontFamily: _family);
	static const IconData icon_xunjianguanli = IconData(0xe61a, fontFamily: _family);
	static const IconData icon_logo = IconData(0xe60e, fontFamily: _family);
	static const IconData icon_dilishujuzhongxin = IconData(0xe60a, fontFamily: _family);
	static const IconData icon_shipinshujuzhongxin = IconData(0xe605, fontFamily: _family);
	static const IconData icon_nengyuanshujuzhongxin = IconData(0xe606, fontFamily: _family);
	static const IconData icon_zhihuitiaodu = IconData(0xe608, fontFamily: _family);
	static const IconData icon_zhinengguankong = IconData(0xe60b, fontFamily: _family);
	static const IconData icon_zhihuiyunwei = IconData(0xe60d, fontFamily: _family);
}

项目使用

import 'package:ejzc_app_flutter/components/iconfont.dart';

  SizedBox(
    width: 70,
    child: Row(
      mainAxisAlignment: MainAxisAlignment.spaceAround,
      children: const [
        Icon(
          IconFont.icon_a_ziyuan3,
          color: Colors.purple,
          size: 14,
        ),
        Icon(
          IconFont.icon_a_ziyuan4,
          color: Colors.redAccent,
          size: 14,
        ),
        Icon(
          IconFont.icon_a_ziyuan5,
          color: Colors.blueAccent,
          size: 14,
        ),
      ],
    ),
  ),