feat(react): enable ref option for SVGR in JSX compiler

[stephenwade]

Description

In my project, I want to pass a ref to the generated React component, but it doesn't do anything and I get this error in the browser console:

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

This PR enables SVGR's ref option if we are using React, which forwards ref to the root SVG tag.

Linked Issues

Additional context

[stackblitz]

Run & review this pull request in StackBlitz Codeflow.

[antfu]

I don't know enough about React to know the trade-off of changing this behavior - Is there any React dev reviews, or explain it a bit? Should we make it opt-in, or it's a generally better solution for handling icons?

[Benjamin-htr]

Hi !

I'm in favour of this change. I know that the react-icons suffers from the same problem of ref not being passed to the component (like this issue on their repo) but since they don't use svgr, the problem is harder to fix.

It's common in react to want to pass the ref from a parent component to its child component. For example, this component of chakra-ui lib icon passes the ref of the component to the child icon. But if the child component does not properly forward the ref, then you get the warning in the console.

[ShafSpecs]

@userquin Looks good! The type change ensures ref can be passed correctly, without breaking normal components

[stephenwade]

@antfu There are no negative comments and 2 positive ones. We have been patching unplugin-icons with this change in a fairly large project at work and seen no issues with it. Can it be merged soon?