Skip to content

arniu/react-native-ionicons

Repository files navigation

react-native-ionicons

npm Build Status code style: prettier

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.

I Use Firefox

License

MIT