坑🕳自定义icon

2018-07-27  本文已影响33人  _白羊

要使用自定以的iconfont

1、在http://fluttericon.com/把svg的图标转成flutter中可用的字体

image.png
注意:svg的文件不能使用中文名称
2、打开压缩包,将.ttf的文件防止在flutter项目的fonts文件夹下
image.png
3、在pubspec.yaml配置文件路径
fonts:
    # - family: StudyInFont
      # fonts:
        # - asset: fonts/StudyInIcons.ttf
  #       - asset: fonts/Schyler-Italic.ttf
  #         style: italic
    - family: StudyInIcons
      fonts:
        - asset: fonts/StudyInIcons.ttf
  #       - asset: fonts/TrajanPro_Bold.ttf
  #         weight: 700
  #

4、将压缩包中的 myIcon.dart(名字不一定相同,在点击下载压缩包之前可以自定义)文件放到flutter项目中,文件内容大致如下


image.png

5、在需要使用的文件中引入,就OK啦

import '../../configuration/Icons.dart';
...
new Container(
  child: Icon(
    StudyInIcons.tagsmall,
    ),
 ),
...
上一篇 下一篇

猜你喜欢

热点阅读