In this post, I will try not to enter in comparing icon sets because the one you choose will depend on the project itself and your personal preferences.
I am going to talk about a library that includes some popular icon sets, more than 20, and the possibility of working with all of them at the same time with some interesting features.
This library it's called react-icons and it has got more than five thousand stars.
react-icons / react-icons
svg react icons of popular icon packs
You can look for any icon here
Basic Usage
To use this library you have only got to add the node package and import the component you want.
yarn add react-icons
# or
npm i react-icons
import { FaBeer } from 'react-icons/fa'
const Question = () => (
<h3> Lets go for a <FaBeer />? </h3>
)
Reducing Bundle Size
You can reduce the bundle size by adding a different package that includes all the icons in separated files.
yarn add @react-icons/all-files
# or
npm i @react-icons/all-files
import { FaBeer } from "@react-icons/all-files/fa/FaBeer"
const Question = () => (
<h3> Lets go for a <FaBeer />? </h3>
)
Extended Features
This powerful package does also come with an option to configure all icons props: configuration
It is basically a react context where you can set some properties of all the icons you render below.
import { IconContext } from "react-icons"
const IconContextProvider = ({children}) => (
<IconContext.Provider value={{ color: "blue", className: "global-class-name" }}>
{children}
</IconContext.Provider>
)
Extra
You can check here it's documentation where everything is clearly explained.
I encourage you to share in the comments below if you knew this library, if you have worked with it, or even if you have anything to add to my explanation.
Top comments (0)