Mac os + AndroidStduio
本文使用Python3的脚本,也可使用其他语言编写脚本
安装Python3环境
brew install python3
如果没安装Homebrew,请移步
Homebrew 的安装和使用
在iconfont建立自己的图标库
去https://www.iconfont.cn创建一个项目,并上传图标。
这里需要注意项目配置,如果前缀配置和我不一致,就要对应改脚本里代码
然后点击 下载至本地 ,拿到这些文件
copy至Flutter根目录下的assets/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,否则不会生效。