问题标签 [react-icons]

我正在尝试一次从同一个包中导入多个图标，在这种情况下，字体真棒是这样的：

但我收到此错误：

如果我单独导入图标，我不会收到任何错误，有什么想法吗？

我想使用线性渐变动态地部分填充来自 Font Awesome Star 的 react-icons。我尝试了以下方法：

React Component with Inline Style - 将父 span 的背景设置为渐变并使 SVG 透明。似乎无法将 SVG 星周围的边框设置为 #FFFFFF，所以我看到了父跨度的整个背景。见下文：

我也尝试过创建一个 linearGradient 组件并设置路径的 fill="url(#component)"，但是 react-icons 路径是我的父跨度的第三个孩子，我无法弄清楚如何访问。

请帮忙

我正在关注 lynda.com 上的反应教程。我正在尝试通过 npm 将反应图标安装到我的反应项目中。我在命令行中收到一些我不理解的奇怪警告。这是教程中的结果与我的结果：

这是本教程的终端结果。

这是我在终端中的结果：

这是一个屏幕截图，可能更容易查看：

现在，当我尝试使用图标时，出现此错误：

我猜这个错误与我尝试安装图标时命令行显示的内容有关。

我对 react 和 npm 很陌生，所以我正在寻找一些关于为什么这没有按预期运行以及如何解决这个问题的指导？

更新：

我现在得到一个不同的错误：

我npm outdated在终端中运行，发现了一些奇怪的结果：看起来 npm 认为 react、react-dom 和 react-script 丢失了。老实说，这有点过头了，我不知道这意味着什么，但这看起来是错误的。

我进入我的 package.json 文件，看到它们前面都有一个插入符号：

完整的 package.json 文件内容：

第二次更新： 我运行的每个用户 Win 的建议npm install。这改变了一些事情。

这是命令行中的结果：

现在，如果我使用语法import { FaPencil } from 'react-icons/fa'导入，我的页面会编译，但会出现以下警告：

但是如果我使用语法import FaPencil from 'react-icons/lib/fa/pencil'来导入，我的页面不会编译并且我得到这个错误：

更新 3：修复语法错误后，我现在得到一个不同的错误

npm 版本 5.6.0

如何使用扩展 React Icon 工具包在 React 中动态获取图标？当我从数组“sociallinks”中获取图标时，我试图找出在 MAP 循环中动态添加图标的方法

这是代码的一部分

我试图弄清楚如何设置我使用导入的图标的样式react-icons。

特别是，我希望能够创建类似于此的外观：

也就是说，我想添加背景颜色、填充、边框半径等。但是，我找不到简单的方法来做到这一点。

我可以添加一个尺寸和颜色道具，这将改变图标的​​实际尺寸和颜色。但是我没有简单的方法来改变其他元素。

有谁知道我该怎么做（或者他们可以推荐一个可以帮助我的不同图书馆）？

我正在为我使用导入的图标创建一个包装器组件react-icons。以下是它现在的外观示例：

现在，这就像我想要的那样工作——但我想简化代码。理想情况下，我希望它看起来/像这样工作：

知道怎么做吗？

注意：如果有帮助，这是我的Icon组件的当前代码：

该<IconBase>组件只是来自styled-components.

更新

我只想指出，Twitter 示例就是这样——一个示例。我正在寻找一种无论我将什么名称传递给<Icon>组件都可以工作的解决方案。因此，换句话说，以下所有（以及更多）都将起作用：

这些中的每一个都相当于：

换句话说，无论我从哪个图标中拉出react-icons，它都会正确呈现相对于name道具的效果。

我在屏幕上有多个按钮，我希望该用户单击此按钮以路由到新项目，或者用户可以关闭它，因为我在按钮内给出了关闭图标，以便用户可以根据需要关闭它，但是当我试图为按钮内的图标提供 onclick 功能时，它不起作用

我怎么能这样做？？？

这是演示代码

https://codesandbox.io/s/material-demo-rbkr8

我正在使用react-icons。

在文档中的正常用法是这样的：

但是我不能通过这种方式使用，因为图标名称来自道具。我需要这样使用：

我该如何解决这个问题？

我想从react-icons一个字符串数组定义的导入图标，该字符串数组对应于从react-icons. 我涵盖了每个图标库的案例react-icons。这是 FontAwesome 的一个案例。

lazy(() => import('react-icons/fa').then(module => ({ default: module.Components[icon]})))

上面的代码片段是在这里找到的一种动态导入命名导出的方法。

我希望这会返回一个与 指定的图标相对应的组件icon，例如let icon = 'FaPhp'; 发生了什么是一个错误，它说： TypeError: Cannot read property 'FaPhp' of undefined

我在我的项目中使用 react-icons，这个很棒的包提供的是将所有免费字体图像放在一个地方并用作反应组件。

我想要实现的是从组件设置一个 backgroundImage，例如：

而且我不确定为什么这不起作用，理论上应该起作用，有什么想法吗？