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?

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

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