使用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'

Answer 1

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

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

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

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

Answer 3

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

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

如果您在此处看到所有fa图标，则可以看到pencil需要专业许可证。

由于我没有专业许可证，因此出现了错误。但是我们始终可以使用免费版本的Pencil，我们只需要按如下所示导入它。

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

您还应该从此处检查版本的实现。