react with eva icons
In this article:
- About eva icons
- An example of how to use eva icons in React.js is given
# About eva icons
Eva Icons is a pack of more than 480 beautifully crafted Open Source icons for common actions and items. Additionally, Eva Icons supports 4 animation types: zoom
, pulse
, shake
and flip
. Download on desktop to use them in your digital products for Web, iOS and Android. Icons are provided in two visual types: Fill
and Outline
and in several formats, including PNG
, SVG
, font
, Sketch
, etc.
# An example of how to use eva icons in React.js is given
- In the first step I will create a new React project called
react-with-eva-icons
with the command below: You can use any arbitrary name
npx create-react-app react-with-eva-icons
- And the next step is to install the eva-icons from npm:
npm i eva-icons
- Now it’s time to use it in the react project:
Enter the project folder, then open the src/App.js
file and make necessary changes:
import React, { useEffect } from "react";
import "./App.css";
import * as eva from "eva-icons";
function App() {
useEffect(() => {
// add this line
eva.replace();
}, []);
return (
<div className="App">
<header className="App-header">
// add your icon
<i
data-eva="search"
data-eva-animation="pulse"
data-eva-hover="false"
data-eva-infinite="true"
/>
</header>
</div>
);
}
export default App;
Description of the above changes:
- Include eva-icons to
App.js
. - Call
eva.replace();
to replace all elements with thedata-eva
data attribute with SVG elements. You can also pass some additional parameters to thereplace
method to modify thereplace
function behavior. - Add the
data-eva
attribute with the icon name to an element. - You can see more details at the eva-icons github
You can see sources of this example on Github through the link below:
https://github.com/mohammadoftadeh/react-with-eva-icons
# In the end
I hope the explanations were brief and helpful and you dear friends will enjoy it.