All You Need To Know About react-icons.

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

yarn add react-icons

How To Import A Specific Icon

import { x } from 'react-icons/first-two-letters-of-x';

Example

import { ExAmple } from 'react-icons/ex';

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';

Usage

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

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>
    ):
};

Note: by default the size property is 1em.

Suggested Posts

• Do You Like Using Your Phone To Evolve Your Productivity and Your Coding Skills ? Here are 15 Mobile Apps That Will Help You to!
• My Favourite Library For Providing Logging In & Logging Out With Google Functionalities In My React Apps
• Projects Tutorials For Learning React.js
• Resources to master 5 popular react libraries

Have a great day!

Comments

[Steve Reid]

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