阿里媽媽MUX傾力打造的矢量圖標(biāo)管理菊霜、交流平臺奠衔。
設(shè)計師將圖標(biāo)上傳到 iconfont 平臺，用戶可以自定義下載多種格式的icon戚绕，平臺也可將圖標(biāo)轉(zhuǎn)換為字體纹坐，便于前端工程師自由調(diào)整與調(diào)用。
官網(wǎng)在右邊 → iconfont-阿里巴巴矢量圖標(biāo)庫
一.下載和配置Iconfont文件
第一步：從 iconfont 平臺選擇要使用到的圖標(biāo)舞丛，并下載至本地耘子；
iconfont我的項目頁面
第二步: 將下載好的文件放入flutter項目下assets文件夾(沒有需要自己建立,和lib同一路徑)
文件目錄/assets/font/iconfont
第三步:在pubspec.yaml配置路徑 很重要重要!!!!
配置文件時候一定要控制好縮進(jìn)要不然你的圖標(biāo)會顯示一群 方塊
配置文件時候一定要控制好縮進(jìn)要不然你的圖標(biāo)會顯示一群 方塊
配置文件時候一定要控制好縮進(jìn)要不然你的圖標(biāo)會顯示一群 方塊
#位置一定要對應(yīng)好否則不顯示 -.-||
fonts:
- family: iconfont
fonts:
- asset: assets/font/iconfont/iconfont.ttf
二.iconfont使用
//iconfont在flutter的使用方式分兩種一種是以iconData形式,一種是以文字形式的
//iconfont 用作icon的時候
Icon(
IconData(
iconPoint,//這里就是iconfont中的圖標(biāo) 注意要在這里轉(zhuǎn)換成 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上的圖標(biāo) 作為Icon和Text使用規(guī)則不同 文字需要把&#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,
);
}
