React Native Vector Icon

Muo Sigma Classes | Piyush Bajpai

Hi guys, i hope you all are good.

In this tutorial i will show you who to setup and how to make common handling component for React Native Vector Icon.

https://youtu.be/JDWvxnOqhxU

Generally people are using vector icon in a way, there they are just importing the package and every time they use by writing every handling code multiple time. so you guys dont need to do this.

i am giving you the component code and i will teach you how to use it.

lets get started.

step1 — make your react native project

react-native init project_name

and then install react native vector icon package using this command

npm i react-native-vector-icons

For android we do not need to do anything else.

For IOS one we need to defined the family name in info.plist.

How to do this?

Don’t worry i am also giving you this code. look at down.

<key>UIAppFonts</key>
<array>
<string>ProductSans-Black.ttf</string>
<string>ProductSans-BlackItalic.ttf</string>
<string>ProductSans-Bold.ttf</string>
<string>ProductSans-BoldItalic.ttf</string>
<string>ProductSans-Italic.ttf</string>
<string>ProductSans-Light.ttf</string>
<string>ProductSans-LightItalic.ttf</string>
<string>ProductSans-Medium.ttf</string>
<string>ProductSans-MediumItalic.ttf</string>
<string>ProductSans-Regular.ttf</string>
<string>ProductSans-Thin.ttf</string>
<string>ProductSans-ThinItalic.ttf</string>
<string>EvilIcons.ttf</string>
<string>Ionicons.ttf</string>
<string>MaterialCommunityIcons.ttf</string>
<string>Feather.ttf</string>
</array>

dont say thanks, its oky , just go to my youtube channel see the same in video
https://youtu.be/JDWvxnOqhxU

Get Muo sigma classes’s stories in your inbox

Join Medium for free to get updates from this writer.

Remember me for faster sign in

And now the main important part of this blog, that you want to see is the react native vector icon component code.

import React from ‘react’;
import IconFeth from ‘react-native-vector-icons/Feather’;
import MetIcons from ‘react-native-vector-icons/MaterialCommunityIcons’;
export default function VectorIcon(props) {
return (
<>
{props.familyName == ‘Feather’ && (
<IconFeth
color={props.color}
onPress={props.onPress}
name={props.status ? props.primaryName : props.secondaryName}
size={25}
/>
)}
{props.familyName == ‘MaterialCommunityIcons’ && (
<MetIcons
color={props.color}
onPress={props.onPress}
name={props.status ? props.primaryName : props.secondaryName}
size={25}
/>
)}
</>
);
}

just put this component in your common components.

and follow me for next.

Now you have to use this react native vector icon component in your parent component for that you have to import your react native vector icon component.

Like this.

Import from the location

import VectorIcon from “../../../component/VectorIcon”;

and use it.

<VectorIcon
familyName={“Feather”}
status={eyeIcon}
primaryName={“eye-off”}
secondaryName={“eye”}
onPress={() => setEyeIcon(!eyeIcon)}
/>

Thanks for reading.