【react native】矢量图标react-native-vector-icons的使用（4）

最新推荐文章于 2025-05-14 14:02:13 发布

原创最新推荐文章于 2025-05-14 14:02:13 发布 · 362 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#react-native

react native 同时被 2 个专栏收录

21 篇文章

订阅专栏

react native再回顾系列

8 篇文章

订阅专栏

本文介绍如何在React Native项目中安装并配置react-native-vector-icons库，包括使用yarn或npm进行安装，以及针对iOS和Android平台的特定配置步骤。

安装

yarn add react-native-vector-icons --save
//或者
cnpm install react-native-vector-icons --save
//或者
npm install react-native-vector-icons --save

配置（IOS）

添加配置代码
ios/info/plist中，下图位置处将这部分代码粘贴进去：

<key>UIAppFonts</key>
<array>
  <string>AntDesign.ttf</string>
  <string>Entypo.ttf</string>
  <string>EvilIcons.ttf</string>
  <string>Feather.ttf</string>
  <string>FontAwesome.ttf</string>
  <string>FontAwesome5_Brands.ttf</string>
  <string>FontAwesome5_Regular.ttf</string>
  <string>FontAwesome5_Solid.ttf</string>
  <string>Foundation.ttf</string>
  <string>Ionicons.ttf</string>
  <string>MaterialIcons.ttf</string>
  <string>MaterialCommunityIcons.ttf</string>
  <string>SimpleLineIcons.ttf</string>
  <string>Octicons.ttf</string>
  <string>Zocial.ttf</string>
</array>

在这里插入图片描述

pod install

配置（Android）

进入android/app/build.gradle目录,粘贴以下代码

apply from: "../../node_modules/react-native-vector-icons/fonts.gradle"

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

Smileyqp沛沛

关注关注

0
点赞
踩
0

收藏

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

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

react-native实战之使用图标库react-native-vector-icons

蛐蛐的博客

04-18

955

文档：https://github.com/oblador/react-native-vector-icons 图标：https://oblador.github.io/react-native-vector-icons/ 1.简介非常适合按钮，徽标和导航/标签栏。易于扩展，样式化和集成到您的项目中。 2.图标集 Browse all. AntDesignby AntFinance (297icons) Entypoby Daniel Bruce (411ic...

react-native之react-native-vector-icons

dingqk的博客

08-06

1715

在RN中使用react-native-vector-icons图标库引用方式，在项目根目录打开命令行执行以下命令 npm install react-native-vector-icons –save react-native link react-native-vector-icons 打开xcode点击想目—》info.plist 就能查到已经被引用，如下图：（以iOS为例）随后再清一下...

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

ReactNative开发中使用react-native-vector-icons

水痕

12-14

1785

1、安装图标库 npm install react-native-vector-icons --save 2、运行命令 react-native link 3、查找自己的图标传送门 4、使用 import Icon from 'react-native-vector-icons/FontAwesome'; <Button transparent> <Icon name='gitlab' size=

React Native框架开发APP，安装免费的图标库（react-native-vector-icons）并使用详解

Zh.快乐的程序猿的博客

03-28

1725

React Native框架开发APP，安装免费的图标库（react-native-vector-icons）并使用详解

ReactNative图标库 _ react-native-vector-icons 配置和使用

灵魂和肉体总要有一个在路上

11-20

2940

图标库地址 https://github.com/oblador/react-native-vector-icons 步骤一：下载图标库 //要是安装报错，就再执行一次 npm install --save react-native-vector-icons 步骤二：在android/app/build.gradle引入配置 project.ext.vectoricons = [ iconFontNames: [ 'MaterialIcons.ttf', 'EvilIcons.ttf' ]

ReactNative系列之图标组件react-native-vector-icons的使用

Define_best的博客

10-30

1690

ReactNative系列之图标组件react-native-vector-icons的使用

React Native矢量图标全攻略：从入门到自定义iconfont的高级玩法

热门推荐

Angels_安杰的博客

03-08

1万+

RN开发中难免会用到图标，今天我们来集成github上比较受欢迎的一个强大的icons库。先上效果图源码已分享之码云：https://git.oschina.net/osczaizai/RNWeiBo 更多分享请看 http://cherylgood.cn 可通过下面链接直接搜索你想要的icons Browse all. Entypo by Daniel Bruce (

react-native-vector-icons的简单使用

05-07

react-native-vector-icons的简单使用, index.ios.js文件等主要代码

安装 react-native-vector-icons及使用

weixin_43143467的博客

04-18

963

react-native-vector-icons 安装 iOS 和 Android 平台配置和使用该库的详细指南

记录xcode和android调试器的报错合集

weixin_39388536的博客

03-04

708

xcode 1.旧版本升到新版本出现字体重复链接等问题 error: Multiple commands produce '/Users/user/App/marathon-app-new/ios/build/marathonAppNew/Build/Products/Debug-iphonesimulator/marathonAppNew.app/Entypo.ttf': 1) Target 'marathonAppNew' (project 'marathonAppNew') has copy comm

React-Native 使用 React-Native-Vector-Icons 引入 iconfont 文字矢量图标

journeyIT的博客

01-16

1646

iconfont(阿里巴巴矢量图标库) 1.使用命令行工具进行 react-native-vector-icons 工具的安装： npm install react-native-vector-icons --save 安装完成之后在package.json文件中可以看到新增了一行 "react-native-vector-icons": "^5.0.0", 2.使用命令 rea...

React Native react-native-vector-icons 使用小记

uuq的专栏

11-13

1万+

网页可以使用很多小图标，React Native 怎么使用图标呢，网上也有人使用过，总结下http://www.cnblogs.com/moxiaoyan33/p/5482024.html 参考这个基本上会成功 ICONS是可以直接使用图片名, 就能加载图片的三方,使用很方便, 你不需要在工程文件夹里塞各种图片, 节省很多空间,下面就来看看怎么使用吧! 首先打开terminal进入到我们的工程文

React Native项目中集成react-native-vector-icons

iOS_开发

08-10

421

????????关注后回复“进群”，拉你进程序员交流群????????作者丨xiangzhihong来源：https://segmentfault.com/a/119000003996...

react-native中使用react-native-vector-icons图标库

一键写代码的博客

12-28

4055

react-native-vector-icons 内置了FontAwesome、 antDesign等常用图标库，还可以支持自定义。 RN0.6以上如何使用？ 1、安装： npm i react-native-vector-icons -D 安装命令。 2、安装完成后，还是需要执行 react-native link 虽然react-native 0.6版本以上有了autolink 。但是还是需要执行一下，否则图标不显示。 3、重新安装app后，引入使用。 import Icon from 'react-

react native字体图标react-native-vector-icons的使用

koufulong的博客

07-05

4402

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

react-native引入react-native-vector-icons

九段刀客的博客

08-06

826

1、安装依赖 yarn add react-native-vector-icons 2、Android代码添加配置 android/build.gradle下添加 project.ext.vectoricons = [ iconFontNames: [ 'MaterialCommunityIcons.ttf','MaterialIcons.ttf','AntDesign.ttf' ] // 指定要使用的字体库。 ] apply from: "../../node_modules/react-na

React Native react-native-vector-icons 使用小记

大赚万万亿

03-30

1187

原文:https://blog.csdn.net/uuq/article/details/53150841备注:icon.buttonimport Icon from 'react-native-vector-icons/FontAwesome'; const myButton = ( <Icon.Button name="facebook" backgroundColor="#3b59...