Follow Me on LinkedIn

How to import IMAGES and ICONS in react js application ?

For every web application, image and icons are major part of application. In react js importing images and icons are little different compared to other libraries and frameworks.

Let’s understand how we can add images and icons inside a react js project.

Adding Images :

Inside App.js component, we are importing a image file or a react js logo file, location is this file should be in SRC folder.

Inside this SRC folder you can create another folders like assets and images but for now we are just placing this logo image file inside SRC folder and importing it into our App component.

import ‘./App.css’;
import logo from ‘./logo.png’;
function App() {
 
  return (
    <div className=“App”>
     <img src={logo}/>
    </div>
  );
}
export default App;

Variable name for importing image can be anything, like here logo is the name for image but you can write any name to refer this image.

Inside image tag we are assigning this variable to src attribute.

Output for this code will be :

Adding Icons :

To imports icons in react js project we need to install the react icons first and for that we need to run this command.

npm install reacticonssave

After installing this, now you can add any icon from react icons library.

Click on this link to see all the react icons list.

https://react-icons.github.io/react-icons

To add a icon inside our project we need to import the icon library for example.

import ‘./App.css’;
import { FaBeer } from ‘react-icons/fa’;
import { BiArchive } from ‘react-icons/bi’;
import { BsFillAlarmFill } from ‘react-icons/bs’;
function App() {
 
  return (
    <div className=“App”>
     <FaBeer className=‘fontSize-200’/>
     <BiArchive className=‘fontSize-200’ />
     <BsFillAlarmFill className=‘fontSize-200’ />
    </div>
  );
}
export default App;

Inside App.css file add font-Size-200 class and set font-size:200px;

.fontSize-200{
  font-size: 200px;
}

Output for above code is :

So the basic code structure is

import {ICON_NAME} from ‘react-icons/ICONS_LIBRARY_NAME’
 

and to call icons inside the JSX

<ICON_NAME></ICON_NAME>

You can find hundreds of icons on react icons page.

If you have any question feel free to comment.

Related Posts

frontbackgeek-images

Unveiling React Query: Building a Task Manager App with useMutation and useQuery Hooks

In this article, we will build a Task Manager app to understand What is React Query? and How to use React Query useMutation, and React Query useQuery…

frontbackgeek-images

Building Forms with Formik in React: Complete Code Examples and Explanations

In this article, we are building a simple form to understand how to build a form with Formik in React application, Here we are building a simple…

frontbackgeek-images

Creating React antd table with sorting and pagination and using antd select and antd modal for filtering and displaying the data.

In this article we are creating an antd table with React antd library, antd library is an ant design library, which has a rich set of components…

frontbackgeek-images

React Virtualized Tables: Enhancing the Performance of React 18 Applications

In this article, we will explore the concept of React Virtualized Tables as a solution to enhance performance in rendering large tables. We will delve into what…

React Native Expo Error Solution : ERROR Invariant Violation: “main” has not been registered. This can happen if: * Metro (the local dev server) is run from the wrong folder. Check if Metro is running, stop it, and restart it in the current project.

Solution is Reinstall with this Restart and Rescan the app

frontbackgeek-images

Exploring useLayoutEffect VS useEffect in React 18: A Deep Dive with Code Examples and Practical Comparisons

In React.js, Hooks are very important for handling state and for other features related to functional components, useLayoutEffect vs useEffect is a hot topic, because both are…

This Post Has One Comment

Leave a Reply

Your email address will not be published. Required fields are marked *