Displays an image or text in a circular container. Supports both <img> tags
and <object> tags as children for the content.
<ws-flex>
<div>Put images inside a nice circle + clipped area</div>
<ws-avatar>
<object data="https://cdn.frankerfacez.com/avatar/twitch/64263610" type="image/png"></object>
</ws-avatar>
<div>Size can be controlled</div>
<ws-avatar ws-x="[@size 50px]">
<img src="https://cdn.frankerfacez.com/avatar/twitch/267212376" />
</ws-avatar>
<ws-avatar ws-x="[@size 60px]">
<img src="https://cdn.frankerfacez.com/avatar/twitch/186685294" />
</ws-avatar>
<div>Can also put text/colors in instead of images</div>
<ws-avatar ws-x="[$color @primary]">
69
</ws-avatar>
</ws-flex>