Bring Ionicons - Beautifully crafted open source icons to your awesome react-native apps.
- 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>
)
- 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
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 withmd-
orios-
.The short
IconName
can be found here.
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.