The Avatar component is used to represent user, and displays the profile picture, initials or fallback icon.
Usage
<div class="centered">
<goat-avatar name="Shivaji Varma" src="/assets/img/avatar.webp"></goat-avatar>
</div>
<br>
<div class="centered">
<goat-avatar name="Shivaji Varma"></goat-avatar>
</div>
<br>
<div class="centered">
<goat-avatar name="Shivaji Varma" class="square"></goat-avatar>
</div>
Sizes
<goat-avatar name="Shivaji Varma"></goat-avatar>
<goat-avatar size="150px" name="Shivaji Varma"></goat-avatar>
<goat-avatar name="Shivaji Varma" class="square"></goat-avatar>
<goat-avatar size="4rem" name="Shivaji Varma" class="square" show-name="true"></goat-avatar>
<br>
<br>
<goat-avatar src="/assets/img/avatar.webp"></goat-avatar>
<goat-avatar size="8rem" src="/assets/img/avatar.webp"></goat-avatar>
<goat-avatar size="4rem" src="/assets/img/avatar.webp" class="square"></goat-avatar>
<goat-avatar src="/assets/img/avatar.webp" class="square"></goat-avatar>