ReactNative中如何使用自定义的Iconfont图标

墨衍会员 · AI 创作全网分发 墨衍智能分发 本文由作者通过墨衍一键同步至各平台 1分发平台 400+累计阅读 487平均单平台已同步平台优快云微信公众号微博知乎掘金百家号博客园抖音小红书 你的文章也可以这样分发 墨衍会员 ¥399起/年，写一次发全网我也要 → 码龄10年

关注

转载最新推荐文章于 2026-02-06 11:05:23 发布 487 阅读 AI 写同款· GEO 优化 ›

在react native中使用阿里iconfont图标 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.使用方式 //字立即下载

原文地址：https://blog.youkuaiyun.com/zcxwww/article/details/79831330

收录于

react native

当前文章被收录于：

react native

7 篇文章 0 人学习

订阅专栏查看详情

当前文章被以下社区和专栏收录：

告别Root！用Python脚本一键解密Android微信EnMicroMsg.db数据库（附完整源码）本文详细介绍了如何在非Root环境下使用Python脚本一键解密Android微信EnMicroMsg.db数据库。通过ADB调试接口和SQLCipher技术，实现自动化提取和解密微信聊天记录数据库，无需Root权限，适合数据分析师和普通用户安全备份数据。阅读详情

相关推荐

CP2102 USB 转 UART 模块 PCB 设计项目

不幸的是，我的笔记本电脑只有 USB 端口，所以我需要在 USB 端口和 UART 接口之间进行转换。PCB 布局将足够小，因此我们不一定需要高速布线 USB 线路，但我们将在此将其作为一个简单的示例来实现，以展示如何在这种类型的电路板上实现它。相反，我们只使用屏幕左侧的电路。在这里，我们利用对之间的间距和到 L1 上的铜灌注的距离将差分阻抗设置为目标值。初始布局分为两个部分：USB 连接器和 USB 线路的 TVS 二极管放置在电路板左侧，带有二极管 D4 和 D5 的引脚接头放置在电路板右侧。

jkh920184196的博客 2400

react-native实践日记--2.react-native中引入自定义的iconfont字体图标文件

解压后，将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。

u012830884的博客 972

帆软js--获取控件和单元格

参数面板：获取面板控件，name为控件名称：_g().parameterEl.getWidgetByName("name") 取值：_g().parameterEl.getWidgetByName("tt3").getValue()2323 赋值：_g().parameterEl.getWidgetByName("tt2").setValue("987") 调用对应的事件比...

江湖行骗老中医 7197

react native 使用阿里字体图标库

注：手动链接(react-native link)已从 react-native 0.69 中删除，以支持自动链接功能，需使用另外一个插件react-native-asset。当然，如果你觉得文章有什么让你觉得不合理、或者有更简单的实现方法又或者有理解不来的地方，希望你在看到之后能够在评论里指出来，我会在看到之后尽快的回复你。将iconfont图标文件放置在src/assets/fonts。根目录新建 react-native.config.js。如果本篇文章对你有帮助的话，很高兴能够帮助上你。

好巧的博客 1455

ROS学习【11】-----基于ubuntu16.04上Gazebo机器人环境搭建的传感器仿真(camera、kinect、Lidar),并通过Rviz进行数据显示

ROS学习-----基于ubuntu16.04上Gazebo机器人环境搭建的传感器仿真目录一、Gazebo环境搭建前的准备1、将搭建模型下载到我们的gazebo环境下2、升级我们的gazebo版本二、创建配置launch文件参数的world文件1、进入工程包mbot_gazebo2、创建文件夹worlds3、进入该文件夹4、创建playground.world文件5、创建room.world文件三...

qq_42451251的博客 3605

四自由度SCARA机器人的运动学和动力学MATLAB建模与仿真

本文介绍了四自由度SCARA机器人的运动学和动力学建模，使用MATLAB进行了相应的建模与仿真。通过正运动学和动力学分析，可以了解机器人在不同状态下的运动特性和力学特性。这为后续的控制算法设计和性能优化打下了基础。希望本教程对学习SCARA机器人有帮助。

小蜗牛的珍贵百宝箱 3636

react-native系列(12)图标篇：使用阿里字体库iconfont图标和svg详解

在前端开发中，经常会用到iconfont图标库来管理图标，在RN开发中有时候同样需要如此。在百度上搜索过RN相关的图标管理方案，发现都较为复杂。于是写下了本篇博客，为大家介绍另外两种更优化的图标应用的方案，供大家学习参考。 iconfont图标该方案同样适用于字体变更。从iconfont库下载好图标脚本，结构如下：打开iconfont.ttf文件，我们看一下字体全称是什么？正常情况下...

