[英]React icons: Which import should I use?
I'm a bit confused.我有点困惑。 In my web project, I'm using React and for iconography, I'm using the React Icons library.
在我的 web 项目中,我使用的是 React,而对于图标,我使用的是React Icons库。
The thing that confuses me is: Every time I want to use an icon, the IDE (in my case JetBrains WebStorm) suggests two available import locations.让我感到困惑的是:每次我想使用一个图标时,IDE(在我的例子中是 JetBrains WebStorm)都会建议两个可用的导入位置。
Apparently, the icon exists in the parent all
directory, but also in a specific directory with the same name the icon has.显然,该图标存在于
all
父目录中,但也存在于与该图标具有相同名称的特定目录中。
import { FaStackOverflow } from "@react-icons/all"
import { FaStackOverflow } from "@react-icons/all-files/fa/FaStackOverflow"
all
, not from a subdirectoryall
而不是从子目录中导入图标The following hint is given in the docs :文档中给出了以下提示:
NOTE: each Icon package has its own subfolder under react-icons you import from.
注意:每个图标 package 在您从中导入的 react-icons 下都有自己的子文件夹。
Also, after some experiments, I realized that using the icon from the all
directory is the right one.另外,经过一些实验,我意识到使用
all
目录中的图标是正确的。 I had issues when styling the icon (using a global class name provided in the <IconContext.Provider>
parent element), so I changed the import location, and voilà, it worked!我在设置图标样式时遇到了问题(使用
<IconContext.Provider>
父元素中提供的全局 class 名称),所以我更改了导入位置,瞧,它起作用了!
Here is a demo.这是一个演示。 I'm using the following CSS to style the icon.
我正在使用以下 CSS 来设置图标的样式。
.icon {
outline: 1px solid hotpink;
}
This is the JSX code:这是 JSX 代码:
<IconContext.Provider value={{ className: 'icon' }}>
<FaStackOverflow />
</IconContext.Provider>
When importing the icon from the subdirectory, the styles are not applied correctly:从子目录导入图标时,styles 应用不正确:
import { FaStackOverflow } from "@react-icons/all-files/fa/FaStackOverflow"
In contrast, this is the import from the correct location (directory all
).相反,这是从正确位置(目录
all
)导入的。
import { FaStackOverflow } from "react-icons/all"
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.