MacroError: Only string literals are supported when referencing icons (use a string here instead)

[dance-cmdr]

trafficstars

I understand that this might be a Typescript issue rather than a macro issue, but I wonder if you could be of help.

I'm trying to make a basic utility to conditionally render "chevron-up" OR "chevron-down".

Doing this...

const chevronIconName: IconName = isExpanded ? "chevron-up" : "chevron-down";
const chevronIcon = solid(chevronIconName) ;

Throws this error and of course it breaks the webpack build.

MacroError: Only string literals are supported when referencing icons (use a string here instead)

[shreyas098]

Hey @dance-cmdr did you find any solution for above error?

@javascripter can you please help us on this?

[rj-wowza]

It seems like the macro is less useful if you need a dynamic solution. https://stackoverflow.com/questions/69472624/font-awesome-6-beta-and-dynamic-icon-name-in-next-js

[javascripter]

@dance-cmdr cc @shreyas098

const chevronIconName: IconName = isExpanded ? "chevron-up" : "chevron-down";
const chevronIcon = solid(chevronIconName) ;

Since solid() is a macro instead of an actual function, you can only use a string literal inside solid() as arguments, and cannot use something dynamic like a variable inside solid() (as the name of the icon to import has to be known at compile time).

So, you need to inline the variable and use it like this.

const chevronIcon = isExpanded ? solid('chevron-up') ? solid('chevron-down') ;