[v8] Missing tree shaking support

[mwskwong]

Kind of Issue

Bug

This issue concerns the...

NPM package

Package Version

8.0.0

Other Software

None

Description

In v8, the tree-shaking capability is missing despite how the README suggests.

Steps to reproduce

1. Install simple-icons v8.

npm install simple-icons@8.0.0

2. Import an arbitrary icon

import { siSimpleicons } from 'simple-icons';

3. Build the project and observe the bundle size (e.g., by using Webpack Bundle Analyzer)

Expected behavior

Tree shaking is supported, just like when we used to import icons from simple-icons/icons in v7.

[mririgoyen]

Can confirm here. Tree-shaking is not currently working on v8.

Utilizing destructuring as so:

import { siGithub, siTwitter } from 'simple-icons';

Will yield the ENTIRE package ending up in the bundle.

Other libraries used in the same project tree-shake as expected.

[CaptainCodeman]

I can confirm - using with vite / SvelteKit results in a 4.4Mb JS page where an icon is used.

Changing the import to be from 'simple-icons/icons' instead of from 'simple-icons' makes TS unhappy but does only include the expected icons.

[mwskwong]

Bump. I'm really surprised not many people seem to care about/aware of this

[CaptainCodeman]

Bump. I'm really surprised not many people seem to care about/aware of this

How many have done a release over Christmas and used the latest version and then noticed that their bundle size has exploded?

It doesn't break, it would just make some pages slow AFAICT

[mwskwong]

Bump. I'm really surprised not many people seem to care about/aware of this

How many have done a release over Christmas and used the latest version and then noticed that their bundle size has exploded?

It doesn't break, it would just make some pages slow AFAICT

Well, guess what, there are 10k downloads for the last 7 days alone for 8.0 or above.

So yeah, many people should have already used the affected version. And this issue is reported one month before Christmas.

Anyway, I just hope this issue will not get buried by the huge number of icon requests.

[michel-kraemer]

For anyone, who's using Next.js 13.1: I solved this by adding the following to my next.config.js:

modularizeImports: {
  "simple-icons": {
    transform: "simple-icons/icons",
    preventFullImport: true,
    skipDefaultConversion: true
  }
},

You can do something similar with babel-plugin-transform-imports apparently.

[mwskwong]

For anyone, who's using Next.js 13.1: I solved this by adding the following to my next.config.js:

modularizeImports: {
  "simple-icons": {
    transform: "simple-icons/icons",
    preventFullImport: true,
    skipDefaultConversion: true
  }
},

You can do something similar with babel-plugin-transform-imports apparently.

Are you using JS? Because TS doesn't seem to be happy when this is applied.

[michel-kraemer]

Are you using JS? Because TS doesn't seem to be happy when this is applied.

I'm using TypeScript. I don't get any errors.

[polyipseity]

I had the same issue and worked around it in esbuild with package aliasing:

await esbuild.build({
  entryPoints: ['app.js'],
  bundle: true,
  write: true,
  alias: {
    'simple-icons': 'simple-icons/icons',
  },
  treeShaking: true,
})

[mondeja]

Hi, could you confirm that applying the next patch to node_modules/simple-icons/package.json the problem is solved?

develop...possible-patch-8112#diff-7ae45ad102eab3b6d7e7896acd08c427a9b25b346470d7bc6507b6481575d519L14-R19

[polyipseity]

I just tested it by manually changing `package.json` like in the diff and can confirm that it solves the problem.

…

On Fri, Feb 10, 2023 at 3:41 AM Álvaro Mondéjar ***@***.***> wrote: Hi, could you test that applying the next patch to node_modules/simple-icons/package.json the problem is solved? develop...possible-patch-8112 #diff-7ae45ad102eab3b6d7e7896acd08c427a9b25b346470d7bc6507b6481575d519L14-R19 <develop...possible-patch-8112#diff-7ae45ad102eab3b6d7e7896acd08c427a9b25b346470d7bc6507b6481575d519L14-R19> — Reply to this email directly, view it on GitHub <#8112 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AEGXX6R3QW6SX3IU2OI2SM3WWVCAHANCNFSM6AAAAAASU6W2VU> . You are receiving this because you commented.Message ID: ***@***.***>