React 图标：我应该使用哪个导入？

Question

我有点困惑。 在我的 web 项目中，我使用的是 React，而对于图标，我使用的是React Icons库。

让我感到困惑的是：每次我想使用一个图标时，IDE（在我的例子中是 JetBrains WebStorm）都会建议两个可用的导入位置。

显然，该图标存在于all父目录中，但也存在于与该图标具有相同名称的特定目录中。

import { FaStackOverflow } from "@react-icons/all"
import { FaStackOverflow } from "@react-icons/all-files/fa/FaStackOverflow"

我应该使用哪一个？

Answer 1

文档中给出了以下提示：

注意：每个图标 package 在您从中导入的 react-icons 下都有自己的子文件夹。

另外，经过一些实验，我意识到使用all目录中的图标是正确的。 我在设置图标样式时遇到了问题（使用<IconContext.Provider>父元素中提供的全局 class 名称），所以我更改了导入位置，瞧，它起作用了！

这是一个演示。 我正在使用以下 CSS 来设置图标的样式。

.icon {
    outline: 1px solid hotpink;
}

这是 JSX 代码：

<IconContext.Provider value={{ className: 'icon' }}>
  <FaStackOverflow />
</IconContext.Provider>

从子目录导入图标时，styles 应用不正确：

import { FaStackOverflow } from "@react-icons/all-files/fa/FaStackOverflow"

相反，这是从正确位置（目录all ）导入的。

import { FaStackOverflow } from "react-icons/all"