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 icons like Fontawesome, Material Design, AntDesign, etc.

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.

createIconFont Props:

• commonprops: It defines extra properties to the component.
• scriptUrl: It uses the js URL generated online by icon font.cn, or you can use the local URL.

IconFont Props:

• fill: It is used to fill icon color.
• flip: It is used to flip icons.
• icon: It uses the name from the iconfont icon set.
• pulse: It uses pulse to have it rotate with eight steps.
• rotate: It is used to rotate icons.
• spin: It is used to spin icons.
• style: It is used to change the style properties of icons, like fontSize and color.

Using React 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';

Step 3: Install React Icon package into your project.

npm install react-icons --save

Syntax:

import { Gear} from "@rsuite/icons";

function App() {
 return (
     <Gear fill="red" flip="vertical" style={} spin size="" />
 );
}

Example 1: Below example demonstrates the fill, style, and spin props of react suite icons.

Javascript

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

export default function App() {
  return (
    <center>
      <div>
        <h2>GeeksforGeeks</h2>
        <h4 style={{ color: "green" }}>
            React Suite Icon Props</h4>

        <div style={{ marginTop: 20, width: 400 }}>
          <Gear fill="red" style={{fontSize: 50}} spin />
        </div>
      </div>
    </center>
  );
}

Output:

Example 2: Below example demonstrates the IconFont Props.

Javascript

import "rsuite/dist/rsuite.min.css";
import { createIconFont } from '@rsuite/icons';

const IconFont = createIconFont({
  scriptUrl: '//at.alicdn.com/t/font_2144422_r174s9i1orl.js',
  commonProps: { style: { color: "blue" } },
});

export default function App() {
  return (
    <center>
      <div>
        <h2>GeeksforGeeks</h2>
        <h4 style={{ color: "green" }}>
            React Suite Icon Props</h4>

        <div style={{ marginTop: 20, width: 400 }}>
          <IconFont icon="rs-iconemail" fill="blue"
                    style={{fontSize: 35, marginRight: 10}} />
          <IconFont icon="rs-iconemail-fill" flip="vertical"
                    style={{fontSize: 35}} fill="red" />
        </div>
      </div>
    </center>
  );
}

Output:

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