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"