使用 react-icons 时导入错误答案

【问题标题】：import error when using react-icons使用 react-icons 时导入错误
【发布时间】：2019-01-18 00:24:09
【问题描述】：

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

【问题讨论】：

你试过import { Calender } from 'react-icons/fa'吗？
@Tholle，当我尝试此操作时，我收到该文件夹不包含名为 calender 的导入的错误
好的。 import { FaBeer } from 'react-icons/fa' 可以作为测试吗？
查看这部分文档github.com/react-icons/react-icons#migrate-from-version-2---3
@Tholle 这确实有效……很奇怪

标签： reactjs

【解决方案1】：

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

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

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

【讨论】：

【解决方案2】：

如果你已经安装了3.0.5版本的react-icons，试试看：

对于铅笔（编辑）：

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

对于垃圾桶（删除）：

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

【讨论】：

【解决方案3】：

查看图标目录 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 页面上的 Migration from version 2-> 3。 https://www.npmjs.com/package/react-icons

【讨论】：

【解决方案4】：

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

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

如果您看到所有 fa 图标的 here，您可以看到 pencil 需要 pro license。

由于我没有专业许可证，因此我收到了错误消息。但是我们可以随时使用免费的versions of pencil，我们只需要如下导入即可。

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

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

【讨论】：

【解决方案5】：

这也可能是由拼写错误引起的。说

import {Haiking) from 'react-icons/fa'

而不是

import {Hiking) from 'react-icons/fa'

【讨论】：

【解决方案6】：

import {FaHiking, FaRightAlign,...} from 'react-icons/fa'

从 v3 开始，react 图标库 '/libname' 是强制性的。

libname as 'fa'-> fontawesome, 'fi'->feathericons.欲了解更多信息，请访问

https://react-icons.netlify.com/#/

【讨论】：

【解决方案7】：

也许你必须更新“react-icons”包。命令：

npm update react-icons

【讨论】：

【解决方案8】：

也许你处于 yarn 模式，你需要使用 yarn add 而不是 npm install 来安装包。

【讨论】：