阿里妈妈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
- 配置文件路径一定要对
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,
);
}
