DEV Community

Aya Bouchiha
Aya Bouchiha

Posted on

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
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!

Discussion (0)