Using feather icons with Reactjs

Question

I am trying to use feather icons within my react app. So far I have added the following to my index.html file

<script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
<script>
  feather.replace()
</script>

And then I included composed a button with a feather icon in one of my component files:

<li className="nav-item">
   <a className="nav-link" href="#">
       <span data-feather="settings"></span>
         Settings
   </a>
</li>

But the icon still doesn't show up. I am new to React, was there something I did wrong with regard to importing feather icon into my component file?

Missioner

Answer 1

One easy way to use Feather with React is to use the react-feather library. The GitHub repo has more information about how to use it: https://github.com/carmelopullara/react-feather

Malta

Answer 2

Don't edit the HTML file then you use React.

Install react-feather library:

npm install react-feather

Make new React Component like LogOutButton.js :

 import { LogOut } from 'react-feather';

    const LogOutButton = ({logOutUser}) =>
          <span onClick= {()=> logOutUser()}>
              <LogOut color='#ffffff' size="24" /> // <--- your icon
          </span>
    
 export default LogOutButton

Uninterested

Answer 3

Install the plugin/package as mentioned by @Serhii

Then you can do the ff:

import { Gear } from 'react-feather';
...
<li className="nav-item">
   <a className="nav-link" href="#">
       <Gear />
       Settings
   </a>
</li>

ps. Gear is a dummy name. Please search for appropriate icon for the your task.

Peer

Best and straightforward approach – Chrystalchryste

Answer 4

Try React react-feather library

install using npm

npm install react-feather

Usage

import React from 'react';
import { Camera } from 'react-feather';

const App = () => {
  return <Camera />
};

export default App;

Refer feathericons.com for Icons

Pushy

Answer 5

If you would prefer not to include another library into your code base, you can take advantage of a useEffect hook to replace the feather icons, as shown below:

import { useEffect } from 'react';
import * as feather from 'feather-icons/dist/feather.min';

export function MyComponent = () => {
  useEffect(() => {
    feather.replace();
  }, []);

 return(
  <span data-feather="plus"></span>
 );
};

Note that feather.replace() may not be the most computationally efficient way to do this, so use caution if you have a lot of feather items in your DOM.

Dallman

Answer 6

I did not want to import all the icons and also I had some name conflict so I ended up doing the following.

import { Menu, Grid, MessageSquare, Mail } from 'react-feather';

const Icon = {
   'Menu' : Menu, 
   'Grid': Menu, 
   'MessageSquare': MessageSquare, 
   'Mail': Mail
}


<Icon.Grid size={18} />

Chapnick