@黄小泽的个人博客 7913

蠕虫病毒代码(纯属参考，请勿用于非法事件)

1.介绍蠕虫病毒蠕虫病毒是一种常见的计算机病毒，是无须计算机使用者干预即可运行的独立程序，它通过不停的获得网络中存在漏洞的计算机上的部分或全部控制权来进行传播。计算机病毒是指编制或者在计算机程序中插入的破坏计算机功能或者破坏数据和恶意篡改系统．影响计算机使用并且能够自我复制的一组计算机指令或者程序代码中文名:蠕虫病毒传染方式:网络和电子邮件外文名:Worm virus 类型:计算机病毒 2.代码（建议使用虚拟机，否则你的计算机将会就地报废，使用时要关闭电脑病毒保护，否则程序会...

Kenny20211105的博客 2万+

在 React Native 中使用Iconfont自定义图标

前提准备 1.安装react-native-vector-icons yarn addreact-native-vector-icons 2.如果你想使用库中的默认字体文件，则需要链接资源库(可选) react-native link react-native-vector-icons 3.重新运行项目 4.测试运行一下代码在任意组件 (这里使用...

sJohnny的博客 2518

【Linux】Windows11 安装 WSL2 并运行 Ubuntu 22.04 详细操作步骤

Windows 11 安装 WSL2 和 Ubuntu 22.04 指南本文详细介绍在 Windows 11 上安装 WSL2 和 Ubuntu 22.04 的完整步骤，包括： WSL2 与 VirtualBox 的性能对比优势系统版本检查与升级方法两种安装方式（一键安装和手动安装） Ubuntu 22.04 的安装与配置存储位置管理及迁移技巧常用 WSL2 命令速查表文章还提供了性能优化建议和常见问题解决方案，适合开发者和 Linux 爱好者快速搭建高效的开发环境。

No8g攻城狮的博客 2万+

深度学习论文: Towards Total Recall in Industrial Anomaly Detection

在大规模工业制造中，能够准确检测出有缺陷的零件至关重要。我们在这项工作中面临的一个特殊挑战是冷启动问题：仅使用正常的示例图像来训练模型。虽然可以针对每个类别手动设计解决方案，但我们的目标是构建能够自动适用于多个任务的系统。最佳的方法是将ImageNet模型的嵌入特征与异常检测模型结合起来。在本文中，我们在这一研究基础上进行了扩展，并提出了PatchCore，它利用了一个具有最大代表性的正常补丁特征内存库。通过这种方法，我们能够更好地解决冷启动问题，并提高系统在多任务上的性能。

mingo_敏 1873

ReactNative干货分享——自定义iconfont图标的使用

在开发App的过程中我们会用到各种图标，经实践发现一个问题，在React Native中使用图片来显示图标加载会非常慢，经常出现图标留白，半天才加载出来的情况。这种时候使用字体图标就能够很好解决这个问题。与图片相比，使用字体图标有哪些好处呢？字体图标的优点基于Text组件来显示，加载速度快可以设置字体样式来改变图标的大小，颜色矢量图标，放大缩小不失真兼容性好，适用于各式浏览器设计简单...

weixin_33695450的博客 672

基于YOLOv8的植物生长阶段识别系统设计与实现

本文详细介绍了一个基于YOLOv8深度学习模型的植物生长阶段识别系统，包含完整的数据集构建、模型训练、评估以及基于PyQt5的用户界面开发过程。系统能够自动识别植物在不同生长阶段（如发芽期、生长期、开花期、结果期等）的形态特征，为精准农业和智能种植提供技术支持。文章提供了完整的代码实现，并讨论了模型优化策略和实际应用场景。关键词：植物生长阶段识别、YOLOv8、目标检测、PyQt5、深度学习。

YOLO 465

react native使用自定义图标iconfont与react-native-vector-icons

react native使用自定图标库及react-native-vector-icons图标库

温壁 1331

汉书HE8，好用的汇编代码编写工具

汉书HE8，好用的汇编代码编写工具早期编写汇编代码所用功能强大

Statistics and Machine Learning Toolbox

Statistics and Machine Learning Toolbox（带书签），MATLAB统计学习工具

app自定义图标 vue_在react-native项目中使用iconfont自定义图标库(android)

1. 安装react-native-vector-iconsyarn add react-native-vector-iconsreact-native link如果没有关联成功的话，可以参考官方文档手动配置一下2. 将从阿里下载的iconfont.tff文件复制到以下目录3.在android/app/build.gradle中添加:project.ext.vectoricons = [icon...

weixin_39842271的博客 323

SIMATIC S7-1200, S7-1500 PID 控制[手册]

ReactNative开发实战——ReactNative 开发中的图标管理方案：基于 Iconfont 的自定义图标库实现

React Native 应用开发中，采用 Iconfont 方案管理业务图标具有显著优势。该方案通过矢量特性实现多分辨率适配，支持动态颜色调整，且体积小巧。实现步骤包括：1) 在 Iconfont 官网创建项目并生成字体文件；2) 编写自动下载脚本生成 TypeScript 定义；3) 封装可复用的图标组件，支持动态大小和颜色配置。该方案解决了移动端图标管理的核心问题，包括渲染性能、包体积优化和跨平台一致性，相比传统图片方案更高效易维护。

