如何在选择下拉菜单中添加图标？

我的代码是：

我得到的不是图标，而是 [object Object]。

我试图将 MD 图标作为网络字体，如下所述：https ://dev.materialdesignicons.com/getting-started/webfont但我也得到了 [object Object]。

任何想法如何做到这一点？

我想动态导入反应图标。

这适用于 Javascript，但我如何将其转换为 Typescript 而不会出现各种错误？

代码：

如果有帮助，这是来自 react-icons 的 .d.ts 文件的输出：

语境

我正在为我的应用程序设计一个导航栏，我的项目使用react-router和react-router-dom来管理路由和react-icons来检索图标。

代码

问题

我正在尝试将NavLink 的activeStyle功能外推到我的图标。鉴于 react-icons 为您提供了作为图标的组件，我正在努力使用哪种方法：

1. 我应该包裹在 HOC 中吗？
2. 我应该封装在自定义 Hook 中吗？

笔记

我已经尝试了这两种方法，但无法理解它。我尝试在使用useLocation钩子读取位置时实现useRef、useEffect。考虑到这种情况，有什么建议可以更好地实现通用NavIcon功能？

我正在尝试在我的Full Calendar中添加一个从react-icons包中获取的图标作为自定义标题按钮。因为图标是从包中导出的，而不是用作类名，所以我似乎无法呈现该图标或任何图标。我希望你能做这样的事情：

但这会引发错误。但是，这种方法也不起作用（使用字体真棒图标），它只是呈现一个正方形：

有没有人试过这个？只要我可以将图标加载为自定义按钮，我不介意采用哪种方法。

更新

发布我的完整日历组件，其中包含自定义按钮道具以供参考：

更新 的代码片段而不是照片：

我是 fluent-UI 的初学者，使用 react (@fluentui/react-northstar 0.47.0)

我尝试了不同的解决方案，但无法解决这个结果。请在这里指导我。

目前，当我将鼠标悬停在它变成填充的图标上时，但我想保持它们的轮廓，无论我是否悬停鼠标。

这是我的观察，Fluent-UI 在运行时渲染图标，例如

这个在运行时渲染，我试图通过 CSS 来实现，但不能。任何知道这件事的人

我是 styled-components 的新手，我想从反应图标中使用 <IconContext.Provider> 这是我的反应组件：

这是我的样式组件代码：

但它不起作用！

我有一篇文章展示了如何将组件作为道具传递，但我无法让它工作，有人可以帮我吗？

这是我得到的例子。

这是我的代码

我有一个名为 routes.js 的文件，其状态名为 routes。

还有另一个名为 Sidebar 的组件，我在其中接收路由并需要根据“路由”道具中配置的内容更改图标。

但是无法识别带有图标的属性。

如何根据 json 文件信息渲染组件？我有一张正在呈现 UL 列表的地图。每个 Li 都被渲染。（我知道我可以用 img 来做到这一点，而不是将 src={} 作为 json 文件中的对象传递。但我想知道是否有另一种解决方法。代码如下：

我正在尝试制作井字游戏，但不幸的是，我在 switch 语句下遇到错误。

我Expression expected.ts(1109)在 switch 关键字下的第 5 行出现错误。

为什么会出现这个问题，我该如何解决？

如何使移动设备的 react-icons 图标尺寸更小？我知道像素不是一个好方法，但我应该怎么做呢？