[Tip] Add icons

[stevhliu]

Adds a "warning" and "lightbulb" icon for the Warning/Tip component as shown below. This helps add some more context to the current Tip component. I can also explicitly add a "Warning" and "Tip" label to the component if we like :)

[mishig25]

I'm adding victor as the reviewer since he is in charge of UI designs.
For me the icons look great. However, if we decide to have icons, we would need to perform other tasks for the consistency:

• the green tip design is shared across all the aspects of the hub (docs, blogs, model cards). Therefore, we would need to add the icons for other parts of hf.co as well (blogs, model cards)
• in hf.co, besides tip, warning, we have note, important, cation. Therefore, we would need icons for note, important, cation as well

See https://huggingface.co/mishig/test-tips for all the current tip designs

[stevhliu]

Added icons for the rest of the blockquote admonitions. Let me know what you think @gary149 !

[gary149]

spacing looks a bit too large to me @enzostvs + how does it look with a single sentence going on multiple lines.

[gary149]

the spacing looks weird to me but we can merge and we'll see in prod (as build is complex @enzostvs )

[enzostvs]

Agreed, the icon isn't aligned with the text as well and too much space on the right, maybe could be 1,5 instead of 2,5 and add a translate-y-px class to the icon

[stevhliu]

Changed the icon to be more aligned and wrapped the text under the first line!

[enzostvs]

UI wise lgtm!
we could still improve it in the future, but stil cool to have the icons!
(IDK if linked to this PR, but while no "content", there is a big blank inside the component)

[mishig25]

awesome, I will do some local testing and merge 🚀

[stevhliu]

thanks all! 🙏