React Suite Icon Flip and rotate

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 Flip and Rotate. The Icons in the react suite can be flipped and rotated at various angles. The icons can be horizontally and vertically flipped.

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

Syntax:

//Import statement
import Time from '@rsuite/icons/Time';

//functional component
<div>
    <Time rotate={90} />
    <Time flip="horizontal" />
</div>

Example 1: Below example demonstrates the flip icon in react suite.

Javascript

import Question2 from '@rsuite/icons/legacy/Question2'; 
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 Flip and Rotate</h4> 
            <div style={{ display: 'flex', flexDirection: 'row',  
                alignItems: 'center' }}> 
                <Question2 flip='horizontal' style={{ fontSize: 30 }}  
                    color="green" /> 
                <span style={{ marginLeft: 10 }}> 
                    Horizontal Flip icon</span> 
                <Question2 flip='vertical' style={{ fontSize: 30,  
                    marginLeft: 10 }} color="green" /> 
                <span style={{ marginLeft: 10 }}> 
                    Vertical Flip icon</span> 
            </div> 
        </div> 
    ); 
} 
  
export default App;

Steps to run the application: Write the below code in the terminal to run the server up:

npm start

Output:

Example 2: Below example demonstrates the rotating icon in react suite.

Javascript

import Time from '@rsuite/icons/Time'; 
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 Flip and Rotate</h4> 
            <div style={{ 
                display: 'flex', flexDirection: 'row', 
                alignItems: 'center'
            }}> 
                <Time rotate={90} style={{ fontSize: 30 }} 
                    color="green" /> 
                <span style={{ marginLeft: 10 }}> 
                    Rotated at 90deg</span> 
                <Time rotate={180} style={{ fontSize: 30,  
                    marginLeft: 10 }} color="green" /> 
                <span style={{ marginLeft: 10 }}> 
                    Rotated at 180deg</span> 
                <Time rotate={270} style={{ 
                    fontSize: 30, 
                    marginLeft: 10 
                }} color="green" /> 
                <span style={{ marginLeft: 10 }}> 
                    Rotated at 270deg</span> 
                <Time rotate={360} style={{ 
                    fontSize: 30, 
                    marginLeft: 10 
                }} color="green" /> 
                <span style={{ marginLeft: 10 }}> 
                    Default</span> 
            </div> 
        </div> 
    ); 
} 
  
export default App;