Question

我正在尝试在我的反应应用中使用feather icons。到目前为止，我已将以下内容添加到我的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

将Feather与React一起使用的一种简单方法是使用react-feather库。 GitHub repo提供了有关如何使用它的更多信息：https://github.com/carmelopullara/react-feather

Answer 2

不要编辑html文件，然后使用React。

安装react-feather库：

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 3

按照@Serhii所述安装插件/软件包

然后您可以执行以下操作：

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

ps。 Gear是一个虚拟名称。请搜索适合您任务的图标。

使用带有Reactjs的羽毛图标

3 个答案: