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.

Share the Love

License

MIT