Why We Need:

In today’s era icon is a basic need of all apps, it gives a much better look to your app so today we going to talk about icons, for icon npm provide a great plugin named vector-icon for implementing vector icon, so let’s start the “How to set/use vector icons in react native“, please follow these steps.

How to set/use vector icons in react-native:

For setup vector icons we are going to use third party npm plugin, so let’s start the implementation.

Step1:

install the npm plugin for vector icons.

npm install react-native-vector-icons

Step2:

Link the plugin(only for those whoʼs versions is below 0.61).

react-native link react-native-vector-icons 

Step3:

Now we are going to import the vector icons where itʼs required.

import Icon from 'react-native-vector-icons/dist/FontAwesome'; 

Step4:

Now we are going to implement the vector icons, there are many ways to implement the vector icon here we are going to discuss 2 – important ways, you integrate which you like, so let’s start…

Way1:

Declare a constant variable and store the icon in this, such as

import Icon from 'react-native-vector-icons/dist/FontAwesome'; //setting vector icon dynamically.

const myIcon = <Icon name="comments" size={30} color="#900" solid />; class Home extends Component { 
 constructor(props) {
  super(props);  //define/declare state here.. 
  this.state = { }
 }
render() {
  return( {myIcon} )
}
}

Way2:

In this, we are going to implement the vector icon within render function.

render(){
 return(){
 <Icon name="comments" size={30} color="#900" solid />
}
}

That’s it, I hope you find this post helpful.

So this  “How to set/use vector icons in react native” is completed, “you can find the next issue list here.

and you can find my post on medium as well click here please follow me on medium as well.

And if any other query/issue then please comment.

Happy Coding Guyz.