react-simple-icons: v5.2.0 tree shaking doesn't work as intended

I’ve been using this library for a long time and I’m very thankful for your work!

I’ve recently updated to v5.2.0 and tree shaking is now broken. I saw this issue #32 but I guess something must’ve changed since v3.

This is how I’m importing the icons:

import { Facebook, Instagram, Twitter } from "@icons-pack/react-simple-icons";

It’s a Next.js application with Typescript. Below you can see a before and after in bundle size:

No icons:

Page                                       Size     First Load JS
┌ ● /                                      811 B           129 kB
...

With icons:

Page                                       Size     First Load JS
┌ ● /                                      811 B          1.68 MB
...

About this issue

  • Original URL
  • State: closed
  • Created 2 years ago
  • Reactions: 2
  • Comments: 18 (11 by maintainers)

Commits related to this issue

Most upvoted comments

thanks @wootsbot, it solved the situation.

I was wondering, would it be a possible to import icons individually?

import SiGithub from "@icons-pack/react-simple-icons/Github" //or something

This has the advantage of being very explicit, while also giving faster build times because the bundler does not have to tree shake the entire package in every file where an icon is imported (looking at you MUI).

@AbdBarho I’m working on a compiled refactor, I think at the moment it can help to solve

#140 (comment)

This works for now. Hoping to see a proper resolution for the v7s soon

@AbdBarho I’m working on a compiled refactor, I think at the moment it can help to solve #140 (comment)

This works for now. Hoping to see a proper resolution for the v7s soon

This has been resolved in version v8.0.1.

@AbdBarho I’m working on a compiled refactor, I think at the moment it can help to solve

https://github.com/icons-pack/react-simple-icons/issues/140#issuecomment-1374944592

This has been resolved in version v8.0.1. I have had the opportunity to submit this refactoring. Please, feel free to report if you encounter any issues.

@aflatter @skyclo I am checking with version v7.1.1 I have a tree correctly

Just tried 7.1.1, same problem:

foo@bar aflatter % npm run build

> aflatter@0.1.0 build
> next build

info  - Linting and checking validity of types  
info  - Compiled successfully
info  - Collecting page data  
info  - Generating static pages (4/4)
info  - Finalizing page optimization  

Route (pages)                              Size     First Load JS
┌ ○ /                                      1.63 MB        1.71 MB
├   /_app                                  0 B            73.3 kB
├ ○ /404                                   182 B          73.4 kB
├ ○ /about                                 1.6 kB         80.1 kB
└ λ /api/hello                             0 B            73.3 kB
+ First Load JS shared by all              75.6 kB
  ├ chunks/framework-2c79e2a64abdb08b.js   45.2 kB
  ├ chunks/main-0ecb9ccfcb6c9b24.js        27 kB
  ├ chunks/pages/_app-ae907860a06fe57a.js  296 B
  ├ chunks/webpack-8fa1640cc84ba8fe.js     750 B
  └ css/5983c06de8f68d75.css               2.37 kB


foo@bar aflatter % git diff package.json
diff --git a/package.json b/package.json
index 572584b..78a7a57 100644
--- a/package.json
+++ b/package.json
@@ -9,21 +9,21 @@
     "lint": "next lint"
   },
   "dependencies": {
-    "@icons-pack/react-simple-icons": "^5.3.0",
+    "@icons-pack/react-simple-icons": "^7.1.1",
     "@types/node": "18.14.6",
     "@types/react": "18.0.28",
     "@types/react-dom": "18.0.11",
     "eslint": "8.35.0",
     "eslint-config-next": "13.2.3",
-    "next": "13.2.3",
+    "next": "^13.2.4",
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "sharp": "^0.31.3",
     "typescript": "4.9.5"
   },
   "devDependencies": {
-    "autoprefixer": "^10.4.13",
+    "autoprefixer": "^10.4.14",
     "postcss": "^8.4.21",
-    "tailwindcss": "^3.2.7"
+    "tailwindcss": "^3.3.1"
   }
 }

Is https://github.com/simple-icons/simple-icons/issues/8112 possibly related? I can confirm that this is an issue for me and prevents my Remix app from deploying on CF Pages (bundle size is > 1MB when using a few icons).

Edit: Downgrading to 5.11 fixes the issue.