Using Icons from different libraries on a React application


React - Icons

February 12, 2020

alt text

Hey guys, what's up?
So, on on the past two weeks i shared two tips showing you how to use icons on a website with Font Awesome library and how to use icons without any library (tips 133 and 125). Today i want to show you how we can easily add icons on a React application 👍

To do this, we'll be using a library called 'react-icons'. This library is awesome because it let us use icons from different libraries ( FontAwesome, Typicons, Material Design Icons, DevIcons, and a bunch more) and it's super easy to use. I suggest you visit their website - react-icons.netlify.con - to browse through all the icons you can use.

alt text

We'll start by installing this library by doing ' npm install react-icons' on our project. Then, we just need to go a Component and import the icons that we want. We can this by writing ' import { someIcon } from 'react-icons/fa' ', where 'fa' is the icon library that we want to use. - Now, inside our Component's return we just need to use that Icon as a component, so: ' '. We can also give it a class if we want. We can then style it with CSS by using 'fill' to set the color of the icon, 'stroke' to set the strole color of the icon and 'font-size' to set the size of the icon!

alt text

Hope you liked this tip, have a nice one 😎✌️