React-native-ionicons NPM

react-native-ionicons

Bring Ionicons - Beautifully crafted open source icons to your awesome react-native apps.

Usage

Install

npm install react-native-ionicons@^4.x

Or:

yarn add react-native-ionicons@^4.x

Link with react-native (Optional)

Since v0.60, react-native link was replaced by the autolinking mechanism. So, needn't do this when you're using React Native 0.60+.

react-native link react-native-ionicons

Use it

import Icon from 'react-native-ionicons'

const IconBar = () => (
  <View>
    <Icon name="add" />
    <!-- This is same to the following: -->
    <Icon ios="ios-add" android="md-add" />
  </View>
)

Install instructions for Windows projects

Open the windows project file (.sln) in Visual Studio
Right click the Assets folder and select Add Existing
Browse to the node_modules\react-native-ionicons\fonts folder and select the font file
Click the Add drop-down and select Add as Link
In Visual Studio, select the font file in the Assets folder
Set the Copy To Output Directory property to Copy if newer
Save changes and recompile the project

Prop Types

Name	Type	Default	Description
name	`IconName`	-	Icon name used on all platforms
android	`IconName`	-	Icon name for Android devices
ios	`IconName`	-	Icon name for iOS devices
color	`?string`	-	Icon color
size	`?number`	30	Icon size, namely `fontSize`

IconName can be of short name or qualified name, which is the short one preffixed with md- or ios-.
The short IconName can be found here.

Versioning

We DOT NOT use SemVer for versioning. Though you can think about SemVer when reading our version, except our major number follow the one of Ionicons.