React Suite Icon extension Font awesome icons

Last Updated : 13 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 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;