React Suite Icon Size

Last Updated : 08 Jun, 2022

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 sizes. React suite icons can change their size by using basic CSS properties.

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
import SpinnerIcon from '@rsuite/icons/legacy/Spinner';

//Function component
Function App () {
    return (
    <SpinnerIcon style={{ fontSize: '1em'}} />
  );
}

Example 1: Below example demonstrates the different icon sizes.

Javascript

import Github from '@rsuite/icons/legacy/Github'; 
import React from "react"; 
import "rsuite/dist/rsuite.min.css"; 
  
function App() { 
  
    const GitIcon = ({ size }) => <Github  
        style={{ fontSize: size }} />; 
  
    return ( 
        <div style={{ padding: 10 }}> 
            <h2>GeeksforGeeks</h2> 
            <h3 style={{ color: "green" }}> 
                React Suite Icons Sizes 
            </h3> 
            <div> 
                <GitIcon size="1em" /> 
                <GitIcon size="2em" /> 
                <GitIcon size="3em" /> 
                <GitIcon size="4em" /> 
                <GitIcon size="5em" /> 
                <GitIcon size="6em" /> 
            </div> 
        </div> 
    ); 
} 
  
export default App;

Output:

Example 2: Below example demonstrates the different sizes of colored animated Icons.

Javascript

import SpinnerIcon from '@rsuite/icons/legacy/Spinner'; 
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 Sizes 
            </h3> 
            <div> 
                <SpinnerIcon spin style={{ fontSize: '1em',  
                    marginRight: 5, color: 'red' }} /> 
  
                <SpinnerIcon spin style={{ fontSize: '2em',  
                    marginRight: 5, color: 'green' }} /> 
  
                <SpinnerIcon spin style={{ fontSize: '3em',  
                    marginRight: 5, color: 'blue' }} /> 
  
                <SpinnerIcon spin style={{ fontSize: '4em',  
                    marginRight: 5, color: 'yellow' }} /> 
                  
                <SpinnerIcon spin style={{ fontSize: '5em',  
                    marginRight: 5, color: 'orange' }} /> 
                      
                <SpinnerIcon spin style={{ fontSize: '6em' }} /> 
            </div> 
        </div> 
    ); 
} 
  
export default App;