ReactJS Semantic UI icon element

Semantic UI is a modern framework used in developing seamless designs for the website, It gives the user a lightweight experience with its components. It uses the predefined CSS, JQuery language to incorporate in different frameworks.

In this article we will know how to use icon elements in ReactJS Semantic UI. Icon element is a visual representation of any element which can be a link or some representation.

States:

• Disabled: we can use as a disable icon.
• Loading: we can use as a loading 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: Install semantic UI in your given directory.

   npm install semantic-ui-react semantic-ui-css

Project Structure: It will look like the following.

Example 1: In this example, we will use a icon component with state of icons as enabled by using ReactJS Semantic UI Icon element.

App.js

import React from 'react'
import {Icon} from 'semantic-ui-react'

const styleLink = document.createElement("link");
styleLink.rel = "stylesheet";
styleLink.href =
"https://cdn.jsdelivr.net/npm/semantic-ui/dist/semantic.min.css";
document.head.appendChild(styleLink);

const Btt = () =>(
<div>
    <br/>
    <Icon enabled name='angle double left' size='big' />
    <Icon enabled name='angle left' size='big' />
    <Icon enabled name='circle' size='big' />
    <Icon enabled name='angle right' size='big' />
    <Icon enabled name='angle double right' size='big' />

</div>
)

export default Btt

Step to Run Application: Run the application  from the root directory of the project, using the following command.

npm start

Output:

Example 2: In this example, we will use a icon component with state of icons as disabled by using ReactJS Semantic UI Icon element

App.js

import React from 'react'
import {Icon} from 'semantic-ui-react'

const styleLink = document.createElement("link");
styleLink.rel = "stylesheet";
styleLink.href =
"https://cdn.jsdelivr.net/npm/semantic-ui/dist/semantic.min.css";
document.head.appendChild(styleLink);

const Btt = () =>(
<div>
    <br/>
    <Icon disabled name='angle double left' size='big' />
    <Icon disabled name='angle left' size='big' />
    <Icon disabled name='circle' size='big' />
    <Icon disabled name='angle right' size='big' />
    <Icon disabled name='angle double right' size='big' />

</div>
)

export default Btt

Step to Run Application: Run the application  from the root directory of the project, using the following command.

npm start

Output:

Example 3: In this example, we will use a icon component with state of icons as loading by using ReactJS Semantic UI Icon element.

App.js

import React from 'react'
import {Icon} from 'semantic-ui-react'

const styleLink = document.createElement("link");
styleLink.rel = "stylesheet";
styleLink.href =
"https://cdn.jsdelivr.net/npm/semantic-ui/dist/semantic.min.css";
document.head.appendChild(styleLink);

const Btt = () =>(
<div>
    <br/>
    <Icon loading name='angle double left' size='big' />
    <Icon loading name='angle left' size='big' />
    <Icon loading name='circle' size='big' />
    <Icon loading name='angle right' size='big' />
    <Icon loading name='angle double right' size='big' />

</div>
)

export default Btt

Step to Run Application: Run the application  from the root directory of the project, using the following command.

npm start

Output:

Reference: https://react.semantic-ui.com/elements/icon