Avatar

<script setup lang="ts">
import { VAvatar, VIcon } from '@vonage/vivid-api-vue';
</script>

<template>
  <VAvatar>
    <template #icon><VIcon name="user-line" label="User's avatar" /></template>
  </VAvatar>
</template>

<script type="module">
  import { registerAvatar } from '@vonage/vivid-api';
  registerAvatar('your-prefix');
</script>

<your-prefix-avatar>
  <vwc-icon slot="icon" name="user-line" label="User's avatar"></vwc-icon>
</your-prefix-avatar>

<script setup lang="ts">
import { VAvatar, VIcon } from '@vonage/vivid-api-vue';
</script>

<template>
  <VAvatar>
    <template #icon><VIcon name="assign-user-solid" label="Verified user's avatar" /></template>
  </VAvatar>
</template>

<vwc-avatar>
  <vwc-icon slot="icon" name="assign-user-solid" label="Verified User's avatar"></vwc-icon>
</vwc-avatar>

<script setup lang="ts">
import { VAvatar } from '@vonage/vivid-api-vue';
</script>

<template>
  <div class="container">
    <VAvatar shape="pill" connotation="cta">
      <img slot="graphic" src="https://images.pexels.com/photos/762080/pexels-photo-762080.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" alt="woman" />
    </VAvatar>

      <VAvatar shape="pill" connotation="cta">
        <svg slot="graphic" xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 349.66 349.66" fill="none">
          <path d="M258.65 229.64h-151.92c-16.65 0-35.17-13.51-41.34-30.16L1.99 30.16C-4.19 13.51 4.3 0 20.96 0h151.91c16.65 0 35.17 13.51 41.34 30.16l63.38 169.32c6.18 16.65-2.31 30.16-18.97 30.16z" fill="url(#grad)" />
          <defs>
            <linearGradient id="grad" x1="0" y1="0" x2="349.66" y2="349.66" gradientUnits="userSpaceOnUse">
              <stop stop-color="#A662FF" />
              <stop offset="1" stop-color="#57EDFD" />
            </linearGradient>
          </defs>
        </svg>
      </VAvatar>
    </div>

</template>

<style scoped>
.container {
  display: inline-flex;
  gap: 4px;
}
</style>

<div class="container">
  <vwc-avatar shape="pill" connotation="cta">
    <img slot="graphic" src="https://images.pexels.com/photos/762080/pexels-photo-762080.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" alt="woman" />
  </vwc-avatar>

  <vwc-avatar shape="pill" connotation="cta">
    <svg slot="graphic" xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 349.66 349.66" fill="none">
      <path d="M258.65 229.64h-151.92c-16.65 0-35.17-13.51-41.34-30.16L1.99 30.16C-4.19 13.51 4.3 0 20.96 0h151.91c16.65 0 35.17 13.51 41.34 30.16l63.38 169.32c6.18 16.65-2.31 30.16-18.97 30.16z" fill="url(#grad)" />
      <defs>
        <linearGradient id="grad" x1="0" y1="0" x2="349.66" y2="349.66" gradientUnits="userSpaceOnUse">
          <stop stop-color="#A662FF" />
          <stop offset="1" stop-color="#57EDFD" />
        </linearGradient>
      </defs>
    </svg>
  </vwc-avatar>
</div>

<style>
  .container {
    display: inline-flex;
    gap: 4px;
  }
</style>