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

最新推荐文章于 2025-05-27 10:53:25 发布

_hsc

最新推荐文章于 2025-05-27 10:53:25 发布

阅读量1.7k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： Flutter 文章标签： dart css

本文链接：https://blog.csdn.net/heshuncheng/article/details/107039880

该博客介绍了如何在Flutter项目中使用iconfont图标。首先，下载iconfont文件并将其放入项目的assets目录。接着，配置pubspec.yaml文件。然后，创建一个Python脚本(translate.py)用于将iconfont转换为dart图标文件，执行该脚本前需确保拥有Python3环境。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

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

下载iconfont文件

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

在这里插入图片描述

flutter 项目 pubspec.yaml文件中配置

在这里插入图片描述

自动转换脚本

新建一个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 =

最低0.47元/天解锁文章

200万优质内容无限畅学

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

_hsc

关注关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

Flutter-自定义图标-iconfont 阿里巴巴

m0_48259951的博客

03-08

1973

虽然Flutter有许多内置的icon图标，但是有些特殊功能的话，需要自定义图标或者需要在。后，会生成一些不同格式的字体文件，在Flutter中，我们使用。文件其实是用不到的，只是为了能更便捷的看到每个字体对应的。定义多个字体文件，步骤都是一样的，只不过是把解压文件里的。：下载下来解压后的文件，在项目的根目录下新建一个。目录下新建一个自定义字体文件，我这里的命名是。文件，与已引入的字体文件名做区分，在。配置，引入自定义文件，这里首个。，也可配置多个字体，替换不同。文件夹，把解压文件里的。

Dart + Flutter 学习笔记

最新发布

qq_33365152的博客

06-16

556

Dart + Flutter 学习笔记、Flutter、Dart

参与评论您还未登录，请先登录后发表或查看评论

icon_font_generator:FluFlutter图标字体生成器

05-06

Flutter Icon字体生成器将所有* .svg图标从dir转换为icon-font（.ttf），并生成与flutter兼容的dart类。 NodeJs包的抽象层icon-font-generator 要求 Node.JS v11 + 安装： $ pub global activate icon_font_generator 参数： * - 必需的 --from *-输入svg的目录 --out-font *-输出图标的字体路径（至文件，例如：lib / font.ttf） --out-flutter *-输出颤动图标类（到文件，例如：lib / icons.dart） --class-name *-类名也是pubspec.yaml中使用的字体名称（作为字体名称） --height固定的字体高度值，默认值：512 --ascent偏移量应用于基线，默认值：240 -

chrome charset使用_在Flutter中使用iconfont...附一键生成Dart类的技巧

weixin_39998906的博客

11-30

211

Flutter = 胡辣汤前言对于前端工程师来说，在项目中使用iconfont太习以为常了。而在Flutter中，内置了Icon组件，所有图标都来自MaterialDesign Icons，数量众多，完全是够用的。可我们在实际开发中还是会要使用到自定义图标，那如何在Flutter项目中使用自定义的IconFont，这就是本文要教给大家的。声明自定义字体前往 https://www.iconfon...

Flutte ICON图标组件、自带图标、自定义图标

zyy_give的博客

05-27

389

Flutte ICON图标组件、自带图标、自定义图标

Flutter 快速导入大量iconfont资源

weixin_34277853的博客

05-23

427

flutter_iconfont www.iconfont.cn/ 为我们提供了海量的矢量图标资源，在Flutter中使用这些资源也还方便，但是在下载大量资源后，仍然需要手动做一些事情，这不符合程序员能偷懒就偷懒的精神，所以我做了这个简单工具，希望对大家有所帮助。 flutter_iconfont 传送门使用说明使用git clone 或者直接download zip文件到本地进入i...

#Flutter# iconfont.ttf转成iconfont.dart

m0_58411371的博客

10-26

243

5、找到iconfont.tff和demo_index.html这两个文件（文件名可能不一样，只要是后缀是.ttf和.html即可）；到这里 iconfont.ttf转成iconfont.dart就结束了，将.ttf转成.dart文件后就再也不怕.ttf内容改变之后要大改工程内部代码引用了。1、flutter工程中引入了iconfont.ttf不存在的icon引发。3、直观了解iconfont.ttf里面有哪些icon，并方便调用。7、生成后的iconfont.dart文件部分代码。

