add icon troubleshooting section

[david-morris]

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.