React Suite Icon Color

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 Icons colors. We can use any color in the react suite icons just by using the style prop of the Icon component.

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 Icons in React Suite:

To use icons in the React suite project, we need to install the following package.

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 { Gear, AddOutline } from '@rsuite/icons';

Syntax:

//Import Statement for Icons
import SpinnerIcon from '@rsuite/icons/legacy/Spinner';

//Function component
Function App () {
    return (
        <SpinnerIcon color: 'red' />
     );
}

Example 1: Below example demonstrates the different icon colors.

Javascript

import GithubSquare from '@rsuite/icons/legacy/GithubSquare';
import LinkedinSquare from '@rsuite/icons/legacy/LinkedinSquare';
import FacebookSquare from '@rsuite/icons/legacy/FacebookSquare';
import React from "react";
import "rsuite/dist/rsuite.min.css";

function App() {

    return (
        <div style={{ padding: 10 }}>
            <h2>GeeksforGeeks</h2>
            <h3 style={{ color: "green" }}>
                React Suite Icons Colors</h3>
            <div>
                <GithubSquare style={{ fontSize: '3rem', }}
                    color="#000" />
                <LinkedinSquare style={{ fontSize: '3rem' }}
                    color="#2D86F7" />
                <FacebookSquare style={{ fontSize: '3rem' }}
                    color="#153FEC" />
            </div>
        </div>
    );
}

export default App;

Output:

Example 2: Below example demonstrates a colored animated Icon.

Javascript

import { Gear } from '@rsuite/icons';
import React from "react";
import "rsuite/dist/rsuite.min.css";

function App() {

    return (
        <div style={{ padding: 10 }}>
            <h2>GeeksforGeeks</h2>
            <h3 style={{ color: "green" }}>
                React Suite Icons Colors</h3>
            <div>
                <Gear spin style={{ fontSize: '3rem', }}
                    color="red" />
            </div>
        </div>
    );
}

export default App;

Output:

Reference: https://rsuitejs.com/components/icon/#color