DEV Community

Aya Bouchiha
Aya Bouchiha

Posted on

All You Need To Know About react-icons.

#react #javascript #tutorial #typescript

Hi, I'm Aya Bouchiha, today, we'll talk about one of the most popular react libraries, which is react icons.

What is react-icons?

  • react-icons: is one of the most famous react libraries that provides us the icons of 20+ libraries including font awesome, bootstrap icons, box icons...

  • home page

  • github

Installation 

npm install react-icons --save
Enter fullscreen mode Exit fullscreen mode 
yarn add react-icons
Enter fullscreen mode Exit fullscreen mode

How To Import A Specific Icon 

import { x } from 'react-icons/first-two-letters-of-x';
Enter fullscreen mode Exit fullscreen mode

Example 

import { ExAmple } from 'react-icons/ex';
Enter fullscreen mode Exit fullscreen mode

Real Examples 

// importing from font awesome icons import { FaHtml5 } from 'react-icons/fa'; // importing from bootstrap icons import { BsFillReplyFill } from 'react-icons/bs'; // importing from material design icons import { MdDoneAll } from 'react-icons/md'; // importing from box icons import { BiCalendar } from 'react-icons/bi';
Enter fullscreen mode Exit fullscreen mode

Usage 

import {FaCss3Alt} from 'react-icons/fa'; const Component = () => { return ( <FaCss3Alt /> ): };
Enter fullscreen mode Exit fullscreen mode

Icon Context (Configuration) 

import { IconContext } from "react-icons"; import {FaCss3Alt} from 'react-icons/fa'; const Component = () => { return ( <IconContext.Provider value={{ size:'1.5em', className:'css-icon', style:{margin:'.5em 1emp',}, color:'blue' }} > <FaCss3Alt /> </IconContext.Provider> ): };
Enter fullscreen mode Exit fullscreen mode

Note: by default the size property is 1em.

Suggested Posts

Have a great day!

Top comments (1)

Collapse
 
stevereid profile image
Steve Reid •

I can't see why you've put a typescript hashtag on this post!?!