konradkalemba / tabler-icons-react Goto Github PK

codesandbox

Hello,
In my database, I need to store the icons as a string like "shoe" or "x".
But if I want them in my DOM, I need to build something like this:

import { Shoe, X } from "tabler-icons-react";
const data = {
    shoe: Shoe,
    x: X,
}

const selectedIcon = data["shoe"];

Is there an easier way?
Greetings, PixelPage

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

I import it using code like

import { Archive, ShoppingCartDiscount, Trash } from 'tabler-icons-react';

but somehow the whole library is added to the bundle what am I doing wrong?

icons are not up to date

Today tabler-icons-react only support size, strokeWidth and color, I suggest adding padding and radius.

<ArrowUpRight size={30} strokeWidth={2} color="black" class="cursor-pointer border-2 border-solid" />
(this is in tailwind css)

I tried adding 2px padding with a solid border however, it seems to be overwritten by the css.
Wrapping a div and using the same skews the icon.

Any suggestion if we shouldn't padding and radius as parameters?

[update]
Found a solution using className instead of class fixes the issue.
<ArrowUpRight size={30} strokeWidth={2} color="black" className="cursor-pointer border-2 border-solid" />

As it stands, this library contains icons with the exact names used by many popular component libraries.
e.g. :- Container, Menu, Table, Tag, Space, Stack, Album, Align, Box.

It's suffice to say that it is quite annoying to develop when you're accidently importing the wrong component every time you auto import a heavily used component like Container from basically any UI library and you get an icon as the import rather than the actual component.

I would like to suggest to prepend the names of the icon components with a word like "Tabler" so it would say "TablerContainer" instead of Container. This will eliminate the issues with imports.

Based on tabler-icons there are new icons that are not available in this library.

We have business requirements that all icons should use some kind of purple color and you can imagine how tedious this gets when you need to specify it on each icon individually.

Is there a way to set a default color that all icons inherit? Ideally, it should still be overwritable.

Hello I work on a project with mantine and React tsx and when i import the icon i receive and error
Failed to resolve import "@tabler/icons-react" from "src\components\Recover.tsx". Does the file exist?

How can i solve this problem?

Problem solved I was not using the lastest version of tabler.

(Using Next.js)

In the client console it warns the following:

Warning: Function components cannot be given refs. Attemps to access this ref will fail. Did you mean to use React.forwardRef()?

Check the render method of ForwardRef.

After some troubleshooting I've came to the conclusion that the Link from next/link is the cause of this error, is there a solution?