iconfont官网图标和本地RN项目做关联

最新推荐文章于 2024-01-26 14:18:51 发布
最新推荐文章于 2024-01-26 14:18:51 发布
阅读量527 收藏 3
点赞数 2
文章标签： react native icons
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/BlingStarWang/article/details/112216413
版权
本文介绍了如何将iconfont图标与本地React Native项目关联，包括安装`react-native-svg`、生成`iconfont.json`文件、复制官网代码、更新配置并生成图标组件的详细步骤。完成这些步骤后，即可在项目中正常使用iconfont图标。
摘要由CSDN通过智能技术生成

iconfont官网图标和本地RN项目做关联

1在项目终端安装第三方工具

通过 react-native-svg 可以将字体图标转化为组件

yarn add react-native-svg

因为此工具涉及到原生代码，如果你使用的是Mac电脑并且想运行在ios端需以下操作

cd ios
pod install

然后回退到项目根路径，重新安装iOS端,第三方工具才会生效

cd ..
yarn ios

2运行命令将字体转换为字体组件

yarn add -D react-native-iconfont-cli

3执行命令创建iconfont.json文件
执行完毕后该文件就会出现在你项目的根目录中

npx iconfont-init

4打开iconfront官网
找到自己的项目选中Symbol，复制代码

最低0.47元/天 解锁文章
歐陽辰宸
关注
  • 2
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
RN 项目集成测试
09-18
项目：RN集成测试项目； 使用环境：Windows & Android；
阿里iconfont图库官网网址
weixin_30670151的博客
03-25 2647
https://www.iconfont.cn/ 转载于:https://www.cnblogs.com/junyi-bk/p/10595251.html
每个前端都值得拥有自己的组件库，就像每个夏天都拥有西瓜
程序员成长指北
08-08 1316
点击上方程序员成长指北，关注公众号回复1，加入高级Node交流群“大家好，我是洛竹????，一只住在杭城的木系码妖????????‍♀️，如果你喜欢我的文章????，可以通过点赞帮我聚集...
【前端开发】iconfont 阿里巴巴免费矢量图标库超级实用!
最新发布
极客小俊
01-26 2423
国内功能很强大且图标免费内容很丰富的矢量图标库!
(多项目,多个图标库)阿里图标库symbol使用手册, 微信小程序引入多个阿里矢量图标库
Supaopao的博客
06-01 479
修改小程序项目根目录iconfont.json文件，symbol_url字段类型由 string 改为 array, 复制iconfont官网你的项目的Symbol链接。
使用iconfont阿里多色矢量图标
qq_26642611的博客
01-17 1022
一、问题与解决方法 问题：虽然unicode和font-class很好，但你会发现都不支持多色模式。 解决：引用方法名symbol来解决。 通过mini-program-iconfont-cli 把iconfont图标批量换成多个平台小程序的组件。不依赖字体，支持多色彩。 特性 ● 纯组件 ● 不依赖字体文件 ● 支持px和rpx两种格式 ● 原样渲染多色彩图标 ● 图标颜色可定制 二、实现步骤： 步骤1：安装插件 Yarn yarn add mini-program-iconfont-cli --dev
狗狗说RN项目
09-06
"狗狗说RN项目"是一个基于React Native（RN）开发的移动应用程序，主要用作初学者学习和实践RN技术的基础平台。React Native是Facebook推出的一种跨平台的移动应用开发框架，它允许开发者使用JavaScript和React来...
react-native-iconfont-cli：把iconfont.cn的图标转换成标准RN组件，不依赖字体，支持多色彩，支持热更新
02-05
通常地，当我们想在RN里使用iconfont，我们可能会替换react-native-vector-icons导入ttf字体文件，或者直接手动下载多个svg文件到本地，然后拆分使用。 使用TTF字体有一个弊端，就是每次更新图标，都要相应的更新TTF...
RN2890D计量芯片电路参考和代码
05-24
RN2890D是一款高性能的计量芯片，广泛应用于智能电表和其他能源管理系统中。这款芯片的主要功能是精确测量电力消耗，确保电表的准确性和可靠性。RN2890D设计精巧，集成了多种功能，如电压、电流测量，功率计算，以及...
美团RN项目
07-31
1，请确保你已经安装了React Native所需要的环境（Android sdk环境，前端环境）。 相关资料：http://reactnative.cn/docs/0.46/getting-started.html 2，使用npm工具安装项目依赖的库(在项目目录下)：npm install
vue-iconfont：更优雅地使用Iconfont.cn，同时支持font-class♡和symbol丨
02-05
Vue Iconfont 更优雅地使用 ，同时支持font-class 引入和symbol 引入。 安装 # Yarn yarn add vue-iconfont # npm npm i vue-iconfont CDN： | （可通过window.VueIconfont使用） 使用 首先用Vue.use安装VueIconfont ： import Vue from 'vue' import VueIconfont from 'vue-iconfont' Vue . use ( VueIconfont /*, options*/ ) // ...... 然后就可以在组件中这样使用：
[RN] React Native 使用 阿里巴巴 矢量图标库 iconfont
weixin_30608503的博客
05-14 519
React Native 使用 阿里巴巴 矢量图标库 iconfont 文接上文： React Native 使用精美图标库react-native-vector-icons 本文主要讲述 如何 使用 阿里巴巴 矢量图标库 iconfont 一、找字体文件 访问 iconfont 官网 https://www.iconfont.cn 下载对应的图标库 笔者推荐几个本...
ReactNative --- 引入彩色图标iconfont [react-native-iconfont-cli]
weixin_40906761的博客
11-14 1026
ReactNative — 引入彩色图标iconfont 最近遇到的问题，记一笔 文档：https://github.com/iconfont-cli/react-native-iconfont-cli 通常地，在RN里使用iconfont，我们借助react-native-vector-icons导入ttf字体文件。 使用ttf字体有一个弊端，就是每次更新图标，都要相应的更新ttf文件，然后再次...
react native 使用图标字体(IconFont)
sharpdeng的博客
05-17 2957
前言 今天在做react-native项目时，需要引入图形字体进行使用，但在网上找了很多资料，都是一知半解的，没有说完成，对于像我这样对小白来说很是难受，在经过n久，终于弄好了，现在进行总结一下，希望能给刚进坑的孩童提供帮助，也希望各位大神指点。 正文 图标字体（IconFont） IconFont，中文常被叫做图标字体或图形字体，是一种特殊的自定义字体，如果想要了解具体的内容，可以查看 解密Ic...
ReactNative如何使用自定义的Iconfont
weixin_34342578的博客
04-07 399
在App包的构成中图片资源是比较占大小的，所以我们可以利用Iconfont来替代原来的png或者jpg单色图标，iconfont的优点是占Size小、支持任意大小不失真、支持任意颜色设置、平台化管理icon等等。 当App项目的大小达到一定规模时，App包的Size也会随之增大，这个时候我们一般会对App包的Size做分析优化来达到减少包大小的目的，利用iconfont来替代项目中原有的...
react-native系列(12)图标篇：使用阿里字体库iconfont图标和svg详解
@黄小泽的个人博客
03-05 7242
在前端开发中，经常会用到iconfont图标库来管理图标，在RN开发中有时候同样需要如此。在百度上搜索过RN相关的图标管理方案，发现都较为复杂。于是写下了本篇博客，为大家介绍另外两种更优化的图标应用的方案，供大家学习参考。 iconfont图标 该方案同样适用于字体变更。从iconfont库下载好图标脚本，结构如下： 打开iconfont.ttf文件，我们看一下字体全称是什么？正常情况下...
layui-Iconfront 图标库使用
weixin_34007886的博客
05-09 1715
2019独角兽企业重金招聘Python工程师标准>>> ...
react native项目中使用阿里iconfont字体图标的终极方案，无它！
qq_37284484的博客
03-11 634
一、配置 在项目根下面创建目录assets/fonts/，并将下载的.ttf字体文件放入之； 在项目根下面创建文件react-native.config.js，里面内容如下： module.exports = { assets: ['./assets'] }; 执行react-native link即可（这步实际上是可选的）。 二、使用 通过Text组件使用（结合unicode码使用，可...
rn项目使用线上iconfont
06-07
您好！感谢您的提问！ 如果您在React Native项目中需要使用线上的Iconfont，可以按照以下步骤进行操作： 1. 在项目中安装react-native-vector-icons插件，该插件提供了使用Iconfont的组件。 ``` npm install react-native-vector-icons --save ``` 2. 在Iconfont官网上选择您需要的图标，并将其加入购物车。 3. 进入购物车页面，选择React Native的平台，并下载对应的字体文件。 4. 将下载的字体文件放入项目中的某个文件夹中，比如`/assets/fonts/`。 5. 在项目中的`package.json`文件中添加以下代码： ``` "rnpm": { "assets": [ "./assets/fonts/" ] } ``` 该代码的作用是将字体文件加入React Native的资源管理中。 6. 在项目中使用Iconfont组件，示例代码如下： ``` import Icon from 'react-native-vector-icons/FontAwesome'; // 引入字体文件 Icon.loadFont(); // 使用Iconfont组件 <Icon name="rocket" size={30} color="#900" /> ``` 其中，`name`属性为Iconfont中图标的名称，`size`为图标大小，`color`为图标颜色。 希望以上步骤能够帮助到您，如有疑问，请随时提出。
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值