React Native Vector Icons

Steps To Use Vector Icons In React Native

To utilize Vector Icons, follow the steps below:

1. Do a new project in React Native.
2. Configure the Dependency (react-native-vector-icons)
3. CocoaPods should be installed.
4. Android Importing Icon Files iOS Importing Icon Files
5. Finally, add the icon component to your project and begin working with it.

Vector Icon Component

We must import the react-native-vector-icons requirement for the Vector Icons, which will give two components:

• Icon Component
• Icon.Button Component

Icon component

This Icon component can be used to make icons. In Android and iOS, the prop "name" will render the icon.

Example:<Icon name="rexa" size={30} color="#900" />

Icon.Button Component

A tool for making buttons with a left-hand icon.

These components will also be used in our example. Now that we've covered the basics let's move on to the example. In this example, we'll make a simple screen with multiple icons and execute it in Android.

Installation Of Dependency

Install the react-native-vector-icons dependency to use the Icon component. The backgroundborder radiusis 

To do so, open a terminal window and navigate to your project.

cd ProjectName

Run the command below.

npm install react-native-vector-icons

All dependencies will be copied into your node module directory using this command. – It's only to change the react-native-vector-icons dependency in your package.json file that you need to save.

Importing IconFiles In Android

To use Vector Icons on Android, we must first import the react-native-vector-icons icons.

• In android/app/src/main, create an assets/fonts directory.
• Copy all the font files from node modules/react-native-vector-icons/Fonts into the fonts directory once it's been created.

Example To Use Vector Icon In React Native

// Import React
import React from 'react';
// Import required component
import {SafeAreaView, StyleSheet, Text, View} from 'react-native';
// Import vector icons
import Icon from 'react-native-vector-icons/FontAwesome';
const App = () => {
 return (
   <SafeAreaView style={{flex: 1}}>
     <View style={{flex: 1, padding: 16}}>
       <View style={styles.container}>
         <Text style={styles.heading}>
           Example to Use React Native Vector Icons
         </Text>
         <View style={styles.iconContainer}>
          
         </View>
         <View style={{marginTop: 16, marginBottom: 16}}>
           {/* Icon.Button Component */}
           <Icon.Button
             name="facebook"
             backgroundColor="#3b5998"
             onPress={() => alert('Login with Facebook')}>
             Login with Facebook
           </Icon.Button>
         </View>
       </View>
  
     </View>
   </SafeAreaView>
 );
};
const styles = StyleSheet.create({
 container: {
   flex: 1,
   alignItems: 'center',
   justifyContent: 'center',
 },
 heading: {
   fontSize: 20,
   textAlign: 'center',
   marginBottom: 20,
 },

});
export default App;

Output

Frequently Asked Questions

In react-native, what are vector icons?

The most popular custom icons in the NPM GitHub collection are React Native Vector Icons. It has a collection of over 3000 icons. All of these icons are completely free to use. The React Native Vector icons allow comprehensive customization, including icon size, color, and styling options.

Is it possible to use react icons with react-native?

You can use the react-native vector icon as an icon. It has a variety of icons that we can use in your project to give it a more native appearance.

What's the best way to unlink react-native vector icons?

You may now unlink this dependency with "react-native unlink," which will be automatically included in your app. Ignore this message and notify the library maintainers if a library isn't compatible with auto-linking.

Are the react icons in SVG format?

Fortunately, with React, we can quickly develop a new SVG component that allows us to place our custom SVG icons anywhere we want.

How do you make an icon with an input field?

Icons are commonly added to webpages using the I and span> tags to add icons inside the input element. The fontawesome URL inside the head tag is required to add any icons to the web pages or in any specified region. Using the fa prefix before the icon's name, the fontawesome icon can be put.

Conclusion

In this article, we learned about Vector icons with the help of an example. This article discussed different topics like a list of vector icons, steps to use vector icons, and their types with the installation process. 

Refer to our Guided Path on Coding Ninjas Studio to upskill yourself in Data Structures and Algorithms, Competitive Programming, JavaScript, System Design, and many more! If you want to test your competency in coding, you may check out the mock test series and participate in the contests hosted on Coding Ninjas Studio! But if you have just started your learning process and are looking for questions asked by tech giants like Amazon, Microsoft, Uber, etc; you must look at the problems, interview experiences, and interview bundle for placement preparations.

Nevertheless, you may consider our paid courses to give your career an edge over others!

Do upvote our blogs if you find them helpful and engaging!

Happy Learning!