React Native
How to use vector icons effectively with Material Design Principles.
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
Contact Us