Open In App

React Suite Icon <Icon> Props

Last Updated : 05 Jul, 2022
Improve
Improve
Like Article
Like
Save
Share
Report

React Suite is a popular front-end library with a set of React components that are designed for the middle platform and back-end products.

There is a lot of data that gets rendered on a web page. Sometimes we require to represent data using icons. This is when the Icon component allows the user to add icons to your application. Icons are commonly used in every application for UI purposes.

React Suite Icon <Icon> Props:

  • fill: It is used to fill the icon with a specific color.
  • componentClass: It is used to pass a custom element for this component.
  • flip: It is used to flip the icon.
  • pulse: We can use pulse to have it rotate with 8 steps. It takes a boolean value.
  • rotate: It is used to rotate the icon.
  • spin: It is used for the dynamic rotation icon. It takes a boolean value.
  • style: It is used to set font size or color properties of icons.

Syntax:

<AndroidIcon flip="..." style={{...}}  
             fill="..." rotate={...}/>

Approach: Let us create a React project and install React Suite module. Then we will create a UI that will showcase React Suite Icon Props.

Creating React Project:

Step 1: To create a react app, you need to install react modules through npx command. “npx” is used instead of “npm” because you will need this command in your app’s lifecycle only once.

npx create-react-app project_name

Step 2: After creating your react project, move into the folder to perform different operations.

cd project_name

Step 3: After creating the ReactJS application, Install the required module using the following command:

npm install rsuite

Project Structure: It will look like this:

Project Structure

Example 1: We are creating a UI that shows different React Suite Icon props.

App.js




import React from 'react'
import '../node_modules/rsuite/dist/rsuite.min.css';
import AndroidIcon from '@rsuite/icons/Android';
  
export default function App() {
    return (
        <div style={{ margin: 100 }}>
            <h1 style={{ color: 'green' }}>
                GeeksforGeeks
            </h1>
            <h1>
                React Suite Icon Props
            </h1> <br></br>
            <AndroidIcon style={{ fontSize: '2em', margin: '2%' }} 
                         fill="green" />
            <AndroidIcon flip="vertical" 
                         style={{ fontSize: '2em', margin: '2%' }} 
                         fill="green" />
            <AndroidIcon rotate={90} 
                         style={{ fontSize: '2em', margin: '2%' }} 
                         fill="green" />
            <AndroidIcon rotate={270} 
                         style={{ fontSize: '2em', margin: '2%' }} 
                         fill="green" />
        </div>
    );
}


Step to Run Application: Run the application using the following command from the root directory of the project:

npm start

Output: Now open your browser and go to http://localhost:3000/, you will see the following output:

React Suite Icons

Example 2: We are creating a UI that shows different React Suite Icon props.

App.js




import React from 'react'
import '../node_modules/rsuite/dist/rsuite.min.css';
import GearIcon from '@rsuite/icons/Gear';
  
export default function App() {
    return (
        <div>
            <h1 style={{ color: 'green' }}>
                GeeksforGeeks
            </h1>
            <h1>
                React Suite Icon Props
            </h1>
            <p>
                Normal Icon
                <GearIcon 
                    style={{ fontSize: '5em', margin: '2%' }} 
                    fill="green" />
            </p>
            <p>
                Icon with pulse prop
                <GearIcon pulse={true
                    style={{ fontSize: '5em', margin: '2%' }} 
                    fill="green" />
            </p>
            <p>
                Icon with spin prop
                <GearIcon spin={true
                     style={{ fontSize: '5em', margin: '2%' }} 
                     fill="green" />
            </p>
        </div>
    );
}


Output: Now open your browser and go to http://localhost:3000/, you will see the following output:

React Suite Icons

Reference: https://rsuitejs.com/components/icon/#code-lt-icon-gt-code



Similar Reads

React Suite Icon &lt;IconFont&gt; Props
React Suite is a popular front-end library with a set of React components that are designed for the middle platform and back-end products. There is a lot of data that gets rendered on a web page. Sometimes we require to represent data using icons. This is when the Icon component allows the user to add icons to your application. Icons are commonly u
3 min read
React Suite Icon Props
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 Props. React Icons, contains various popular libraries of ico
3 min read
React Suite Icon createIconFont Props
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 Prop createIconFont. React suite contains various popular lib
2 min read
How React handle or restrict Props to certain types, or require certain Props to exist ?
In React, data can be transmitted from a parent component to its children using props. PropTypes, a feature in React, facilitates runtime type checks on these props, issuing warnings in the browser console if the checks fail. This ensures data consistency and helps catch potential issues during development. Syntax: import PropTypes from 'prop-types
2 min read
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
3 min read
React Suite Loader &lt;Loader&gt; Props
React Suite is a popular front-end library with a set of React components that are designed for the middle platform and back-end products. There is a lot of data that gets rendered on a web page. Sometimes it takes time to load up the data. This is when the Loader component allows the user to show the loading effect. It can be used to show the load
3 min read
React Suite &lt;Pagination&gt; Props
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 Prop &lt;Pagination&gt;. &lt;Pagination&gt; component is used to a
3 min read
React Suite Dropdown Extends button props
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 dropdown extended button props. As we know that the default value
4 min read
React Suite &lt;Stack&gt; Props
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 &lt;Stack&gt; props. &lt;Stack&gt; component is used to layout compo
3 min read
React Suite Grid &lt;Col&gt; Props
React Suite is a popular front-end library with a set of React components that are designed for the middle platform and back-end products. The grid component allows the user to provide 24 grids. It helps in achieving response design. There are different props for react suite grid rows and columns for the user to design. &lt;Grid.Col&gt; Props: as:
5 min read