search

tailwindlabs / heroicons

A set of free MIT-licensed high-quality SVG icons for UI development.
https://heroicons.com
MIT License
21.22k stars 1.27k forks source link

Wrap react components with `forwardRef()` for DOM access #305

Closed mikestopcontinues closed 2 years ago

mikestopcontinues commented 3 years ago 
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 commented 2 years ago

+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 commented 2 years ago

+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 commented 2 years ago

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

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