Avatar group with an icon count

<script setup lang="ts">
import {
  Avatar,
  AvatarFallback,
  AvatarGroup,
  AvatarGroupCount,
  AvatarImage,
} from "@/components/ui/avatar"

const PIXEL =
  "data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAUwAOw=="
</script>

<template>
  <AvatarGroup>
    <Avatar>
      <AvatarImage :src="PIXEL" alt="Nick Johnson" />
      <AvatarFallback>NJ</AvatarFallback>
    </Avatar>
    <Avatar>
      <AvatarImage :src="PIXEL" alt="Alex Johnson (away)" />
      <AvatarFallback>AJ</AvatarFallback>
    </Avatar>
    <Avatar>
      <AvatarImage :src="PIXEL" alt="Sarah Chen" />
      <AvatarFallback>SC</AvatarFallback>
    </Avatar>
    <AvatarGroupCount>
      <svg
        xmlns="http://www.w3.org/2000/svg"
        width="24"
        height="24"
        viewBox="0 0 24 24"
        fill="none"
        stroke="currentColor"
        stroke-width="2"
        stroke-linecap="round"
        stroke-linejoin="round"
        class="lucide lucide-plus"
        aria-hidden="true"
      ><path d="M5 12h14" /><path d="M12 5v14" /></svg>
    </AvatarGroupCount>
  </AvatarGroup>
</template>