Bundle size extreme large, transforming all icons when build about tabler-icons HOT 8 OPEN

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".

from tabler-icons.

I have the same issue with icons-vue. Using some icons in my project (vue + electron + vite) and all icons are bundled instead of several ones.

from tabler-icons.

Changed every default exports to named exports and the issue is still here. It still bundles all the icons.

Default exports :

Named exports :

from tabler-icons.

@Nradar While writing this I realised I meant to comment on #793 instead.

Either way it is to illustrate that adding the library and an icon to a page adds less than 1 KB, meaning that selective imports work as expected, using the default syntax, as opposed to "transforming all icons when built" (the title).

I'm not sure if it solves your problem with the library. You might wanna treat it as prod or peer dependency rather than a dev dependency.

from tabler-icons.

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

from tabler-icons.

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

from tabler-icons.

Just reporting that this works correctly in Nextjs 14.

Install

yarn add @tabler/icons-react

Mount

import { IconBulb } from '@tabler/icons-react'

return (<>
    ...
    <IconBulb />
    ...
  </>)

Analyze

from tabler-icons.

Just reporting that this works correctly in Nextjs 14.

Install

yarn add @tabler/icons-react

Mount

import { IconBulb } from '@tabler/icons-react'

return (<>
    ...
    <IconBulb />
    ...
  </>)

Analyze

After, the size becomes larger?

from tabler-icons.