reactjs - Tabler icons for React slowing down app on initial load - Stack Overflow

admin管理员组

文章数量:1026989

Given a new React app using Vite with no content yet ( .tsx )

When I'm using Tabler Icons for React ( ) and change the content of main.tsx to this ( .tsx )

import { StrictMode } from 'react';
import { createRoot } from 'react-dom/client';
import { IconArrowLeft } from '@tabler/icons-react';

createRoot(document.getElementById('root')!).render(
  <StrictMode>
    <div>
      <div>See icon below</div>
      <IconArrowLeft />
    </div>
  </StrictMode>
);

I get huge performance issues. The initial load time is increased and whenever I'm refreshing the page it takes a lot of time. Did I miss something in the docs I should setup before using the icons?

I see a lot of network requests for tabler, it seems the library is fetching some chunks first.

Given a new React app using Vite with no content yet ( https://stackblitz/edit/vitejs-vite-7xucud?file=src%2Fmain.tsx )

When I'm using Tabler Icons for React ( https://tabler.io/docs/icons/react ) and change the content of main.tsx to this ( https://stackblitz/edit/vitejs-vite-sszcqw?file=src%2Fmain.tsx )

import { StrictMode } from 'react';
import { createRoot } from 'react-dom/client';
import { IconArrowLeft } from '@tabler/icons-react';

createRoot(document.getElementById('root')!).render(
  <StrictMode>
    <div>
      <div>See icon below</div>
      <IconArrowLeft />
    </div>
  </StrictMode>
);

I get huge performance issues. The initial load time is increased and whenever I'm refreshing the page it takes a lot of time. Did I miss something in the docs I should setup before using the icons?

I see a lot of network requests for tabler, it seems the library is fetching some chunks first.

• reactjs

Share Improve this question Follow edited Nov 16, 2024 at 10:46 baitendbidz asked Nov 16, 2024 at 10:43 baitendbidzbaitendbidz 80544 gold badges2222 silver badges7171 bronze badges 4

• You can try import 'import IconArrowLeft from '@tabler/icons-react/IconArrowLeft'; – antokhio Commented Nov 16, 2024 at 10:45
• That didn't work, the file doesn't exist. Also tried iconArrowLeft, icon-arrow-left and icon_arrow_left – baitendbidz Commented Nov 16, 2024 at 10:48
• 1 same issue? github/tabler/tabler-icons/issues/1233 – cmgchess Commented Nov 16, 2024 at 10:56
• yeah, this seems to be the issue! – baitendbidz Commented Nov 16, 2024 at 11:19

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 12

try adding this to the vite.config.ts file:

Credit: https://github/tabler/tabler-icons/issues/1233#issuecomment-2428245119

export default defineConfig({
  plugins: [react()],
  resolve: {
    alias: {
      ...
      '@tabler/icons-react': '@tabler/icons-react/dist/esm/icons/index.mjs',
    },
  }

Given a new React app using Vite with no content yet ( .tsx )

When I'm using Tabler Icons for React ( ) and change the content of main.tsx to this ( .tsx )

import { StrictMode } from 'react';
import { createRoot } from 'react-dom/client';
import { IconArrowLeft } from '@tabler/icons-react';

createRoot(document.getElementById('root')!).render(
  <StrictMode>
    <div>
      <div>See icon below</div>
      <IconArrowLeft />
    </div>
  </StrictMode>
);

I get huge performance issues. The initial load time is increased and whenever I'm refreshing the page it takes a lot of time. Did I miss something in the docs I should setup before using the icons?

I see a lot of network requests for tabler, it seems the library is fetching some chunks first.

Given a new React app using Vite with no content yet ( https://stackblitz/edit/vitejs-vite-7xucud?file=src%2Fmain.tsx )

When I'm using Tabler Icons for React ( https://tabler.io/docs/icons/react ) and change the content of main.tsx to this ( https://stackblitz/edit/vitejs-vite-sszcqw?file=src%2Fmain.tsx )

import { StrictMode } from 'react';
import { createRoot } from 'react-dom/client';
import { IconArrowLeft } from '@tabler/icons-react';

createRoot(document.getElementById('root')!).render(
  <StrictMode>
    <div>
      <div>See icon below</div>
      <IconArrowLeft />
    </div>
  </StrictMode>
);

I get huge performance issues. The initial load time is increased and whenever I'm refreshing the page it takes a lot of time. Did I miss something in the docs I should setup before using the icons?

I see a lot of network requests for tabler, it seems the library is fetching some chunks first.

• reactjs

Share Improve this question Follow edited Nov 16, 2024 at 10:46 baitendbidz asked Nov 16, 2024 at 10:43 baitendbidzbaitendbidz 80544 gold badges2222 silver badges7171 bronze badges 4

• You can try import 'import IconArrowLeft from '@tabler/icons-react/IconArrowLeft'; – antokhio Commented Nov 16, 2024 at 10:45
• That didn't work, the file doesn't exist. Also tried iconArrowLeft, icon-arrow-left and icon_arrow_left – baitendbidz Commented Nov 16, 2024 at 10:48
• 1 same issue? github/tabler/tabler-icons/issues/1233 – cmgchess Commented Nov 16, 2024 at 10:56
• yeah, this seems to be the issue! – baitendbidz Commented Nov 16, 2024 at 11:19

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 12

try adding this to the vite.config.ts file:

Credit: https://github/tabler/tabler-icons/issues/1233#issuecomment-2428245119

export default defineConfig({
  plugins: [react()],
  resolve: {
    alias: {
      ...
      '@tabler/icons-react': '@tabler/icons-react/dist/esm/icons/index.mjs',
    },
  }

本文标签： reactjsTabler icons for React slowing down app on initial loadStack Overflow