react with eva icons

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 the data-eva data attribute with SVG elements. You can also pass some additional parameters to the replace method to modify the replace 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.