0

Trying to include feather icons into react component but it is not showing up. 

const SomeComponent = () => {
<div>
    <script src="https://unpkg.com/feather-icons/dist/feather.min.js"> </script>
    <script>
        feather.replace()
    </script>
    <i data-feather="home"></i>
</div>
}

What could be the issue?

Stanley
  • 2,798
  • 5
  • 22
  • 44
  • [This might be interesting](https://stackoverflow.com/questions/34424845/adding-script-tag-to-react-jsx) – trinaldi Apr 03 '18 at 05:38

1 Answers1

0

  1. Add the script in your index.html(so that it becomes globally available)

    <script src="https://unpkg.com/feather-icons/dist/feather.min.js"> </script>

  2. Now go to your component and use the below code

    <div dangerouslySetInnerHTML={{__html:window.feather.icons.home.toSvg()}} />
Muthu Kumaran
  • 56
  • 5
  • hmmm thanks for the answer.. any reason why the initial code doesn't work? – Stanley Apr 03 '18 at 08:00
  • i believe script tag in JSX doesn't work (think its not part of dom tree, and it gets ignored). in your case am sure that the feather.min.js is not loaded – Muthu Kumaran Apr 03 '18 at 08:44