IT技术 - 使用react图标时导入错误 - 吾爱随笔录

使用react图标时导入错误

IT技术 reactjs

2021-05-05 13:12:59

我试过安装react图标，在我的应用程序中我运行了 npm 命令：

sudo npm install react-icons --save

除了一些可选的依赖项之外，我没有收到任何错误

npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.4 
(node_modules/fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for 
fsevents@1.2.4: wanted {"os":"darwin","arch":"any"} (current: 
{"os":"linux","arch":"x64"})

每当我尝试导入某些图标时，都会出现错误

./src/components/SkiDaysCount.js
Module not found: Can't resolve 'react-icons/lib/md' in ' 
'/home/kristoffer/ReactApps/navbar/src/components'

这是我的进口：

import {Terrain} from 'react-icons/lib/md'
import {SnowFlake} from 'react-icons/lib/ti'
import {Calender} from 'react-icons/lib/fa'

为什么我收到这个错误？

编辑：

我还尝试使用旧语法进行导入，但存在同样的问题：

import Calender from 'react-icons/lib/fa/calender'

4个回答

当您使用 v3 方式导入图标时，您不应该lib成为导入路径的一部分。

这些图标还具有作为导出前缀的图标库名称。

import { FaCalendar } from 'react-icons/fa'

在查看图标目录 react-icons/[fa,ti,md] 并查看 index.dt.ts 文件以获取图标的新名称后，我想出了您的答案。

import { MdTerrain } from "react-icons/md";
import { TiWeatherSnow } from "react-icons/ti";
import { FaCalendarAlt } from "react-icons/fa";

要在组件中使用图标，请使用标签：

<FaCalendarAlt />
<TiWeatherSnow />
<MdTerrain />

有关解释，请查看 react-icon 页面上的从版本 2-> 3 迁移。 https://www.npmjs.com/package/react-icons

并非所有fa图标都是免费的。当我尝试导入铅笔的付费图标时出现此错误，如下所示。

import { FaPencil } from 'react-icons/fa'

如果您在这里看到所有 fa 图标，您可以看到pencil需要pro 许可证。

由于我没有专业许可证，因此出现错误。但是我们总是可以使用pen的免费版本，我们只需要像下面这样导入它。

import { FaPencilAlt } from 'react-icons/fa'
<button><FaPencilAlt /></button>

您还应该从这里检查您的版本的实现。

如果您安装了 3.0.5 版本的 react-icons，请尝试：

对于铅笔（编辑）：

import {FaPencilAlt} from 'react-icons/fa'

对于垃圾桶（删除）：

import {FaTrash} from 'react-icons/fa'

其它你可能感兴趣的问题

上一篇ReactJS：如何访问子组件的引用？下一篇我应该在 useCallback 的依赖项数组中包含 setState 吗？