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

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