Create a Phosphor icons array, which can be later on accessed by index in JSX

[pMichaell]

Hi I'm creating a Slider Component in which I'd like to render some content (phosphor icon included). Slider hook, which I've created, gives me access to the current index at which the slider points. Would it be possible to render an icon by referencing it from icons array with current slider index? I've tried it already, but types do not match Type 'ForwardRefExoticComponent<IconProps & RefAttributes>' is not assignable to type 'ReactNode' . Thank you for your response.

[rektdeckard]

Icons have the type ForwardRefExoticComponent because they are forwardRefs and allow you to pass a ref to the rendered SVG DOM node if you need to. I'm not sure I understand your question. It's perfectly possible to render icons from an array:

const iconReferences = [House, Sparkle, Sunglasses];
const iconComponents = [<House />, <Sparkle />, <Sunglasses />];

return (
  <div>
    {iconReferences.map((Icon, i) => <Icon key={i} />)}
    {iconComponents} 
  </div>
);

[pMichaell]

Exactly, what I've been looking for, thank you.

[emekaelo]

So glad I found this, this definitely needs to be included in the readme

[rektdeckard]

@emekaelo it is...in React's docs. I don't think we need to clarify this difference between a Component and a Node, as it's a fundamental React concept.

[emekaelo]

@emekaelo it is...in React's docs. I don't think we need to clarify this difference between a Component and a Node, as it's a fundamental React concept.

Alright thanks. I'm just a newbie building a react project in a rush.