Iconfont

阿里媽媽MUX傾力打造的矢量圖標管理、交流平臺。

設計師將圖標上傳到Iconfont平臺，用戶可以自定義下載多種格式的icon，平臺也可將圖標轉換為字體，便于前端工程師自由調整與調用。

添加到Flutter項目中

手動添加到Flutter項目中

下載 iconfont.ttf 文件到項目 fonts(可修改) 目錄中

修改 pubspec.yaml 文件，配置字體文件

flutter:

fonts:

- family: iconfont # 從 iconfont.json 中獲取

fonts:

- asset: fonts/iconfont.ttf

創建Iconfont類

import 'package:flutter/material.dart' show IconData;

/// 從 iconfont.json 中獲取圖標的 font_family，unicode

//{

// "id": "1",

// "name": "測試項目",

// "font_family": "iconfont",

// "css_prefix_text": "icon-",

// "description": "",

// "glyphs": [

// {

// "icon_id": "5729578",

// "name": "自動",

// "font_class": "zidong",

// "unicode": "e7ee",

// "unicode_decimal": 59374

// }

// ]

//}

class MyIcons {

static const String _family = 'iconfont';

MyIcons._();

static const IconData IconZidong = IconData(0xe7ee, fontFamily: _family); // 自動

}

通過網頁獲取Dart文件

將 iconfont.css 拖入即可生成

通過插件自動生成

不需要手動下載 iconfont.ttf,iconfont.css,iconfont.json 等文件。

不需要手動去 pubspec.yam 中配置字體。

不需要手動去創建Iconfont類。

僅需一行命令，就能自動實現以上3步。

iconfont -c //at.alicdn.com/t/font_1500681_sz0skwerbw.css -d my_icons

//at.alicdn.com/t/font_1500681_sz0skwerbw.css 從下圖處獲得

image

安裝方式

全局安裝

flutter：flutter pub global activate iconfont

dart: pub global activate iconfont

命令行運行 iconfont ，所有Flutter項目均可使用

局部安裝

修改 pubspec.yaml 文件

dev_dependencies:

iconfont: #latest version

命令行運行 flutter packages pub run iconfont , 僅當前項目可使用

參數

-c, --css font css的鏈接，例如(//at.alicdn.com/t/font_1500681_sz0skwerbw.css)

(defaults to "")

-d, --dir 自動生成的assets文件夾名

(defaults to "")

-i, --in iconfont文件所在目錄

(defaults to "assets/fonts/")

-o, --out 生成后文件存放目錄

(defaults to "lib/icons/")

-h, --help help

總結

以上是生活随笔為你收集整理的flutter显示图标_Flutter使用Iconfont图标的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。