React Native
How to use vector icons effectively with Material Design Principles.
Need technical help?
Our experts will get back to you within 24 hours.
Introduction
React Native Vector Icons provide a powerful way to include scalable, customizable icons in your apps. In this tutorial, we’ll learn how to use this library, create a reusable VectorIcon component, and render various icons in a structured way.
Installation
First, install the react-native-vector-icons library. This library includes icons from popular sets like FontAwesome, Ionicons, MaterialIcons, and many more.
Open your terminal and navigate to your React Native project.
Run the following command:
yarn add react-native-vector-iconsLinking the Library If you're using React Native CLI, link the library manually: npx react-native link react-native-vector-icons For Expo users, the library is pre-installed, so no need to link it.
Font Configuration For iOS, ensure the font files are included in your Xcode project:
1. Drag the files from node_modules/react-native-vector-icons/Fonts into this section. 2. Go to Xcode > Your Project> drop item here
For Android, the font files are automatically linked if you're using the latest version of React Native.
Creating a Reusable Vector Icon Component
Managing multiple icon libraries can become tedious, so let's build a flexible and reusable component.
import React from 'react';import { View } from 'react-native';import FontAwesome from 'react-native-vector-icons/dist/FontAwesome';import FontAwesome5 from 'react-native-vector-icons/dist/FontAwesome5';import MaterialCommunityIcons from 'react-native-vector-icons/dist/MaterialCommunityIcons';import MaterialIcons from 'react-native-vector-icons/dist/MaterialIcons';import Feather from 'react-native-vector-icons/dist/Feather';import AntDesign from 'react-native-vector-icons/dist/AntDesign';import Entypo from 'react-native-vector-icons/dist/Entypo';import Ionicons from 'react-native-vector-icons/dist/Ionicons';import EvilIcons from 'react-native-vector-icons/dist/EvilIcons';import Octicons from 'react-native-vector-icons/dist/Octicons';import Fontisto from 'react-native-vector-icons/dist/Fontisto';const VectorIcon = ({ name, size, color, type, onPress, style }) => { return ( <View style={style}> {type === 'MaterialCommunityIcons' ? ( <MaterialCommunityIcons name={name} size={size} color={color} onPress={onPress} /> ) : type === 'FontAwesome' ? ( <FontAwesome name={name} size={size} color={color} onPress={onPress} /> ) : type === 'FontAwesome5' ? ( <FontAwesome5 name={name} size={size} color={color} onPress={onPress} /> ) : type === 'Feather' ? ( <Feather name={name} size={size} color={color} onPress={onPress} /> ) : type === 'AntDesign' ? ( <AntDesign name={name} size={size} color={color} onPress={onPress} /> ) : type === 'Entypo' ? ( <Entypo name={name} size={size} color={color} onPress={onPress} /> ) : type === 'Ionicons' ? ( <Ionicons name={name} size={size} color={color} onPress={onPress} /> ) : type === 'EvilIcons' ? ( <EvilIcons name={name} size={size} color={color} onPress={onPress} /> ) : type === 'Octicons' ? ( <Octicons name={name} size={size} color={color} onPress={onPress} /> ) : type === 'Fontisto' ? ( <Fontisto name={name} size={size} color={color} onPress={onPress} /> ) : ( <MaterialIcons name={name} size={size} color={color} onPress={onPress} /> )} </View> );};export default VectorIcon;Using the Component
Here’s how you can integrate the reusable component into your app:
import React from 'react';import { ScrollView, StyleSheet, Text, View } from 'react-native';import VectorIcon from './src/component/VectorIcon';const App = () => { const Header = () => ( <View style={styles.headerView}> <Text style={styles.titleText}>VectorIcon</Text> </View> ); return ( <View style={styles.container}> <Header /> <ScrollView showsVerticalScrollIndicator={false}> <View style={styles.iconContainer}> <VectorIcon type="AntDesign" color="black" name="tabletl" size={100} /> <VectorIcon type="AntDesign" color="black" name="redenvelopes" size={180} /> <VectorIcon type="AntDesign" color="black" name="adduser" size={100} /> </View> <View style={styles.iconContainer}> <VectorIcon type="Entypo" color="red" name="500px" size={98} /> <VectorIcon type="Entypo" color="red" name="area-graph" size={96} /> <VectorIcon type="Entypo" color="red" name="add-user" size={98} /> </View> {/* Add more groups of icons here */} </ScrollView> </View> );};const styles = StyleSheet.create({ container: { flex: 1, backgroundColor: '#fff', // Example background color }, headerView: { alignItems: 'center', // Center the title paddingVertical: 20, // Add some padding borderBottomWidth: 1, // Add a bottom border borderBottomColor: '#ccc', // Border color }, titleText: { fontSize: 24, fontWeight: 'bold', }, iconContainer: { flexDirection: 'row', // Arrange icons horizontally flexWrap: 'wrap', // Allow wrapping to the next line justifyContent: 'space-around', // Distribute space around icons padding: 10, // Add some padding around icons },});export default App;Key Features of the Component
- Dynamic Icon Loading: The VectorIcon component dynamically loads the correct library based on the type prop.
- Customizability: Easily change the icon name, size, color, or add an onPress handler.
- Reusable: Use this component across your app to maintain consistency and reduce redundancy.
Conclusion
This reusable component simplifies the management of icons from different libraries in a React Native project. You can easily integrate any icon from the react-native-vector-icons library with just a few props.
Ready to transform your business with our technology solutions? Contact Us today to Leverage Our React Native Expertise.
React Native
