问题标签 [react-icons]

For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.

0 投票
2 回答
284 浏览

reactjs - React 图标动态生成字体真棒组件

我在我的反应应用程序中使用 react-icons 包。从某种意义上说,它可以正常工作,您可以通过以下方式导入和使用字体真棒图标:

但是,我希望能够在更可重用的组件中生成这些图标。例如,支持我有一个菜单列表,每个项目都有一个图标。该列表作为数组发送,其中一项是标题,一项是链接地址,一项是图标名称。没有动态方法,你必须这样做......

我希望能够动态地做到这一点。我对包含我需要使用的每个图标的大型导入语句没有问题。在那之后我想做的是……

这实际上会导致正确的组件被渲染。但是,没有图标出现,也没有 svg 图形。似乎在编译过程的某个地方,字体真棒包在运行创建组件之前渲染了图形?

有没有办法解决?

0 投票
1 回答
33 浏览

reactjs - 我在 React JS 中的 Router 元素有什么问题?

我的导航栏图标没有显示,控制台在 App.js 中宣布错误为:“第 9 行:'Router' is not defined react/jsx-no-undefct/jsx-no-undef ”。我不知道我的代码有什么问题。任何人都可以帮助我吗?非常感谢!

这是我的 App.js:

这是我的 Navbar.js:

0 投票
1 回答
357 浏览

npm - 找不到模块:无法解析 gatsby 健全项目中的“@react-icons/all-files”

在使用这些命令安装 react-icons 后,我正在为我的项目使用 sanity 和 gatsby

并将一些图标导入我的项目

import { BiHomeSmile } from "@react-icons/all-files/bi/BiHomeSmile";

运行npm run dev 我会得到这个错误

找不到模块:无法解析“@react-icons/all-files”

但是当我使用它时它会消失

我清理了 gatsby 缓存或运行npm install它没有用,如果我删除它我无法删除节点模块文件夹我的项目无法构建并再次运行我不知道为什么但不值得删除这个文件夹并再次运行 npm install

0 投票
2 回答
68 浏览

reactjs - 是否可以在反应导入中传递道具

所以我有一个名为“Technologies”的组件名称,我正在使用react-icons它并将它通过道具传递给不同的组件名称“图标”或不同的页面。

技术页面:

这是图标页面,我在其中接收道具数据:

0 投票
1 回答
21 浏览

reactjs - 设置 IconContext.Provider 光标值?(这与反应图标一起使用)

我知道我可以将光标内联样式:“悬停”到本示例中的元素上,但是应该有一种方法可以使用 react-icons 中的 IconContex.Provider 使元素中的所有图标包含指针光标

0 投票
1 回答
966 浏览

reactjs - 不能将 React Icons 组件用作对象值打字稿

我正在使用 typescript 和 react 开发一个个人网站,对于我的页脚,我正在映射一组对象,每个对象都有一个 url 属性和一个 icon 属性。Icon 属性应该有多个不同的 React Icons 作为值,这样通过每次迭代,我可以显示不同的 Icon。当我最初在 javascript 中实现它时,我的代码工作得很好,但是在将我的代码库切换到 typescript 之后,我遇到了这个错误:

“解析错误:'>' expected.eslint 'FaGithub' 指的是一个值,但在这里被用作一个类型。你的意思是'typeof FaGithub'吗?ts(2749)”

这是我到目前为止的打字稿实现。我尝试删除尖括号,这消除了错误,但是在通过数组映射时我无法实际显示图标。我真的很感激任何建议。

这就是 socialIcons 数组最初在常规 javascript 中的样子。

0 投票
1 回答
499 浏览

reactjs - react-icons/fa 安装失败:尝试导入错误:“FaStar”未从“react-icons/fa”导出

我正在尝试在应用程序中使用 react-icon FaStar。我首先在单独的 create-react-app 中创建了一个组件,并在该安装中成功使用了 FaStar。然后我将 .js 和 .cs 文件传输到我正在开发的 create-react-app 中。

使用 npm install react-icon 后,我得到了

尝试导入错误:“FaStar”未从“react-icons/fa”导出。

当我查看 node_modules/react-icon/fa/index.js 时,我看到的只是

在我开发组件的安装中,我看到 react-icon/fa/index.js 文件中充满了 vi 中的代码

知道为什么会这样吗?谢谢

0 投票
1 回答
278 浏览

reactjs - 找不到 React-icons 模块:无法解析“../lib”

我刚刚安装了 react-icons 并尝试导入图标,但出现此错误。

我查看了 node_modules 中的包,那里有一个 lib 文件夹。

我试过重新安装它,但没有奏效。可能是什么问题以及如何解决?

0 投票
1 回答
358 浏览

javascript - React js - 无法使用反应图标,找不到模块'../lib'

这是我在 stackoverflow 上的第一篇文章,所以我会尽量保持简短、甜美和详细,希望能找到一些帮助。

我目前正在尝试学习 React js,当我尝试安装react-icons和导入图标时,我的开发服务器正在崩溃。

  1. npm install react-icons
    包.json
  1. 在我的代码中,我输入:
  1. npm run start 编译失败。

./node_modules/react-icons/fa/index.esm.js
未找到模块:无法解析 'D:\name\school\semester\class\project\node_modules\react-icons\ 中的 '../lib' F A'

  1. 我也尝试过npm install react-icons --save并且基于错误说它无法解决'../lib'我什至只是猜测并尝试了npm install lib它没有工作。卸载和重新安装react-icons也没有帮助。

  2. 我删除了我的node_modules文件夹并npm install再次运行,这并没有解决问题。运行后我的输出npm install是:

添加了来自 789 个贡献者的 1987 个包,并在 103.053s 中审核了 1990 个包

153 个包正在寻找资金
运行npm fund以获取详细信息运行

3 个中等严重性漏洞以修复它们,或获取详细信息
npm audit fixnpm audit

当我尝试npm audit fix时,它会说无法自动解决它们,并npm fund给我一个列表。

0 投票
1 回答
51 浏览

javascript - 图标未从 react-icons 导出,并显示编译器错误

我安装了 react-icons 但它不起作用

错误:FaBeer 未导出