flutter專案引入iconfont阿里巴巴圖示

2022-05-16 19:00:08

下載圖示

這裡直接去iconfont阿里巴巴向量圖示庫，選好自己需要的圖示，點選如下圖所示【新增到庫】

然後選擇頭像左側的購物車圖示

然後點選下載程式碼

引入圖示解壓完開啟資料夾可以看到如下檔案列表，我們將.ttf檔案放在專案的靜態資原始檔夾中【我直接放在asset資料夾下】

接著我們在專案的pubspec.yaml資料夾下引入字型檔案，並設定字型族名稱

  fonts:
    - family: Iconfont
      fonts:
        - asset: asset/fonts/iconfont.ttf

然後我們開啟剛剛下載資料夾中的demo_index.html，在這裡可以看到圖示的unicode，如果圖示新增在了專案裡也能直接在專案中看到，如下

在iconfont網站我的對應專案中檢視對應編碼，注意我們只需要用“#”後面的編碼

檢視專案是點選資源管理->我的專案

然後我們建立一個my_icons的工具類，【模仿material中自帶的icons】用於放置我們自定義的字型圖示

import 'package:flutter/material.dart';
/// @author longzipeng
/// @建立時間：2022/2/26
/// 自定義字型圖示
class MyIcons{
  static const String fontFamily = "Iconfont";
  static const IconData box = IconData(0xe63a, fontFamily: fontFamily);
  static const IconData net = IconData(0xec5d, fontFamily: fontFamily);
}