React Suite Icon Animating

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 Icon Animating. The icons in the react suite provide the props for animation. The icons can be animated in two ways: spin and pulse.

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

Syntax:

//Import Icons
import {Reload} from '@rsuite/icons';

//Functional Component
function App() {
  return (
      <div>
        <Reload spin size="5em" />
        <Reload pulse />
      </div>
  );
}

Example 1: Below example demonstrates the basic animated icon.

Javascript

import { Reload } from '@rsuite/icons'; 
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 Icons Animating 
            </h4> 
            <div> 
                <Reload spin  
                    style={{ fontSize: '2em' }}  
                    color="black" /> 
            </div> 
        </div> 
    ); 
} 
  
export default App;

Output:

Example 2: Below example demonstrates the colored animated icon with a text.

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> 
            <h4 style={{ color: "green" }}> 
                React Suite Icons Animating 
            </h4> 
            <div style={{  
                display: 'flex',  
                flexDirection: 'row',  
                alignItems: 'center' 
            }}> 
                <SpinnerIcon pulse  
                    style={{ fontSize: '2em' }}  
                    color="red" /> 
                <h6 style={{ marginLeft: 10 }}> 
                    Loading your content... 
                </h6> 
            </div> 
        </div> 
    ); 
} 
  
export default App;