flutter项目使用阿里巴巴矢量图标库

286 阅读1分钟

flutter项目使用阿里巴巴矢量图标库

  1. 登录阿里巴巴矢量图库,搜索图标
https://www.iconfont.cn/home/index?spm=a313x.7781069.1998910419.2
  1. 加入购物车并下载到本地
  2. flutter代码根目录新建assets/fonts文件夹
  3. 复制下载文件中的iconfont.json 和 iconfont.ttf文件到assets/fonts下
  4. pubspec.yaml中添加,注意不必要的空格
flutter:
   fonts:
     - family: zidingyiIcon 自定义一个名字
       fonts:
         - asset: assets/fonts/iconfont.ttf
  1. 项目中新建一个dart文件, 0xe661 0x固定写法,e661从iconfont.json中取,多个Icon如下配置
import 'package:flutter/material.dart';

class zidingyiIcon{
  static const IconData xiaomi = IconData(
    0xe661,
    fontFamily: "zidingyiIcon",
    matchTextDirection: true
  );
  
   static const IconData xiaomi2 = IconData(
    0x????,
    fontFamily: "zidingyiIcon",
    matchTextDirection: true
  );
}

7.项目中使用

// 导入
import '../../../services/zidingyiIcon.dart';

Icon(zidingyiIcon.xiaomi,color: Colors.white),