问题标签 [react-icons]

我有以下 json 文件，我保留了 Id、Intro、Icon 名称

我在可重复使用的卡片组件中使用React-Bootstrap-Icons，如下所示

这就是我循环 json 文件和显示卡片的方式

但我想把它带到下一个层次，即动态显示图标，从 json 文件中获取，目前它是静态的。

所以我只是试着这样说

但它首先显示编译错误。我可以知道是否有任何方法可以实现这一目标

我正在尝试创建多个包含信息的框，每个框都有一个图标。现在我已经硬编码如下：

现在，为了能够动态添加更多这些组件，我想实现一个数据库。大多数情况下这很容易，我只是不知道如何使用 react-icons 组件来实现它？我应该使用其他东西还是有可能？

如何通过单击图标警报（“确定”）来响应本机按钮，我想放置点三垂直谢谢...

看这里的图片 点三垂直图标示例

我react-icons在“卡片组件”中有一个通过道具的列表。在我的 Card 组件的渲染方法中，我有这样的东西：

注意：该列表由 react-icons 组成，它们本身就是 React 组件。

我尝试了很多东西，但我不太清楚如何渲染图标。如果有人可以帮助我，那就太棒了。谢谢

如何在单击时更改图标的颜色并且单击后颜色保持不变。它不会改变他们的状态。

详细信息.scss

安装react-icons包后，我的代码抛出了一个错误，说我的babel-loader包丢失了，所以我也安装了那个包。

接下来我知道，我跑了yarn start，出现了这个错误：

我尝试使用npm start，应用程序启动得很好。

怎么了？

寻找一种将颜色从主题传递到 React 图标的方法。主题工作正常，我可以将颜色传递给我的样式组件。这是细分：

index.js：

app.js（精简）：

相当于：

确实有效，我确实尝试过：

导航元素.js：

应用程序.js：

但我得到一个儿童错误。尝试来自阅读 Q&A Styled-components 和 react-icons <IconContext.Provider> 组件

我没有找到的其他问答：

• 如何设置 React-Icon 样式
• react-icons 应用线性渐变

使用 Styled Components 中的主题颜色，我如何将该颜色传递给 React Icons Provider？

我想改变 React-icons 的颜色。比如说，{AiFillHeart}图标。我想将其填充颜色更改为红色。我怎样才能做到这一点？

我试过了<AiFillHeart style = {{color: 'red'}}/>。但它不起作用。

Problem:
I'm trying to use the react-icons MdNavigation icon as a pointStyle within Chart.js. The app is built in Next.js. If it's not possible to use react-icons for a chart.js pointStyle, I'm open to using an imported SVG, jpg or png icon, but even still I'm having issues likely caused by my setup of the file-loader in next.config.js.

Expected result:
I expect for the MdNavigation icon (https://react-icons.github.io/react-icons/icons?name=md) to show up for the pointStyles.

Actual result:
I have tried a few different setups to get this to work, but so far none of them have given me to correct icon.
I've gotten the following error with a few different configurations:

Uncaught DOMException: Failed to execute 'drawImage' on 'CanvasRenderingContext2D': The HTMLImageElement provided is in the 'broken' state.

Config #1 to return the above error:

I get the same error when I do the following setup:

I've also tried the following setup in an attempt to create a wrapper for the MdNavigation icon:

Ideally, I'd like to use that icon as the pointStyle. If that isn't possible, I'm open to using another jpg or png image, but I'm still having issues with that. The following code is my setup when I try to use a different image (likely caused by my file-loader setup. I'm not great with these config files yet). This setup also give me the following error:

Uncaught DOMException: Failed to execute 'drawImage' on 'CanvasRenderingContext2D': The HTMLImageElement provided is in the 'broken' state.

Loader config (next.config.js):

Also tried setting this up in webpack.config.js:

I have an array with objects before, I applied icons from fontAwesome as a value, it looked like this

Then in another component I got this icon like this

Now I use a different approach (React Icons), the point is that now I create icons in this way

In this case, I cannot assign this icon inside the object as a value, it gives an error

What should I do in this case?