react native 使用图标字体(IconFont)

最新推荐文章于 2025-07-09 09:00:00 发布
最新推荐文章于 2025-07-09 09:00:00 发布
阅读量3k 收藏
点赞数 3
CC 4.0 BY-SA版权
分类专栏： react-native 文章标签： iconfont 图标字体 react-native 图形字体 react-native配置自定义字体
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/sharpdeng/article/details/90267891
本文详细介绍了在React Native项目中如何引入并使用图标字体（IconFont），包括下载字体文件，将.ttf文件引入iOS项目，配置Info.plist，提取字符对应，以及在RN项目中实际使用自定义字体的方法。特别指出在iOS环境下操作的步骤，并提醒注意字体名称的确定与一致性问题。

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

前言

今天在做react-native项目时，需要引入图形字体进行使用，但在网上找了很多资料，都是一知半解的，没有说完成，对于像我这样对小白来说很是难受，在经过n久，终于弄好了，现在进行总结一下，希望能给刚进坑的孩童提供帮助，也希望各位大神指点。

注： 本文只讲述了mac环境的ios项目中引入，android环境后续更新

正文

图标字体（IconFont）

IconFont，中文常被叫做图标字体或图形字体，是一种特殊的自定义字体，如果想要了解具体的内容，可以查看 解密IconFont ，里面做了很详细的说明。

能够将svg图标转换成字体文件的网站有：
阿里巴巴矢量图标库
IcoMoon
…

react-native项目中引入iconfont

  1. 下载需要的字体文件，用xcode打开RN项目，然后将后缀为“.ttf”的字体文件引入RN项目中，具体步骤如下图：在这里插入图片描述
  2. 去Info.plist中添加 Fonts provided
最低0.47元/天 解锁文章

