<template>
  <div class="demo-avatar-basic">
    <ui-avatar
      icon="user"
      size="large">
    </ui-avatar>
    <ui-avatar
      icon="user"
      size="medium">
    </ui-avatar>
    <ui-avatar
      icon="user">
    </ui-avatar>
    <ui-avatar
      icon="user"
      size="small">
    </ui-avatar>
    <ui-avatar
      shape="square"
      icon="user"
      size="large">
    </ui-avatar>
    <ui-avatar
      shape="square"
      icon="user"
      size="medium">
    </ui-avatar>
    <ui-avatar
      shape="square"
      icon="user">
    </ui-avatar>
    <ui-avatar
      shape="square"
      icon="user"
      size="small">
    </ui-avatar>
  </div>
</template>
<script>
import { Avatar } from "amumu-ui"

export default {
  components: {
    "ui-avatar": Avatar,
  },
}
</script>
<style lang="scss">
.demo-avatar-basic {
  display: flex;
  align-items: flex-end;
  .mm-avatar {
    margin: 10px;
  }
}
</style>
