React-native Demo (+)-react-native-icons Plugin

Source: Internet
Author: User
Tags require

react-native-icons Download

Run NPM install React-native-icons@latest--save at the root of the project and you will see the plugin in the Node_modules directory after the download is complete:


Currently only supports iOS, so only the Xcode configuration: Import reactnativeicons.xcodeproj

1. Right-click on project libraries:

Add Node_modules/react-native-icons/ios/reactnativeicons.xcodeproj under the project root directory
Standalone project, in the right panel, select link Binary with Libraries under Build phases, and click the + sign to add the library:

3. Add a TTF file:
This place needs to be noticed, GitHub is straight on the reference Node_modules/react-native-icons/ios/reactnativeicons/libraries/fontawesomekit folder, But the main one is 4 TTF files:

Standalone project, in the right panel select Build phases under Copy Bundle resources Select +, in the file selector that appears click Add Other ..., navigate to node_modules/react-native-icons/ In the Ios/reactnativeicons/libraries/fontawesomekit directory, select all TTF files and OTF:


To use react-native-icons, you need to add the following statement in your code:

var {
 } = require (' react-native-icons ');
Select Icon
category Number of icons Reference name
Fontawesome 4.4 585 Fontawesome
Ionicons 2.0.0 733 Ion
Foundation icons 283 Foundation
Zocial 99 Zocial
Material Design Icons 744 Material

We found an Apple icon on the FontAwesome4.4 website:

How to use it? Look at the following code:

' Use strict ';

 var React = require (' react-native ');
 var {
 } = require (' react-native-icons ');
 var {
 } = React;

 var testerhome = React.createclass ({
   render () {
     return (< Icon name = ' Fontawesome|apple '
       size = {
       style = {


 var styles = stylesheet.create ({
   container: {
   beer: {
     height: ,
 Appregistry.registercomponent (' Testerhome ', () = Testerhome);


The core code is Fontawesome|apple is that simple. So the reference is the name of the reference name of the library name | The icon, the effect is as follows:

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.