chakra-ui / chakra-ui-docs

Documentation website for chakra ui
https://chakra-ui.com
MIT License
300 stars 478 forks source link

add icon troubleshooting section #1678

Open david-morris opened 7 months ago

david-morris commented 7 months ago

Subject

Icon

Description

I use react-icons/hi (heroicons) and I've noticed that there's no good way to get those icons playing nicely with Chakra. If I use as= then the resulting creature does not accept a forwarded ref (meaning no tooltip). If I add the icon as a child, then there's a doubled viewBox setup which creates really weird results.

It would be nice to have documentation for integrating different common libraries. What are the gotchas when using each type of icon integration? How do we handle different use cases?

In this case I'm wrapping with a <Box>, and I don't know if that's what's supposed to be done for this sort of use case.