Flutter中使用 iconfont 图标

qq2276031的博客

04-21

2115

1.iconfont网站上下载ttf文件 image.png 2.将.ttf文件放入项目目录(我放在了lib/assets/fonts下，也可根目录建fonts文件夹)，为了后期方便预览自己下载的图标，也可将下载的内容都放入文件夹中，预览直接打开demo_index.html即可 image.png image.png 3.配置pubspec.yaml(若是根目录路径和注释例子一致即可) image.png 4.项目中使用 Icon( IconData(0..

Flutter中实现多色彩Iconfont图标自动生成组件

资源摘要信息:"本资源主要介绍了如何在Flutter项目中引入并使用iconfont图标，以及使用`flutter-iconfont-cli`这个工具来自动化生成Flutter Widget，从而实现不依赖于字体文件支持多色彩图标的功能。以下是详细知识...

Flutter 笔记 | Flutter 中的路由、包、资源、异常和调试

川峰的博客

05-21

2060

flutter学习之在Flutter中使用iconfont

qq_34867424的博客

02-22

1154

在./lib/ 下新建fonts.dart,编写自定义图标类，如下所示。将iconfont 代码放在fonts 文件夹下，没有的话，需要新建。在pubspec.yaml 配置字体库信息。在iconfont 中下载图片代码。

iconfont2flutter:用于将iconfont下载的资源转换为flutter可用的代码

03-23

用于将iconfont下载的资源转换为flutter可用的代码首先你需要一个Java运行环境：，下载最新版找个位置解压到这个目录添加到PATH路径使用方法 iconfont2flutter [输入路径] [输出路径] [可选-生成代码的的类名和字体名称] 例： iconfont2flutter'/ home / download / iconfont''/home/dart_demo/lib/font/icon_font.dart' 结果：

在Flutter 中使用 IconFont

weixin_47401153的博客

04-11

695

在Flutter中使用IconFont图标

Flutter IconFont 使用

杰森丶郭达斯坦森的博客

10-10

837

Flutter IconFont 使用

Flutter中使用Iconfont

sophieLV1993的博客

01-15

476

摘要：在Flutter项目中如何使用Iconfont 选取并下载Iconfont图标至本地 Iconfont官网连接下载完成后目录结构如下将字体文件拷贝至项目中例：此处将字体文件拷贝在fonts文件夹内将字体注册到项目中打开此文件声明字体代码如下：注意fonts前有一缩进空格 fonts: - family: iconfontFonts fonts:...

在 Flutter 中使用 iconfont

codergzh

10-15

826

在Flutter开发中，使用字体图标必不可少，虽然Flutter也给我们提供了很多内置icon，但是在实际开发中还是会使用到自定义图标。

如何在 Flutter 中使用 IconFont ?

weixin_34362875的博客

06-09

403

我的个人博客同步更新，阅读体验会好一点，欢迎访问。简书：https://www.jianshu.com/u/762002465748 掘金：https://juejin.im/user/5a3127da5188251c11409f0a 个人博客：https://wuht.coding.me/ 废话距离上一次更新博客已经半年了，实在是有点忙，期间还换了了个工作，很多的事情，但是非常感谢有的网...

flutter 引入第三方 Icon 图标（以阿里图标库为例)

shuaizi96的博客

03-14

8866

最近在学习flutter，在引入第三方图标的时候到处百度花了点时间，搞好之后索性自己记录一下加深印象首先在阿里图标库选好需要用的图标，添加进购物车将选好的图标打包下载到本地（下载代码），复制iconfont.ttf文件到项目中我的存放路径是： lib assets icons iconfont.ttf 打开项目根目录中的pubspec.yaml文件，在flutte...

flutter显示图标_Flutter使用Iconfont图标

weixin_31128065的博客

01-17

1075

Iconfont阿里妈妈MUX倾力打造的矢量图标管理、交流平台。设计师将图标上传到Iconfont平台，用户可以自定义下载多种格式的icon，平台也可将图标转换为字体，便于前端工程师自由调整与调用。添加到Flutter项目中手动添加到Flutter项目中下载 iconfont.ttf 文件到项目 fonts(可修改) 目录中修改 pubspec.yaml 文件，配置字体文件flutter:font...