Intro to Lordicon

Lordicon is a powerful library and a collection of beautifully crafted animated icons, this help developer makes their project or website more interactive and user-friendly. Lottie is an open-source animation file format that allows designers and developers to easily create and use complex animations.


How to use Lordicon In React
How to use Lordicon In React


There are 8900+ animated icons, which can be used in multiple formats i.e


  1. Animated: Embed HTML, GIF, Lottie JSON, WebP, APNG, MP4

  1. Static: PNG, SVG

Today we are going to practice how developers and you people can use Animated Lordicon in their projects majorly in React or (How to use Lordicon In React 2023). believe me, it can enhance your project visualization and overall user experience. 


Installation of Lordicon in React Project



To learn "How to use Lordicon In React"  you must have knowledge that how to install Lordicon. and for that purpose, you need to follow the certain step which is given below.

 

Step 1: 

Go to its official website or directly click on this link.


Step 2: 

Now on the home page just click on Docs Link as shown in the figure.

 


 

 

How to use Lord Animated Icons

 

Step 3:

The moment you click on Docs you render a new page where you see an option in the Quick Access section named HTML/JS, just click on Learn More.

Step 4: Now click on NPM (Note: You can directly install this package from npmjs.com)

 


 

NPM Lordicon

Step 5: 

Now copy this command and run it into the terminal of your react project.


$ npm install lord-icon-element lottie-web 



Ensure both packages successfully add in your dependencies section in the package.json file.

Step 6:  Selecting of Icon

a.       Go to the official website

b.       Search the icon and click on it

c.       Now click on HTML


 


d.       Choose the animation Trigger and size of the icon according to your use.

 



e.       Now copy the complete lord-icon tag including its attributes.

 

Step 7: Usages in React app

Now come to your file where you want to use these icons and import the below package at the top

import lottie from 'lottie-web';

import { defineElement } from 'lord-icon-element';

defineElement(lottie.loadAnimation);

 




Step 8: After this paste the code in the div tag copied from Step 5

Step 9: Now run your project with the following npm command.

npm start

Step 10: Now you can see your Icons are working properly in your React app.

Last Word:

In conclusion, integrating Lordicon animations into your React applications or any project can significantly enhance the visual appeal and interactivity of your projects and give an outstanding user feel to the user.

I hope that this article has helped you a lot, you must have been able to understand "How to use Lordicon In React". Share this with your friends and don't forget to give your opinion in the comment section.

Heartfelt Thank You!