ReactJS UI Ant Design Icon Component

Ant Design Library has this component pre-built, and it is very easy to integrate as well. Icon Component are very useful as Icons are required for every application for UI purposes. We can use the following approach in ReactJS to use the Ant Design Icon Component.

Common Icon Props:

• className: It is used to denote the class name of the icon.
• rotate: It is used to rotate the icon by n degrees.
• spin: It is used to rotate the icon with animation.
• style: It is used to pass the style props to the icon like size, border, etc.
• twoToneColor: It is used for the two-tone icon.

Custom Icon Props:

• component: It is used to denote the component which is used for the root node.
• rotate: It is used to rotate the icon by n degrees.
• spin: It is used to rotate the icon with animation.
• style: It is used to pass the style props to the icon like size, border, etc.

Custom Font Icon Props:

• extraCommonProps: It is used to define the extra properties to the component.
• scriptUrl: It is used to denote the URL which is generated by iconfont.cn project.

Custom SVG Icon Props:

• className: It is used to pass the class name for this element.
• fill: It is used to define the color which is filled in the SVG icon.
• height: It is used to set the height of the SVG icon.
• style: It is used to pass the style props to the SVG icon like size, border, etc.
• width: It is used to set the width of the SVG icon.

Creating React Application And Installing Module:

• Step 1: Create a React application using the following command:

  npx create-react-app foldername

• Step 2: After creating your project folder i.e. foldername, move to it using the following command:

  cd foldername

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

  npm install antd
  npm install --save @ant-design/icons

Project Structure: It will look like the following.

Project Structure

Example: Now write down the following code in the App.js file. Here, App is our default component where we have written our code.

App.js

import React from 'react'
import "antd/dist/antd.css";
import {
  SyncOutlined,
  HeartTwoTone,
  SmileOutlined,
  HomeOutlined,
  LoadingOutlined,
  CheckCircleTwoTone,
  SmileTwoTone,
  SettingFilled,
} from '@ant-design/icons';

export default function App() {

  return (
    <div style={{ display: 'block', width: 700, padding: 30 }}>
      <h4>ReactJS Ant-Design Icon Component</h4>
      <HomeOutlined />
      <br />
      <SmileOutlined rotate={180} />
      <br />
      <SyncOutlined spin />
      <br />
      <SmileTwoTone />
      <br />
      <LoadingOutlined />
      <br />
      <HeartTwoTone twoToneColor="yellow" />
      <br />
      <SettingFilled />
      <br />
      <CheckCircleTwoTone twoToneColor="orange" />
      <br />
      <SmileOutlined /> <br />
    </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:

Reference: https://ant.design/components/icon/