Huge bundle size with dynamic import

ttsan-nooz commented 1 year ago

Hello,

I'm currently using tabler-icons-react in a NextJS project.

I create a custom IconComponent that use tabler. So i try to implement dynamic

import dynamic from 'next/dynamic';

// @ts-ignore
const DynamicIcons = dynamic(() =>
  import('tabler-icons-react').then((icons) => icons),
);

But the size of the bundle is huge. Do you have any idea of to fix my issue?

Thanks in advance

konradkalemba commented 1 year ago

Hi @ttsan-nooz!

By importing the package in such way, you are making the bundler to include all the icons in the bundle, because it doesn't know which icons you are gonna use.

I recommend you to import icons the following way:

import { Plus } from "tabler-icons-react";

This way you can make use of tree-shakeability and thus reducing the bundle size.

Nerih commented 1 year ago

Hi Konrad, this is helpful if we know which icons we are going to use. Take a use case, where end user's can pick an Icon, this then breaks down, and requires the OP's solution, with a horrendous Bundle size.

I tried taking the SVG's and putting them in my public directory :-), as a quick fix, but found that i could no longer use CSS to style correctly, nor set the StrokeWidth.

I love Tabler's icons, but i have found a solution from this Stackoverflow - https://stackoverflow.com/questions/56369444/how-can-i-dynamically-load-an-icon-using-its-snake-case-name-react-material-ui/56369445#56369445

npm install material-icons@latest - Material Font Icons, has this component:

`import { Icon} from '@mui/material';

...

{name}` where the name is a string.

konradkalemba commented 1 year ago

Closing as this package is no longer maintained as there is now an official package. Please see https://tabler.io/docs/icons/react

konradkalemba / tabler-icons-react

Huge bundle size with dynamic import #16

Hello,