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
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
Share your thoughts in the comments
Please Login to comment...