WARNING: This library is discontinued, I highly recommend using https://github.com/oblador/react-native-vector-icons
There's far bigger problems to solve in the open source and React Native communities than competing icon libraries so I'll be focusing on pushing forward other initiatives.
Includes 5 different icon fonts and 2,444 icons.
npm install react-native-icons@latest --saveIf you need to support React Native version < 0.12.0-rc use:
npm install [email protected] --saveNote that 0.4.0 does not support Android.
- In XCode, in the project navigator right click
Libraries➜Add Files to [your project's name] - Go to
node_modules➜react-native-icons➜iosand addReactNativeIcons.xcodeproj - Add
libReactNativeIcons.a(from 'Products' under ReactNativeIcons.xcodeproj) to your project'sBuild Phases➜Link Binary With Librariesphase - Add the font files you want to use into the
Copy Bundle Resourcesbuild phase of your project (click the '+' and click 'Add Other...' then choose the font files fromnode_modules/react-native-icons/ios/ReactNativeIcons/Libraries/FontAwesomeKit). - Run your project (
Cmd+R)
- In
android/setting.gradle
...
include ':react-native-icons'
project(':react-native-icons').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-icons/android')- In
android/app/build.gradle
...
dependencies {
...
compile project(':react-native-icons')
}- register module (in MainActivity.java)
import com.smixx.reactnativeicons.ReactNativeIcons; // <--- import
import java.util.Arrays; // <--- import this if you want to specify which fonts to load
import com.smixx.reactnativeicons.IconFont; // <--- import this if you want to specify which fonts to load
public class MainActivity extends Activity implements DefaultHardwareBackBtnHandler {
......
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
mReactRootView = new ReactRootView(this);
mReactInstanceManager = ReactInstanceManager.builder()
.setApplication(getApplication())
.setBundleAssetName("index.android.bundle")
.setJSMainModuleName("index.android")
.addPackage(new MainReactPackage())
.addPackage(new ReactNativeIcons()) // <------ add here
.setUseDeveloperSupport(BuildConfig.DEBUG)
.setInitialLifecycleState(LifecycleState.RESUMED)
.build();
mReactRootView.startReactApplication(mReactInstanceManager, "example", null);
setContentView(mReactRootView);
}
......
}- Copy the font files and .json files for the fonts you want to use into
android/app/src/main/assetsfromnode_modules/react-native-icons/fonts
- Tab Bar
- Stacked Icons
Custom fonts are not yet supported for iOS
2. Create a myfontname.json mapping file for the font, this is used to look up the mapping file and is used
Create json file (newiconfont.json) that contains a map of css names to HTML encoded unicode characters., examples in /fonts directory
{
"alert": "",
"alert-circled": "",
"android-add": "",
"android-add-circle": "",
...
}- Copy font file and .json file to your apps assets directory 3.) In MainActivity.java, add the icon font, first parameter is the prefix you want to use (ex. typicons|globe), second is the filename of the font.
mReactInstanceManager = ReactInstanceManager.builder()
.setApplication(getApplication())
.setBundleAssetName("index.android.bundle")
.setJSMainModuleName("index.android")
.addPackage(new MainReactPackage())
.addPackage(new ReactNativeIcons(Arrays.asList(
new IconFont("typicons", "typicons.ttf")
)))
.setUseDeveloperSupport(BuildConfig.DEBUG)
.setInitialLifecycleState(LifecycleState.RESUMED)
.build();- You only need to include the icon font files you want to use
- Icon style must set a width and height, or the icon will not be visible
- You may need to restart your node server for the icon font files to be included.
- An icon has a name, size, and a color (optional)
- Color can be provide via the color property or via a style
var { Icon, } = require('react-native-icons');
<Icon
name='ion|beer'
size={150}
color='#887700'
style={styles.beer}
/>
<Icon
name='zocial|github'
size={70}
color='black'
style={styles.github}
/>
<Icon
name='fontawesome|facebook-square'
size={70}
color='#3b5998'
style={styles.facebook}
/>
<Icon
name='foundation|lightbulb'
size={30}
color='#777777'
style={styles.lightbulb}
/>
<Icon
name='material|face'
size={30}
color='#333333'
style={styles.face}
/><Icon
name='fontawesome|square'
size={80}
color='#55acee'
style={styles.twitterOutline}>
<Icon
name='fontawesome|twitter'
size={50}
color='#ffffff'
style={styles.twitterIcon}/>
</Icon>With the following styles to center them:
var styles = StyleSheet.create({
twitterOutline: {
flexDirection: 'column',
width: 70,
height: 70,
alignItems: 'center'
},
twitterIcon: {
flex: 1,
width: 40,
height: 40
},
});var { TabBarIOS, } = require('react-native-icons');
var TabBarItemIOS = TabBarIOS.Item;
var Example = React.createClass({
getInitialState: function() {
return {
selectedTab: 'home',
notifCount: 0,
presses: 0,
};
},
render: function () {
return (
<TabBarIOS
selectedTab={this.state.selectedTab}
tintColor={'#c1d82f'}
barTintColor={'#000000'}
styles={styles.tabBar}>
<TabBarItemIOS
name="home"
iconName={'ion|ios-home-outline'}
selectedIconName={'ion|ios-home'}
title={''}
iconSize={32}
accessibilityLabel="Home Tab"
selected={this.state.selectedTab === 'home'}
onPress={() => {
this.setState({
selectedTab: 'home',
});
}}>
{this._renderContent()}
</TabBarItemIOS>
<TabBarItemIOS
name="articles"
iconName={'ion|ios-paper-outline'}
selectedIconName={'ion|ios-paper'}
title={''}
iconSize={32}
accessibilityLabel="Articles Tab"
selected={this.state.selectedTab === 'articles'}
onPress={() => {
this.setState({
selectedTab: 'articles',
});
}}>
{this._renderContent()}
</TabBarItemIOS>
<TabBarItemIOS
name="messages"
iconName={'ion|chatboxes'}
title={''}
iconSize={32}
accessibilityLabel="Messages Tab"
selected={this.state.selectedTab === 'messages'}
onPress={() => {
this.setState({
selectedTab: 'messages',
});
}}>
{this._renderContent()}
</TabBarItemIOS>
<TabBarItemIOS
name="settings"
iconName={'ion|ios-gear-outline'}
selectedIconName={'ion|ios-gear'}
title={''}
iconSize={32}
accessibilityLabel="Settings Tab"
selected={this.state.selectedTab === 'settings'}
onPress={() => {
this.setState({
selectedTab: 'settings',
});
}}>
{this._renderContent()}
</TabBarItemIOS>
</TabBarIOS>
);
}
});Note: selectedIconName is optional. It defaults to iconName if not set. Also, there's another optional property named selectedIconSize, if you need to change the icon size when the tab is selected.
- FontAwesome 4.4 Contains 585 icons
- ionicons 2.0.0 Contains 733 icons, lots of iOS 7 style outlined icons.
- Foundation icons Contains 283 icons.
- Zocial Contains 99 social icons.
- Material design icons Contains 777 icons. View the Cheatsheet
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent
