React Native Vector Icons

React Native Vector Icon is an npm library for vector icons that are used in a react project. It is a well-known library that has more than 3000 icons that are completely free to be utilized. React native vector icon libraries include icons like navigation buttons, bars, logos, tab bars, and more. All the icons for this library are highly interactive that can make yfour React project more interesting.

React Native Vector Icon allows you to customize every icon for your app. You can change its color, size, position, multiple styling, etc. These icons can be placed anywhere in the react app and configured for a certain task.

Vector icons are much convenient when you have to reduce the space occupied. Instead of text, you can use these icons to convey the data in an interactive manner. This library has icons for every category, and thereby you can find the perfect icon that suits your requirements. Once you import icons, you can sue them in both Android and IOs without any performance degradations.

There are several categories in which icons are distributed in the React Native Vector Icon. They are mentioned below.

1. Entypo. By Daniel Bruce (consists 411 icons).
2. SimpleLineIcons by Sabbir and patrons (includes 189 icons).
3. FontAwesome 5 by Fonticons, Inc. (includes 1500 free and 5082 pro icons.)
4. EvilIcons. by Alexander Madyankin and Roman Shamin (consists 70 icons).
5. Feather provider: Cole Bemis & Contributors (consists 279 icons).
6. FontAwesome from Dave Gandy (consists 675 icons).
7. MaterialCommunityIcons from MaterialDesignIcons.com (consists 3695 icons)
8. Zocial from Sam Collins (includes 100 icons)
9. Fontisto. by Kenan Gündo?an (consists, 615 icons).
10. AntDesign form AntFinance (consists of 297 icons.)
11. Foundation. By ZURB, Inc. (consists of 283 icons).
12. Ionicons by Ben Sperry (includes 696 icons)
13. MaterialIcons. by Google, Inc. (consists 932 icons).
14. Octicons from Github, Inc. (consists of 184 icons).

Installation:

To install the React Native Vector Icon library, you will need to create your React project and set up the file, to begin with, the coding. After this, write the following command in the command window of the project folder. If you need any help, try search for top react js development company for further assistance.

Npm install react-native-vector-icons –save .

The above code will install the required dependencies for the React library into your device folder. The save keyword is used for updating the React Native Vector Icon library form the package.json. Hence it is not mandatory to be written.

In the higher versions of React(form 0.60), the linking of the library is done automatically by react. Do you not need to link unless you are using a lower version of React. To link the library, use the below-mentioned code;

react-native link react-native-vector-icons

Configuration of the Icon Component:

In the icon Component, you can make your own ions or can use one from the icon library. With the icon component, you are able to import as many as the icon you desire to include in your React project. The structure of the icon component is as follows:

import Icon from 'react-native-vector-icons/FontAwesome'; 
const myIcon = <Icon name="rocket" size={30} color="#900" />;

This component will import the Rocket icon in your project, and the size and colour properties will be applied to it. In addition to the above colour and size stylizing properties, there are several more. React Native Vector Icon library allows you to experiment with a large collection of properties with your icons. They are as follows:

1. backgroundColor
2. borderWidth.
3. borderColor
4. border-radius.
5. Padding.
6. Margin.
7. colour
8. fontSize.

Creating an icon button component:

In the react Native vector Icon library you can choose from a vast collection of icons that can be linked to an address. These vector icons can also act as buttons for performing a task, on click. An example for this operation is depicted below:

import Icon from 'react-native-vector-icons/FontAwesome';
const myButton = (
  <Icon.Button
    name="facebook"
    backgroundColor="#3b5998"
    onPress={this.loginWithFacebook}
  >
   Login with Facebook
  </Icon.Button>
);

const customTextButton = (
  <Icon.Button name="facebook" backgroundColor="#3b5998">
    <Text style={{ fontFamily: 'Arial', fontSize: 15 }}>
      Login with Facebook
    </Text>
  </Icon.Button>
);

The above program is designing a button for Facebook. This button takes you to the Facebook login page after you click on the icon. In the icon.button component, the icon type is specified, and the function type is written. After that, formatting is done for an icon; it includes text in the icon and its font styles and color.

The react native vector icon library also consists of Ionicons. These icons are capable of carrying out material and IOS specific designs. For using these icons, a specific convention has to be followed. Here prefixes like ios- and md- are used to integrate them into a certain platform. With these prefixes, you can import icons that are used in a specific platform like android or IOS.

For instance, you want to insert an add icon from the IOS platform for that you should use ios- prefix in the name of the icon. The below component explains the code.

import Icon from "react-native-vector-icons/Ionicons"; 

// ...
<Icon
 name="ios-add"
 color="#ccc"
 size={25}
/>

You can do this work more efficiently by enabling the automatic naming of the icon according to the platform. To do this, you can use the React native Platform module, where you can target a specific platform. After this, all your names will be written in the version of the chosen platform.

import { Platform } from "react-native";
import Icon from "react-native-vector-icons/Ionicons";

// ...
<Icon
 name={Platform.OS === "ios" ? "ios-add" : "md-add"}
 color="#ccc"
 size={25}
/>

Also read:

React Spring: An wonderful animation library for Reactjs developers | by Fayaz Shaik | Medium

Fayaz Shaik ・ May 18, 2023 ・

quikieapps.Medium

Multiple styling of Fonts:

React Native Vector Icon library allows you to use more than one style to a specific font. This library has the support of FontAwesome 5 that allows you to add multiple stylizing effects to the elements. Adding styling with the use of FontAwesome 5 is very similar to the standard procedure for creating an icon component. You can understand the structure with the help of the given program:

import Icon from 'react-native-vector-icons/FontAwesome5';

const myIcon1 = <Icon name="comments" size={30} color="#900" />; // Defaults to regular
const myIcon2 = <Icon name="comments" size={30} color="#900" solid />;
const myIcon3 = <Icon name="comments" size={30} color="#900" light />; // Only in FA5 Pro

Final Verdict:

React Native Vector Icon library has a variety of icons that can be used during the development of applications. These icons are easy to understand and handle. Also, they are customizable to a very extent, so that you can design an icon that is feasible for you. With the help of this library, you can add animations to the icons to make your react project have exceptional performance.

React Native Vector Icon library is the most used library for inserting icons. Besides, it is made up of icons for every category that is designed by various developers.

QuikieAppsFollow

As one of the top-ranked software development companies, QuikieApps offers innovative and expert level solutions.