After writing the post on how to implement using fontaweme icons (free version) in a react project, I have been using only this icon source in many of my react project, which at times is limited.
Today, I found a new, easier and more efficient way of actually using more icon sources in a react project.
Install react-icons package
npm install react-icons --save
Search here for icons to use:
https://react-icons.github.io/react-icons/search?
.
Import found icon for use:
import { BiArrowBack } from 'react-icons/bi';
In this instance, BiArrowBack is being imported, where 'bi' is the icon source.
Call imported icon component for use:
<BiArrowBack />
Voila we've successfully used the react-icons package in our project.
The great thing about this method has compared to the previous one is that different icons can be imported from different sources, as far as their sources are recognized when importing, as in this article case, 'bi' is the source of our imported icon import { BiArrowBack } from 'react-icons/bi';
** Bonus tip - 1
svg icons can also be used in a React project without installing any react-icons or other icon packages. This is achieved by having the svg icons saved in a location of your src folder on your local machine and importing them as individual ReactComponent.
** Bonus tip - 2
If using created / customized icons from figma board, it's important that this icons are exported as svgs so that their states and charateristics can be manipulated, folowing tip - 1.
Do let's know if more light shoud be shed on this.
Stay Blessed,✌ until next time.
Mr Paul Ishaili C.
Top comments (0)