Использование значков перьев с Reactjs

Question

Я пытаюсь использовать значки перьев в моем приложении реакции.До сих пор я добавил следующее в мой файл index.html

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

И затем я включил составную кнопку со значком пера в один из моих файлов компонентов:

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

Нозначок все еще не появляется.Я новичок в React, я что-то не так сделал, чтобы импортировать значок пера в файл компонента?

Answer 1

Не редактируйте HTML-файл, затем вы используете React.

Установить библиотеку реагирующих перьев:

npm install react-feather

Создать новый компонент React, например LogOutButton.js :

 import { LogOut } from 'react-feather';

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

 export default LogOutButton

Answer 2

Один из простых способов использовать Feather с React - использовать библиотеку react-feather. В репозитории GitHub есть больше информации о том, как его использовать: https://github.com/carmelopullara/react-feather