A React Native wrapper on top of [https://github.com/PrideChung/FontAwesomeKit].
Currently FontAwesomeKit supports 4 different icon fonts.
- FontAwesome 4.2 Contains 479 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.
An icon has a name, size, and a color (optional)
npm install react-native-icons@latest --save- In XCode, in the project navigator right click
Libraries➜Add Files to [your project's name] - Go to
node_modules➜react-native-icons➜ ios and addReactNativeIcons.xcodeproj - Add
libReactNativeIcons.a(from 'Products' under ReactNativeIcons.xcodeproj) to your project'sBuild Phases➜Link Binary With Librariesphase - Drag ReactNativeIconsResources.bundle into the
Copy Bundle Resourcesbuild phase of your project (from 'Products' under ReactNativeIcons.xcodeproj) and also drag the .bundle into theCopy Bundle Resourcesbuild phase of the ReactNativeIcons project. - Click
ReactNativeIcons.xcodeprojin the project navigator and go to theBuild Settingstab. Look forUser Search Pathsand make sure it contains$(SRCROOT)/../../react-native/React, make sure to set it asrecursive(double click on the path to see the recursive option). - Make sure you set 'Always Search User Paths' to 'Yes'
- Run your project (
Cmd+R)
<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='fontawesome|square'
size={80}
color='#55acee'
style={styles.twitterOutline}>
<Icon
name='fontawesome|twitter'
size={50}
color='#ffffff'
style={styles.twitterIcon}/>
</Icon>
var Example = React.createClass({
getInitialState: function() {
return {
selectedTab: 'home',
notifCount: 0,
presses: 0,
};
},
render: function () {
return (
<SMXTabBarIOS
selectedTab={this.state.selectedTab}
tintColor={'#c1d82f'}
barTintColor={'#000000'}
styles={styles.tabBar}>
<SMXTabBarItemIOS
name="home"
iconName={'ion|ios-home-outline'}
title={''}
iconSize={32}
accessibilityLabel="Home Tab"
selected={this.state.selectedTab === 'home'}
onPress={() => {
this.setState({
selectedTab: 'home',
});
}}>
{this._renderContent()}
</SMXTabBarItemIOS>
<SMXTabBarItemIOS
name="articles"
iconName={'ion|ios-paper-outline'}
title={''}
iconSize={32}
accessibilityLabel="Articles Tab"
selected={this.state.selectedTab === 'articles'}
onPress={() => {
this.setState({
selectedTab: 'articles',
});
}}>
{this._renderContent()}
</SMXTabBarItemIOS>
<SMXTabBarItemIOS
name="messages"
iconName={'ion|chatboxes'}
title={''}
iconSize={32}
accessibilityLabel="Messages Tab"
selected={this.state.selectedTab === 'messages'}
onPress={() => {
this.setState({
selectedTab: 'messages',
});
}}>
{this._renderContent()}
</SMXTabBarItemIOS>
<SMXTabBarItemIOS
name="settings"
iconName={'ion|ios-gear'}
title={''}
iconSize={32}
accessibilityLabel="Settings Tab"
selected={this.state.selectedTab === 'settings'}
onPress={() => {
this.setState({
selectedTab: 'settings',
});
}}>
{this._renderContent()}
</SMXTabBarItemIOS>
</SMXTabBarIOS>
);
}
});
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent