Skip to content
Related Articles

Related Articles

React Suite Icon extension Font awesome icons

View Discussion
Improve Article
Save Article
  • Last Updated : 13 Jun, 2022
View Discussion
Improve Article
Save Article

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 Font Awesome Icons. In react suite, we can also use all types of font-awesome icons to build our web application. Here, Font awesome provides 3 sets of open source icons package in react suite.

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.

Creating React Application And Installing Module:

Step 1: Create a React application using the given command:

npm create-react-app projectname

Step 2: After creating your project, move to it using the given command:

cd projectname

Step 3: Now Install the rsuite node package using the given command:

npm install rsuite

Project Structure: Now your project structure should look like the following:

 

Using Font Awesome Icons:

Step 1: Install the @rsuite/icons package into your project directory.

npm install --save @rsuite/icons

Step 2: Install Font Awesome icons package:

npm install --save @fortawesome/free-brands-svg-icons
npm install --save @fortawesome/free-regular-svg-icons
npm install --save @fortawesome/free-solid-svg-icons

Syntax:

//Import Statement
import * as faGoogle  from "@fortawesome/free-brands-svg-icons/faGoogle";
import { Icon} from "@rsuite/icons";

//Function component
Function App () {
 return (
       <Icon as={FaSvgIcon} faIcon={faTwitter} 
           style={{ color: "#61dafb" }} />
  );
}

Example 1: Below example demonstrates the basic font awesome icons.

Javascript




//App.js File 
import { Icon } from "@rsuite/icons";
import * as faTwitter from "@fortawesome/free-brands-svg-icons/faTwitter";
import * as faGoogle from "@fortawesome/free-brands-svg-icons/faGoogle";
import * as faGithub from "@fortawesome/free-brands-svg-icons/faGithub";
import React from "react";
import "rsuite/dist/rsuite.min.css";
  
function App() {
    const FaSvgIcon = ({ faIcon, ...rest }) => {
        const { width, height, svgPathData } = faIcon;
        return (
            <svg
                {...rest}
                viewBox={`0 0 ${width} ${height}`}
                width="5em"
                height="5em"
                fill="currentColor"
            >
                <path d={svgPathData}></path>
            </svg>
        );
    };
    return (
        <div style={{ padding: 10 }}>
            <h2>GeeksforGeeks</h2>
            <h4 style={{ color: "green" }}>
                React Suite Font Awesome Icons</h4>
  
            <div
                style={{ display: "flex", flexDirection: "row"
                         alignItems: "center" }}
            >
                <Icon as={FaSvgIcon} faIcon={faTwitter} 
                    style={{ color: "#61dafb" }} />
                <Icon as={FaSvgIcon} faIcon={faGoogle} 
                    style={{ color: "red", marginLeft: 10 }} />
                <Icon as={FaSvgIcon} faIcon={faGithub} 
                    style={{ color: "black", marginLeft: 10 }} />
            </div>
        </div>
    );
}
  
export default App;


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

npm start

Output: 

 

Example 2: Below example demonstrates the animated font awesome icons with text.

Javascript




import { Icon } from "@rsuite/icons";
import * as faSpinner from "@fortawesome/free-solid-svg-icons/faSpinner";
import React from "react";
import "rsuite/dist/rsuite.min.css";
  
function App() {
    const FaSvgIcon = ({ faIcon, ...rest }) => {
        const { width, height, svgPathData } = faIcon;
        return (
            <svg
                {...rest}
                viewBox={`0 0 ${width} ${height}`}
                width="2em"
                height="2em"
                fill="currentColor"
            >
                <path d={svgPathData}></path>
            </svg>
        );
    };
    return (
        <div style={{ padding: 10 }}>
            <h2>GeeksforGeeks</h2>
            <h4 style={{ color: "green" }}>
                React Suite Font Awesome Icons</h4>
            <div>
                <Icon as={FaSvgIcon} faIcon={faSpinner} spin 
                    style={{ color: "green" }} />
                <span style={{ marginLeft: "10px" }}>
                    Loading Content...</span>
            </div>
        </div>
    );
}
  
export default App;


Output:

 

Reference: https://rsuitejs.com/components/icon/#font-awesome-icons


My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!