羲和实验室 1233

精雕软件(JDpaint) 5.5 绿色版

精雕软件(JDpaint) 5.5 绿色版精雕软件(JDpaint) 5.5 绿色版精雕软件(JDpaint) 5.5 绿色版

react native 使用图标字体(IconFont)

前言今天在做react-native项目时，需要引入图形字体进行使用，但在网上找了很多资料，都是一知半解的，没有说完成，对于像我这样对小白来说很是难受，在经过n久，终于弄好了，现在进行总结一下，希望能给刚进坑的孩童提供帮助，也希望各位大神指点。正文图标字体（IconFont） IconFont，中文常被叫做图标字体或图形字体，是一种特殊的自定义字体，如果想要了解具体的内容，可以查看解密Ic...

sharpdeng的博客 3200

react native newdate 有问题_在React-Native项目中轻松使用iconfont自定义图标

在开发React-Native项目的时候，为了解决图标等一系列问题，往往需要从iconfont中引入图标。为了达到这个目的，网上教程大多都需要额外安装react-native-vector-icons这个库，然后还需要link，不仅费时，还增加了打包后应用程序的大小。偶尔看到其实只要利用React-Native中自带的Text组件，简单的几行代码就可以轻松实现在项目中使用iconfont中的图标。...

weixin_39645308的博客 114

ReactNative如何使用自定义的Iconfont

在App包的构成中图片资源是比较占大小的，所以我们可以利用Iconfont来替代原来的png或者jpg单色图标，iconfont的优点是占Size小、支持任意大小不失真、支持任意颜色设置、平台化管理icon等等。当App项目的大小达到一定规模时，App包的Size也会随之增大，这个时候我们一般会对App包的Size做分析优化来达到减少包大小的目的，利用iconfont来替代项目中原有的...

weixin_34342578的博客 493

3. RN笔记-icon图标的使用和阿里图标的使用

RN笔记-icon图标的使用和阿里图标的使用

不乱于心, 不困于情,不畏将来,不念过往 607

RN TSX基于react-native-vector-icons和iconfont.cn 的生成自定义Icon组件的工具

这里写自定义目录标题欢迎使用Markdown编辑器新的改变功能快捷键合理的创建标题，有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章UML 图表FLowchart流程图导出与导入导出导入欢迎使用Markdown编辑器你好！这是你第一次使用 Markdown编辑器所展示的欢迎页。如果你想学习如何使用Mar

BA陈的博客 3021

npm 发布 ReactNative 阿里 icon-font 插件

代码 GITHUB NPM 缘由最近使用一个生成二维码插件，看了源码，发现没有什么复杂的NATIVE 处理，是一个webview 包裹的 canvas 实现。这给我一个新的启发，可以把一些H5上的实现轻易的集成为RN的插件。开发过程中使用阿里的iconfont，需要集成react-native-vector-icons 库，虽然作者做了很好的封装，但是相比iconfont 在H5上的集成，...

weixin_42117465的博客 253

005.react-navigation使用(二)：配置字体图标&StatusBar状态栏设置

为导航栏配置字体图标 yarn add react-native-svg yarn add react-native-iconfont-cli --dev 在ios中需要安装依赖 cd ios pod install 生成配置文件 npx iconfont-init 生成线上图标库修改iconfont.json { "symbol_url": "http://at.alicdn.com/t/font_2515860_3i4n2umystp.js", "use_typ

黄孝果的博客 2006

React Native 使用自定义字体

参考：http://www.imbeta.cn/zai-react-nativezhong-you-ya-de-shi-yong-iconfont.html 我的知识点补充： 1.什么是unicode编码？就好像ASCII,GB2312一样，也是一套编码标准，规定了用什么数值代表什么字符 2.什么是字符集? 所谓字符集就是各种文字和符合的总称罢了 3.自定义字体是干嘛的?