Wrap react components with forwardRef() for DOM access

[mikestopcontinues]

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

Currently, it's impossible to pass refs to the react heroicon exports, but this is generally how you would expect to interface with raw SVG, which is what the package exports. Having access to the DOM naturally has a lot of uses. In my current case, I need the ref to smartly position a tooltip.

All it would take to enable this is adding ref: true to the svgr options.

Thanks for your time. 😄

[ekawatani]

+1

In my case, I need to toggle a class name on mousedown and mousup, but there's currently no way to get a reference to the SVG element.

[na0x2c6]

+1

In my case, I want to use the icons in combination with tippyjs, which requires a ref:
https://github.com/atomiks/tippyjs-react#component-children

[RobinMalfait]

Hey! Thank you for your feature suggestion!
Much appreciated! 🙏

This has been fixed in #614 and will be available in the next release!