#How to import icon by string?

2 messages · Page 1 of 1 (latest)

ivory crypt
#

Hello,
I'm working on an icon selector at the moment. Once an icon is chosen, the selector returns the icon as a string, like "AirBalloon". Then, i want to display that icon in my page, so i need to import it (I'm using https://www.npmjs.com/package/tabler-icons-react).
Normally, i would do it like import {AirBallon} from 'tabler-icons-react';.
So i tried this:

<IconSelector
    active={iconSelectorActive}
    setIcon={setIcon}
    additionalEvent={async () => {
        console.log(icon); // Logs the icon I selected
        setActiveIcon((await import('../../node_modules/tabler-icons-react/dist/icons/' + icon)));
        }}
></IconSelector>

But if i try to embed it into my jsx like that:

<Button
    onClick={() =>
        setIconSelectorActive(!iconSelectorActive)
    }
    variant="PRIMARY"
>
    {activeIcon}
</Button>

It throws the error Error: Cannot find module './' when i click an item from the selector.
How do i fix this?
Thanks in advance,
PixelPage

hearty iron