Avatar

Avatars can be used to represent people or objects. It supports image url.

Basic Usage

<template>
  <div class="flex justify-between items-end">
    <HcAvatar
      size="big"
      img-src="https://storage.googleapis.com/hc-auth-assets/defaults/user-avatar.png"
    />
    <HcAvatar
      size="medium"
      img-src="https://storage.googleapis.com/hc-auth-assets/defaults/user-avatar.png"
    />
    <HcAvatar
      size="small"
      img-src="https://storage.googleapis.com/hc-auth-assets/defaults/user-avatar.png"
    />
    <HcAvatar
      size="mini"
      img-src="https://storage.googleapis.com/hc-auth-assets/defaults/user-avatar.png"
    />
  </div>
</template>

<script lang="ts" setup>
import { HcAvatar } from '@deeepvision/hope-component-kit';
</script>

Props

Property	Type	Values	Description	Default
size	String	bigmediumsmallmini	avatar size.	medium
imgSrc	String	String	the source of the image for an image avatar.

Avatar #

Basic Usage #

Props #

Avatar

Basic Usage

Props