Flutter图标-自动生成图标库Dart类

Mac os + AndroidStduio
本文使用Python3的脚本，也可使用其他语言编写脚本

安装Python3环境

brew install python3

如果没安装Homebrew，请移步
Homebrew 的安装和使用

安装python3成功

在iconfont建立自己的图标库

去https://www.iconfont.cn创建一个项目，并上传图标。
这里需要注意项目配置，如果前缀配置和我不一致，就要对应改脚本里代码

前缀名称

iconfont

然后点击 下载至本地 ，拿到这些文件

下载的文件

copy至Flutter根目录下的assets/iconfont/文件夹里，如果没有就新建。如图

iconfont文件

实际需要用到只有 iconfont.ttf 和 iconfont.css 文件，其余的文件不需要。
但是最好全部保留在项目 git 中，因为在开发过程中需要随时查看图标对应的代码及预览。
预览时用 Chrome 打开 demo_index.html 即可。

执行Python3脚本，生成dart类

在项目的根目录里新建translate_icon_font_from_css_to_dart.py文件，如图：

根目录

将下面的代码，copy进去

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 IconFont {

  IconFont._();

  static const font_name = 'IconFont';

{icon_codes}

}
""".strip()

    strings = []

    tmp = []
    p = re.compile(r'.icon-(.*?):.*?"\\(.*?)";')

    content = open(MAIN / 'assets/iconfont/iconfont.css').read().replace('\n  content', 'content')

    for line in content.splitlines():
        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/widgets/iconfont.dart', 'w').write(code)

    print('Finish translate...')


if __name__ == "__main__":
    translate()

注意 需要在项目里新建一个空的dart类：lib/widgets/iconfont.dart

脚本不难理解，简单的说就是把assets/iconfont/iconfont.css里的Icon信息解析，放到dart代码模版里，最终写入到lib/widgets/iconfont.dart类里。

执行脚本

在 AndroidStudio的Terminal 里执行 python3 ./translate_icon_font_from_css_to_dart.py

成功执行，如图：

生成成功

生成的lib/widgets/iconfont.dart类

import 'package:flutter/widgets.dart';


// 代码由程序自动生成。请不要对此文件做任何修改。


class IconFont {

  IconFont._();

  static const font_name = 'IconFont';

  static const IconData add = const IconData(0xe604, fontFamily: font_name);

}

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

---

参考：https://www.jianshu.com/p/1cfde18dc283