React Suite Icon extension React Icons

A React suite is a library of React components, sensible UI design, and a friendly development experience. It is supported in all major browsers. It provides pre-built components of React which can be used easily in any web application.

In this article, we’ll learn about React Suite Icon extension React icons. React Icons, contains various popular libraries of icons like Fontawesome, Material Design, AntDesign, etc.

Icon Props

• as: It is used to add a custom SVG icon component.
• fill: It is used to fill icon color.
• flip: It is used to flip icon.
• pulse: It is used to rotate icon with eight steps.
• rotate: It is used to rotate icon.
• spin: It is used to spin the icon.
• style: It is used to add or change icon styles.

Using React Icons Component:

Step 1: Install the @rsuite/icons package into your project directory.

npm install --save @rsuite/icons

Step 2: Import the Icons in your function component from the package.

import { Icon } from '@rsuite/icons';

Step 3: Install React Icon package into your project.

npm install react-icons --save

Syntax:

//Import Statement
import { FaHome } from "react-icons/fa";

//Functional Component
function App() {
  return (
    <div>
        <Icon as={FaHome} />
    </div>
  );
}

Example 1: Below example demonstrates the animated React icons.

Javascript

import { Icon } from '@rsuite/icons';
import {
    FaSpinner as FaSpinnerIcon
} from 'react-icons/fa';
import React from "react";
import "rsuite/dist/rsuite.min.css";

function App() {

    return (
        <div style={{ padding: 10 }}>
            <h2>GeeksforGeeks</h2>
            <h4 style={{ color: "green" }}>
                React Suite Icon extension React Icons
            </h4>
            <div style={{
                display: 'flex',
                flexDirection: 'row',
                alignItems: 'center'
            }}>
                <Icon pulse as={FaSpinnerIcon}
                    style={{ fontSize: 40 }} color="red" />
                <Icon pulse as={FaSpinnerIcon}
                    style={{ fontSize: 30, marginLeft: 10 }}
                    color="red" />
                <Icon pulse as={FaSpinnerIcon}
                    style={{ fontSize: 20, marginLeft: 10 }}
                    color="red" />
                <Icon pulse as={FaSpinnerIcon}
                    style={{ fontSize: 15, marginLeft: 10 }}
                    color="red" />
            </div>
        </div>
    );
}

export default App;

Output:

Example 2: Below example demonstrates the different types of react icons like Fa, Md, Io, Ai, etc.

Javascript

import { Icon } from '@rsuite/icons';
import { AiOutlineHome } from "react-icons/ai";
import { IoHomeOutline } from "react-icons/io5";
import { MdHome } from "react-icons/md";
import { FaHome } from "react-icons/fa";
import React from "react";
import "rsuite/dist/rsuite.min.css";

function App() {
    return (
        <div style={{ padding: 10 }}>
            <h2>GeeksforGeeks</h2>
            <h4 style={{ color: "green" }}>
                React Suite Icon extension React Icons
            </h4>
            <div style={{
                display: 'flex',
                flexDirection: 'row',
                alignItems: 'center'
            }}>
                <Icon as={AiOutlineHome}
                    style={{ fontSize: 40 }} color="orange" />
                <span style={{ marginLeft: 10 }}>
                    AntDesign Icon</span>
                <Icon as={IoHomeOutline}
                    style={{ fontSize: 40 }} color="red" />
                <span style={{ marginLeft: 10 }}>
                    Ionicon Icon</span>
                <Icon as={FaHome}
                    style={{ fontSize: 40 }} color="green" />
                <span style={{ marginLeft: 10 }}>
                    Font Awesome Icon</span>
                <Icon as={MdHome}
                    style={{ fontSize: 40 }} color="blue" />
                <span style={{ marginLeft: 10 }}>
                    Material Design Icon</span>
            </div>
        </div>
    );
}

export default App;

Output:

Reference: https://rsuitejs.com/components/icon/#react-icons