React guidelines - Passing icon as props

[lucasbordeau]

This discussion is about how to pass icon components as props.

Let's focus on this specific use case and not the global discussion of how to pass components as props because right now it's mainly about passing icons in different parts of the app.

Drawing from this nice article about the different ways to do it : https://www.developerway.com/posts/react-component-as-prop-the-right-way#part2

And also about the React documentation : https://react.dev/reference/react/cloneElement

I think we should avoid using cloneElement, because :

• it leads us to open scopes of imperative manipulation of the virtual DOM, and React is declarative by essence
• it is uncommon
• it is not recommended
• it is hard to maintain and give to junior profiles
• it can be done by other more simple and readable ways
• it will lead to open complex discussions about whether to use it or not in a lot of use cases

We could use only uninstanciated components as props, to have balance between flexibility and a simple API :

Example :

export type OwnProps = {
  LeftIcon?: ComponentType<{ size: number }>;
}

function ExampleComponent({ LeftIcon }: OwnProps) {
  const theme = useTheme();

  return (
    <LeftIcon size={theme.icon.size.md} />
  )
}

// Somewhere else
<ExampleComponent LeftIcon={MyIcon} />

We should try to avoid manipulating the DOM at a low level, and open discussions about it for very specific use cases that could arise in the future, not as a general discussion, this way we keep a low surface API and code guideline that everybody can follow easily.

[Bonapara]

Reopen if conversation is still relevant @lucasbordeau ;)