Avatar Component

<template>
  <AvatarSimple
    picture="https://dummyimage.com/150x150.jpg"
    size="small"
  />
  <AvatarSimple 
    picture="https://dummyimage.com/150x150.jpg" />
  <AvatarSimple
    picture="https://dummyimage.com/150x150.jpg"
    size="medium"
  />
  <AvatarSimple
    picture="https://dummyimage.com/150x150.jpg"
    size="large"
  />
  <AvatarSimple
    picture="https://dummyimage.com/150x150.jpg"
    size="big"
  />
  <AvatarSimple
    picture="https://dummyimage.com/150x150.jpg"
    size="xl"
  />
</template>

<template>
  <AvatarSimple picture="https://dummyimage.com/150x150" size="small" squared />
  <AvatarSimple picture="https://dummyimage.com/150x150" />
  <AvatarSimple picture="https://dummyimage.com/150x150" size="medium" squared />
  <AvatarSimple picture="https://dummyimage.com/150x150" size="large" squared />
  <AvatarSimple picture="https://dummyimage.com/150x150" size="big" squared />
  <AvatarSimple picture="https://dummyimage.com/150x150" size="xl" squared />
</template>

<template>
  <AvatarSimple
    picture="https://dummyimage.com/150x150"
    size="medium"
    badge="/@src/assets/icons/flags/united-states-of-america.svg"
  />
</template>

<template>
  <AvatarGroup 
    size="medium" 
    :avatars="avatars" 
    :limit="5" 
    compact 
    counter 
  />
</template>