Bundle size extreme large, transforming all icons when build

[Nradar]

Browser

chrome

OS

windows 10

Screen size

1920x1080

Describe the bug

Hi All! I have project(called A) built with remix/vite, and it include my other library(called B) built based on storybook and vite. Both A and B have installed @tabler/icons-react as dev dependency.

When I build library B itself, the tabler icons are doing okay, only include icons been imported in the build. But when I build the project A, all of the tabler icons in B are all transforming and packed into build/client/assets/B.js. It occupied a huge bundle size. I'm not sure if this is related to treeshaking or some configs? Hope someone can help me on this! Thanks in advance.

Project A vite config:

import { vitePlugin as remix } from "@remix-run/dev";
import { defineConfig } from "vite";
import tsconfigPaths from "vite-tsconfig-paths";
import mdx from "@mdx-js/rollup";
import remarkFrontmatter from "remark-frontmatter";
import remarkMdxFrontmatter from "remark-mdx-frontmatter";
import { visualizer } from "rollup-plugin-visualizer";

export default defineConfig({
  ssr: {
    noExternal: ["pdfmake/build/vfs_fonts" /* , "dc" */],
  },

  plugins: [
    mdx({
      remarkPlugins: [remarkFrontmatter, remarkMdxFrontmatter],
    }),
    remix(),
    tsconfigPaths(),
    visualizer({
      open: true,
      gzipSize: true,
      template: "treemap",
    }),
  ],
});

Library B vite config:

import { defineConfig } from 'vite'
import { resolve } from 'path'
import react from '@vitejs/plugin-react'
import { viteStaticCopy } from 'vite-plugin-static-copy'
import ignore from 'rollup-plugin-ignore'
import dts from 'vite-plugin-dts'
import * as packageJson from './package.json'
import dynamicImport from 'vite-plugin-dynamic-import'
import { visualizer } from 'rollup-plugin-visualizer'

export default defineConfig({
    plugins: [
        visualizer({ open: true, gzipSize: true }),
        react(),
        ignore(['moment', 'moment-timezone']),
        dts({
            include: ['src'],
        }),
        dynamicImport(),

        viteStaticCopy({
            targets: [
                {
                    src: 'tailwind.config.js',
                    dest: '',
                },
                {
                    src: 'node_modules/@fontsource/inter/files/*400*',
                    dest: 'files',
                },
            ],
        }),
    ],
    build: {
        minify: true,
        copyPublicDir: false,
        lib: {
            entry: resolve(__dirname, 'src/index.tsx'),
            name: 'custom-components',
            formats: ['es', 'cjs'],
            fileName: format => `custom-components.${format}.js`,
        },
        rollupOptions: {
            external: [
                ...Object.keys(packageJson.devDependencies),
                ...Object.keys(packageJson.peerDependencies),
                'moment',
                'moment-timezone',
                '@fontsource/inter',
            ],
            output: {
                sourcemap: false,
                compact: false,
            },
        },
    },
})

How to reproduce

1. (Lib B)Create a storybook with vite config as mine, installed tabler-icons as dev deps
2. (Project A)Create a remix project with vite config as mine, and installed tabler-icons as dev deps
3. Install Lib B in step 1 as deps into project A in step 2 and run build
4. Check the folder build/client/assets/Lib B.(something would be like libb.cjs-DdmG1IpM.js)
5. Using any bundle size visualizer will see that the tabler icons in LibB occupy huge size around 5mb.

Screenshots

No response

JSFiddle

No response

[codecalm]

Hi, this is project about Tabler Dashboard, Tabler Icons are here: https://github.com/tabler/tabler-icons

[novaotp]

I also had this issue where building my app would include all the icons. The workaround is to import all icons as a default export. I'm using Svelte but it should be similar enough. For example : import IconUser from "@tabler/icons-svelte/IconUser.svelte"

The annoying part is that each import only adds a single icon, so you have to do it multiple times if you use a lot of icons. I've had this issue since 3.0.0 and I haven't seen anything changed yet. I really like the library so I won't change it, but it would be convenient to import the icons as named imports, like import { IconUser } from "@tabler/icons-svelte".

[Nradar]

I also had this issue where building my app would include all the icons. The workaround is to import all icons as a default export. I'm using Svelte but it should be similar enough. For example : import IconUser from "@tabler/icons-svelte/IconUser.svelte"

The annoying part is that each import only adds a single icon, so you have to do it multiple times if you use a lot of icons. I've had this issue since 3.0.0 and I haven't seen anything changed yet. I really like the library so I won't change it, but it would be convenient to import the icons as named imports, like import { IconUser } from "@tabler/icons-svelte".

Thank you. I will try your approach to import icons directly