阿里妈妈MUX倾力打造的矢量图标管理、交流平台。
设计师将图标上传到 iconfont 平台，用户可以自定义下载多种格式的icon，平台也可将图标转换为字体，便于前端工程师自由调整与调用。
官网在右边 → iconfont-阿里巴巴矢量图标库

一.下载和配置Iconfont文件

第一步：从 iconfont 平台选择要使用到的图标，并下载至本地；

iconfont我的项目页面

第二步: 将下载好的文件放入flutter项目下assets文件夹(没有需要自己建立,和lib同一路径)

文件目录/assets/font/iconfont

第三步:在pubspec.yaml配置路径 很重要重要!!!!

配置文件时候一定要控制好缩进要不然你的图标会显示一群 方块
配置文件时候一定要控制好缩进要不然你的图标会显示一群 方块
配置文件时候一定要控制好缩进要不然你的图标会显示一群 方块

  #位置一定要对应好否则不显示 -.-||
  fonts:
    - family: iconfont
      fonts:
        - asset: assets/font/iconfont/iconfont.ttf

二.iconfont使用

//iconfont在flutter的使用方式分两种一种是以iconData形式,一种是以文字形式的
//iconfont 用作icon的时候
Icon(
    IconData(
      iconPoint,//这里就是iconfont中的图标 注意要在这里转换成 0xe683
      fontFamily: "iconfont", //这里是你pubspec定义的family名字
    ),
    size: 24,
    color: Colors.blue,
  );
//iconfont用作文字时候
Text('\ue683',
        style: TextStyle(
                    color: Theme.of(context).primaryColor,
                    fontFamily: 'iconfont',
                    fontSize: ScreenHelper.sp(160)));

三.注意事项

1.iconfont上的图标 作为Icon和Text使用规则不同 文字需要把&#x换成\u ,icon需要把&#换成0

2. 配置文件路径一定要对

3.使用时都需要指定fontFamily

4.如果嫌弃麻烦可以封装一个icon

Icon comIcon(context, {required iconPoint, fontFamily, double? size, color}) {
  return Icon(
    IconData(
      iconPoint,
      fontFamily: fontFamily ?? Constants.iconFont,
    ),
    size: ScreenHelper.width(size ?? 20),
    color: color ?? Theme.of(context).indicatorColor,
  );
}