How to use react-icons in gatsby but not affect performance?

Question

they said that Installation (for meteorjs, gatsbyjs, etc) is

npm install @react-icons/all-files --save

Installation (for standard modern project)

npm install react-icons --save

what is the difference between the two installation, i m using the Installation (for standard modern project), should I use the other installation because my gatsby site is so large, if that how can i import icons in the Installation (for meteorjs, gatsbyjs, etc).

example in my site

import { FaPercent, FaCapsules, FaRing } from "react-icons/fa"

Answer 1

From what I've been able to conclude there is no difference in either so there should be no difference in performance.

react-icons:

• version: v4.1.0
• published two months ago
• command: npm i react-icons

@react-icons/all-files

• version: v4.1.0
• published two months ago
• command: npm i @react-icons/all-files

both reference the same Github repo and in repo packages reference the file package.json is identical:

package.json:

{
  "name": "@react-icons/all-files",
  "version": "4.1.1-snapshot.0",
  "description": "SVG React icons of popular icon packs using ES6 imports",
  "author": "Goran Gajic",
  "contributors": [
    "kamijin_fanta <kamijin@live.jp>"
  ],
  "license": "MIT",
  "main": "lib",
  "types": "./lib/esm/index.d.ts",
  "sideEffects": false,
  "repository": {
    "type": "git",
    "url": "git+ssh://git@github.com:react-icons/react-icons.git"
  },
  "bugs": {
    "url": "https://github.com/react-icons/react-icons/issues"
  },
  "homepage": "https://github.com/react-icons/react-icons#readme",
  "peerDependencies": {
    "react": "*"
  }
}

but when referencing the documnetation is states there should be certain ones used:

for standard modern project:

npm install react-icons --save

for meteorjs, gatsbyjs, etc:

If your project grows in size, this option is available. This method has the trade-off that it takes a long time to install the package. Suitable for MeteorJS, Gatsbyjs etc.

npm install @react-icons/all-files --save

when it comes to the command:

import { FaPercent, FaCapsules, FaRing } from "react-icons/fa"

that is in reference to font-awesome's library. If you reference the installed directory in node_modules all icon packages are in a two character directory:

ai
bi
bs
cg
di
fa
etc.
etc.

If you want to reference any other icons you would just append the two digit character set, example:

import { IconName } from "react-icons/gr";

for Grommet Icons

Answer 2

In a nutshell, @react-icons/all-files was designed to work with bundlers other than webpack.

The story goes much deeper than this. There's probably a good reason the maintainer mentions @react-icons/all-files and states:

If your project grows in size, this option is available.

There is a certain performance issue with importing from react-icons/**: ALL icons are bundled at build-time, even when you are cherry-picking individual icons:

import { FaPercent, FaCapsules, FaRing } from "react-icons/fa"

This issue appears to be webpack specific. People devised different solutions, including:

• importing from react-icons/**/index.mjs (note the index.mjs):

import { MdPublic } from 'react-icons/md/index.mjs';

• modifying webpack config to resolve .mjs like this example – which is apparently order-sensitive and thus janky:

webpack: config => {
    config.resolve.extensions = [ '.mjs', '.js', '.jsx', '.json' ];

• importing individual icons using separate import statements:

import FaFacebookSquare from 'react-icons/lib/fa/facebook-square';
import FaLinkedin from 'react-icons/lib/fa/linkedin';
import FaTwitter from 'react-icons/lib/fa/twitter';
import FaPinterest from 'react-icons/lib/fa/pinterest-square';
import FaInstagram from 'react-icons/lib/fa/instagram';

• and even going so far as to create an intermediary package

The recentmost solutions mention using @react-icons/all-files/**, possibly combined with individual icon imports:

import { GrRotateLeft } from '@react-icons/all-files/gr/GrRotateLeft'
import { GrRotateRight } from '@react-icons/all-files/gr/GrRotateRight'

You can also use babel-plugin-import and create a cherry-pickable @react-icons plugin:

import {FaBeer, FcApprove} from "@react-icons";

The long and short of it is, unless you're using webpack, scrutinizing your bundle size, and really squeezing all the juice out of the build, it likely won't matter what you use.