How To Use Semantic UI Icons And Flags In ReactJS

Sanwar Ranwa
Aug 03, 2020

44k
0
9
- facebook
- twitter
- linkedIn
- Reddit
- WhatsApp
- Email
- Print
- Other Artcile

Introduction

In this article we will learn about semantic UI Icons and flags. Semantic UI is a UI component framework for building resposive user interfaces. In previous articles we learned how to install semantic UI in React and basic components of Semantic UI.

You can check my previous articles from the below links,

Prerequisites

We should have a basic knowledge of HTML and ReactJS.
Visual Studio Code installed
Node and NPM installed

Step 1

Let's create a new React project by using the following command:

npx create-react-app semanticuidemo

Open this project in Visual Studio Code and install semantic UI using the following command.

npm install semantic-ui-react

Now open index.js file and import semantic UI css.

import 'semantic-ui-css/semantic.min.css'

Now go to src folder and create a new component 'IconsDemo.js'. Add the following code in this component:

import React, { Component } from 'react'
export class IconsDemo extends Component {
render() {
return (
<div>
<div class="ui blue inverted three item menu">
<a class="item">Semantic UI Icons</a>
</div>
<div>
</div>
<div>
</div>
</div>
)
}
}
export default IconsDemo

Open the App.js file and add the folllowing code.

import React from 'react';
import logo from './logo.svg';
import './App.css';
import IconsDemo from './IconsDemo'
function App() {
return (
<div className="App">
<IconsDemo/>
</div>
);
}
export default App;

Now, run the project by using 'npm start' command and check the result.

Now go to src folder and create a new component 'FlagsDemo.js'. Add the following code in this component,

import React, { Component } from 'react'
export class FlagsDemo extends Component {
render() {
return (
<div>
<div class="ui blue inverted three item menu">
<a class="item">Semantic UI Flag</a>
</div>
<div>
</div>
</div>
)
}
}
export default FlagsDemo

Open the App.js file and add the folllowing code.

import React from 'react';
import logo from './logo.svg';
import './App.css';
import FlagsDemo from './FlagsDemo'
function App() {
return (
<div className="App">
<FlagsDemo/>
</div>
);
}
export default App;

Now, run the project by using 'npm start' command and check the result.

Summary

In this article, we learned about semantic UI Icons and flags and Semantic UI in a React.js application.

Recommended Free Ebook

Frontend Developer Interview Questions and Answers

Download Now!