React icons: Which import should I use?

Question

I'm a bit confused. In my web project, I'm using React and for iconography, I'm using the React Icons library.

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.

Apparently, the icon exists in the parent all directory, but also in a specific directory with the same name the icon has.

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

Which one should I use?

gru · Accepted Answer · 2022-09-11T19:17:36.773

Import icons from `all`, not from a subdirectory

The following hint is given in the docs:

NOTE: each Icon package has its own subfolder under react-icons you import from.

Also, after some experiments, I realized that using the icon from the all directory is the right one. 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!

Here is a demo. I'm using the following CSS to style the icon.

.icon {
    outline: 1px solid hotpink;
}

This is the JSX code:

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

When importing the icon from the subdirectory, the styles are not applied correctly:

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

In contrast, this is the import from the correct location (directory all).

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

React icons: Which import should I use?

Which one should I use?

1 Answers1

Import icons from all, not from a subdirectory

Import icons from `all`, not from a subdirectory