ReactJS Semantic UI icon element

13 Jun, 2021
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 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 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
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
Semantic-UI
ReactJS
Web Technologies
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Axios in React: A Guide for Beginners
ReactJS useNavigate() Hook
How to install bootstrap in React.js ?
How to create a multi-page website using React.js ?
How to do crud operations in ReactJS ?
Top 10 Projects For Beginners To Practice HTML and CSS Skills
Installation of Node.js on Linux
Difference between var, let and const keywords in JavaScript
How to insert spaces/tabs in text using HTML/CSS?
Differences between Functional Components and Class Components in React