200万优质内容无限畅学
ReactNative中使用iconfont
Royalluo的博客
02-19 404
配置 ReactNative中要使用iconfont，需要集成react-native-vector-icons库。 集成方式： 1.打开命令行窗口，并定位到项目的根目录下 2.下列两种导入方式分别是下载库和关联库，选其中一个执行即可 npm install --save react-native-vector-icons react-native link react-native-vect...
Iconfont 在 React-native中的使用
Flasco的个人博客
05-26 2015
相信很多人都已经用过了类似react-native-vector-icons这样的组件吧！但是在很多时候，我们会遇到诸如“怎么我需要的图标这个库里面找不到呀”，“我们自己的ui设计了一套图标怎么用起来呀”之类的问题。没错没错，这个时候我们就需要提到iconfont了！ iconfont，顾名思义，就是图标字体。它是将矢量图标做成字体，大大的减小了琐碎文件的个数，也方便了前端人员使用，而为大家所熟...
在react native中使用阿里iconfont图标
01-08
1.在阿里图标库中下载好所需的图标到本地。下载解压的目录如下： 打开demo_index.html可以查看下载好的图标，如下： 2.把下载好的字体文件夹里的iconfon.tff复制到src/assets/fonts里 3.在根目录中配置react-native.config.js文件 (以前是在rnpm配置，在package.json配置rnpm会有警告) module.exports = { assets: ['./src/assets/fonts/'], }; 目录结构 4.在终端使用以下命令，建立图标的联系 react-native link 5.使用方式 //字
【限时免费】 react-native-svg-app-icon：一键生成多平台应用图标
最新发布
gitblog_01166的博客
07-09 391
react-native-svg-app-icon：一键生成多平台应用图标 项目介绍 react-native-svg-app-icon 是一款专为 React Native 开发者设计的 CLI 工具，它能从单个 SVG 源文件自动生成 iOS 和 Android 平台所需的所有应用启动图标。这个开源工具解决了跨平台移动应用开发中图标适配的痛点，让开发者告别手动生成多尺寸图标的繁琐流程。 通过智...
react-native实践日记--2.react-native中引入自定义的iconfont字体图标文件
u012830884的博客
11-23 850
解压后，将iconfont.ttf文件复制到android/app/src/main/assets/fonts文件夹下，如果不存在的话，则自己新建对应的文件夹，然后将iconfont.css放入项目中：/font/iconfont.css。4.在font目录下新建index.js，引入上一步生成的iconfont.js，创建字体组件，供页面调用。执行 npm run build:iconfont ，生成 iconfont.js。1.首先npm局部安装下react-native-vector-icons。
ReactNative 使用Iconfont字体图标的方式总结（安卓）
mengxianglong123的博客
01-29 3479
一、使用<Text/>直接引入 这种方式比较直接，也是最简单的方式，十分推荐使用该方式 在iconfont下载自己的项目 然后拷贝 ttf后缀的文件到 android\app\src\main\assets\fonts中 如果没有assets文件夹可以新建一个 关于assets文件夹：https://www.jianshu.com/p/35db9e819a54 字体文件名是不能随便更改的，文件名要与fontFamily保持一致：https://blog.youkuaiyun.com/aiyn
React Native矢量图标全攻略：从入门到自定义iconfont的高级玩法
老猿阿浪的博客
05-14 1389
当我第一次发现同事的APP安装包比我的小了2.3MB，仅仅是因为他正确使用了react-native-vector-icons时，整个团队的认知都被刷新了。本文将带你深入这个被低估的神器，揭秘如何用专业玩家的姿势玩转React Native图标系统，包括那个让无数人头疼的自定义iconfont终极解决方案
reactNative 版本＞ 0.7 手动配置iconfont
2301_76786223的博客
07-11 322
文件包含从 Iconfont 生成的 Unicode 对应关系，例如。你需要手动将字体文件添加到项目中。3、android/app/build.gradle 代码配置。从 Iconfont 网站下载字体文件并解压，获取。3、配置react-native.config.js。2、在 Xcode 中，右键点击项目名称，选择。文件中添加一个新的键值对，将字体文件添加到。文件并确保目标是你的项目，并且勾选。目录不存在，请创建它。在项目根目录创建或修改。文件，添加字体文件配置。在项目中创建一个文件。
react-native 使用字体图标 (react-native-vector-icons)
肖的博客
02-08 409
安装 yarn add --save react-native-vector-icons # 下载库 react-native link react-native-vector-icons # 自动关联 安装关联后项目重启 使用 import Icon from 'react-native-vector-icons/AntDesign'; <Icon name='user' size...
React Native 中Iconfont图标使用
luke312的博客
03-03 857
文章目录react-native-svg-uri&阿里Iconfont矢量图标使用记录使用方法1.组件下载2.阿里Iconfont下载3.添加svg标签4.使用 react-native-svg-uri&阿里Iconfont矢量图标使用记录 使用方法 svg-uri组件下载 1). 引入 2). 创建工具类 阿里Iconfont图标下载 添加svg标签 使用 1.组件下载 yarn add react-native-svg-uri ----------------------------
React Native与Iconfont
weixin_33713503的博客
06-26 217
　　之前总是想写一些关于学习体会和感受的文章，今天也来一篇关于React Native的教程文章。前段时间我尝试着用React Native构建一个论坛的APP,在这个过程中遇见一个问题: 最开始我是用图片的形式去构建APP中的图标，但用图片构建图标的过程中会遇到一个问题，就是图片的加载速度非常之慢，APP页面加载过程中图标会出现留白的情...
react native 使用iconfont
aisuoshi3612的博客
05-24 158
安卓的配置： 　　1.在android/app/src/assets/fonts文件夹下复制从iconfont下载的 （下载后的icon名称可以在下载来的文件中的html文件中） 　　2.在android/app/build.gradle中添加 project.ext.vectoricons = [ iconFontNames: [ 'iconfont.ttf...
React Native使用react-native-vector-icons和iconFont做字体图标
徐同保的专栏
04-06 691
Icon.js: import { createIconSet } from 'react-native-vector-icons' import fontFile from '../../static/fonts/iconfont.ttf' import iconfontJson from '../../static/fonts/iconfont.json' const getIconOption = () => { let glyphMap = {} if ( ...
react-native中使用自定义的字体图标iconfont
tinysoft_me的博客
03-14 389
iconfont图标库下载 可在 http://www.iconfont.cn 下载 下载完成后的目录中有字体文件： iconfont.ttf 拷贝字体文件 Android: 在 Android/app/src/main 目录下新建文件夹 assets/fonts/ 然后将iconfont.ttf文件拷贝到assets/fonts/目录下 使用 在下载的字体文件夹中有demo_unicode.ht...
react-native优雅的使用iconfont字体图标
weixin_33869377的博客
02-26 1224
引言 在此之前已经有很多前辈分享自定义图标的经验，在这里我分享一种个人觉得比较优雅的使用icnfont字体图标的方案。 一步一个脚印 项目目录 root ... android font App.js 安装依赖 首先局部安装 react-native-vector-iconsyarn add react-native-vector-icons react-native link rea...
react native字体图标react-native-vector-icons的使用
koufulong的博客
07-05 4385
GitHub地址：https://github.com/oblador/react-native-vector-icons 图标参考地址：https://oblador.github.io/react-native-vector-icons/ 一、下载和引用 yarn add react-native-vector-icons # RN >= 0.60 npx pod-install # RN < 0.60 react-native link react-native-vector-icons
ReactNative如何使用自定义的Iconfont
weixin_34342578的博客
04-07 439
在App包的构成中图片资源是比较占大小的，所以我们可以利用Iconfont来替代原来的png或者jpg单色图标，iconfont的优点是占Size小、支持任意大小不失真、支持任意颜色设置、平台化管理icon等等。 当App项目的大小达到一定规模时，App包的Size也会随之增大，这个时候我们一般会对App包的Size做分析优化来达到减少包大小的目的，利用iconfont来替代项目中原有的...
react Native项目中 使用Fontello自定义字体图标库
weixin_43737733的博客
08-15 539
点击选中你需要的图标点击下载生成zip文件解压文件，将解压后文件中的ttf格式文件方法项目根目录的assets/fonts文件夹，没有则自己创建将解压后文件中的config.json 放入你的项目中在项目根目录下创建一个文件，‌用于指定自定义字体文件的路径assets: ['./assets/fonts/'], //你的ttf文件存放路径使用 react-native link （确保react-native环境已配置成功）
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值