Flutter引入iconfont图标，并自动生成dart图标文件

淡淡的烟草味﹌ 2023-02-21 11:49 4阅读 0赞

### Flutter引入iconfont图标并自动生成dart图标文件 ###

*  下载iconfont文件
 *  flutter 项目 pubspec.yaml文件中配置
 *  自动转换脚本

# 下载iconfont文件 #

将iconfont文件下载到本地。解压之后放到flutter项目的assets 目录下。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hlc2h1bmNoZW5n_size_16_color_FFFFFF_t_70]

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hlc2h1bmNoZW5n_size_16_color_FFFFFF_t_70 1]

# flutter 项目 pubspec.yaml文件中配置 #

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hlc2h1bmNoZW5n_size_16_color_FFFFFF_t_70 2]

# 自动转换脚本 #

新建一个translate.py文件，将下面脚本拷贝到文件中。其中变量IconDart ,IconCss 根据实际情况可做更改。 执行 python3 translate.py 命令

# coding: u8
    import re
    from pathlib import Path
    import time
    ROOT = Path(__file__).resolve().parent
    MAIN = ROOT
    # 生成的IconFont.dart 文件路径
    IconDart = 'lib/common/style/IconFont.dart'
    # iconfont css 文件存放路径
    IconCss = 'assets/iconfont/iconfont.css'
    # 将 iconfont 的 css 自动转换为 dart 代码
    def translate():
        print('Begin translate...')
        
        code = """ import 'package:flutter/widgets.dart'; /// @author: hsc /// @date: {date} /// @description 代码由程序自动生成。请不要对此文件做任何修改。 class IconFont { static const String FONT_FAMILY = 'IconFont'; {icon_codes} } """.strip()
        strings = []
        content = open(MAIN / IconCss).read().replace('\n content', 'content')
        matchObj = re.finditer( r'.icon-(.*?):(.|\n)*?"\\(.*?)";', content)
        for match in matchObj:
            name = match.group(1)
            name = name.replace("-","_")
            string = f' static const IconData {name} = const IconData(0x{match.group(3)}, fontFamily: IconFont.FONT_FAMILY);'
            strings.append(string)
        strings = '\n'.join(strings)
        code = code.replace('{icon_codes}', strings)
        code = code.replace('{date}', time.strftime("%Y-%m-%d %H:%M:%S", time.localtime()))
        open(MAIN / IconDart, 'w').write(code)
        print('Finish translate...')
    
    if __name__ == "__main__":
        translate()

结果展示  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hlc2h1bmNoZW5n_size_16_color_FFFFFF_t_70 3]

> 脚本运行前置条件：python3 环境

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hlc2h1bmNoZW5n_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200630120842519.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hlc2h1bmNoZW5n,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hlc2h1bmNoZW5n_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20200630120650229.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hlc2h1bmNoZW5n,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hlc2h1bmNoZW5n_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20200630120629601.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hlc2h1bmNoZW5n,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hlc2h1bmNoZW5n_size_16_color_FFFFFF_t_70 3]: https://img-blog.csdnimg.cn/20200630121513269.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hlc2h1bmNoZW5n,size_16,color_FFFFFF,t_70