在 Reactjs 中使用羽毛图标答案

【问题标题】：Using feather icons with Reactjs在 Reactjs 中使用羽毛图标
【发布时间】：2018-10-06 01:12:43
【问题描述】：

我正在尝试在我的 react 应用程序中使用 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 新手，在将羽毛图标导入组件文件方面我做错了什么吗？

【问题讨论】：

标签： reactjs icons

【解决方案1】：

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

【讨论】：

【解决方案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

【讨论】：

【解决方案3】：

安装@Serhii 提到的插件/包

那么你就可以做ff了：

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

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

【讨论】：

【解决方案4】：

试试 React react-feather 库

使用 npm 安装

npm install react-feather

用法

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

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

export default App;

请参阅feathericons.com 获取图标

【讨论】：