使用 react-icons 时导入错误

Question

我尝试安装反应图标，在我的应用程序中我运行了 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'

原文由 Dedi 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

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

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

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

原文由 Tholle 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

在查看图标目录 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

原文由 wall-nut 发布，翻译遵循 CC BY-SA 4.0 许可协议