Flutter 中使用 iconfont

使用方法

在 pubspec.yaml 中的 flutter 下添加以下信息

...
flutter:
  fonts:
    - family: MyIconFont
      fonts:
        - asset: iconfont/iconfont.ttf
...

Flutter 中使用：

import 'iconfont.dart';

// 其中 xxx，为 iconfont 对应的名字，可以 Chrome 打开
// demo_fontclass.html 查看对应名称
new Icon(MyIconFont.xxx)

其中 iconfont.dart 文件可以通过程序转换而来。
我这里使用 Python，你可以使用任何你喜欢的语言做这个事情。

每次图标文件有变化时，运行一下这个脚本即可生成新的 dart 文件。需要注意，由于 ttf 为静态字体文件，有变化后，需要重新打包运行 APP，否则不会生效。

转换方法

在 iconfont.cn 选择好要使用的图标后，下载到本地。解压之后，将所有文件（.js、.ttf、*.css等所有文件）复制到项目根目录：

$ tree . -L 1  

# 注意下面的 iconfont 与 ios/android/lib 等同级
.
├── analysis_options.yaml
├── android
├── build
├── iconfont   *************** 放在这里 **************
├── ios
├── lib
├── pubspec.lock
├── pubspec.yaml
├── README.md
└── test

# 其中 iconfont 的目录结构如下：
$ tree iconfont -L 1
iconfont
├── demo.css
├── demo_fontclass.html
├── demo_symbol.html
├── demo_unicode.html
├── iconfont.css     ************* 需要 ****************
├── iconfont.eot
├── iconfont.js
├── iconfont.svg
├── iconfont.ttf     ************* 需要 ****************
└── iconfont.woff
其中需要用到 iconfont.ttf 和 iconfont.css 文件，其余的文件不需要。
但是最好全部保留在项目  git 中，因为在开发过程中需要随时查看图标对应的代码及预览。
预览时用 Chrome 打开 demo_fontclass.html 即可。

通过以下 Python 3 代码转换为 dart 文件：

# coding: u8

import re
from pathlib import Path


ROOT = Path(__file__).resolve().parent
MAIN = ROOT


# 将 iconfont 的 css 自动转换为 dart 代码

def translate():
    print('Begin translate...')

    code = """
import 'package:flutter/widgets.dart';


// 代码由程序自动生成。
// 请不要对此文件做任何修改。详细说明见本文件末尾


class MyIconFont {

    MyIconFont._();

    static const font_name = 'MyIconFont';

{icon_codes}

/*
如果你有新的图标需要导入到字体中：

1. 联系我，将你加入到 iconfont(http://www.iconfont.cn) 的 xxx 项目中
2. 在 iconfont 中选择需要的图标，加入购物车
3. 然后点击顶部的购物车，弹出右边栏，选择“添加到项目”，选择 xxx，点击“确定”
4. 最好修改一下每个新增图标的名称，然后下载至本地
5. 将压缩包内所有文件拷贝到 iconfont 目录下，形如：
iconfont
├── demo.css
├── demo_fontclass.html
├── demo_symbol.html
├── demo_unicode.html
├── iconfont.css
├── iconfont.eot
├── iconfont.js
├── iconfont.svg
├── iconfont.ttf
└── iconfont.woff

6. 拷贝完成后通过以下命令完成转换：
   $ python3 ./translate_icon_font_from_css_to_dart.py
7. 其中转换时需要 iconfont.ttf 和 iconfont.css 文件;实际项目运行时只需要 iconfont.ttf 文件。其余文件不需要。
8. 开发时，通过右键 demo_fontclass.html 使用 Chrome 打开来查看图标对应的 unicode 码，使用时，将中划线“-”替换为下划线“_”。
*/
}
""".strip()

    strings = []

    tmp = []
    p = re.compile(r'.icon-(.*?):.*?"\\(.*?)";')
    for line in open(MAIN / 'iconfont/iconfont.css'):
        line = line.strip()
        if line:
            res = p.findall(line)
            if res:
                name, value = res[0]
                name = name.replace('-', '_')
                tmp.append((name.lower(), value))

    tmp.sort()
    for name, value in tmp:
        string = f'    static const IconData {name} = const IconData(0x{value}, fontFamily: font_name);'
        strings.append(string)

    strings = '\n'.join(strings)
    code = code.replace('{icon_codes}', strings)

    open(MAIN / 'lib/iconfont.dart', 'w').write(code)

    print('Finish translate...')


if __name__ == "__main__":
    translate()

使用方法：
比如将转换文件放到项目根目录：

$ python3 ./translate_icon_font_from_css_to_dart.py

将在 lib 目录下生成 iconfont.dart 文件。