Avatar with fallback

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

<template>
  <div class="flex items-center gap-2">
    <Avatar>
      <AvatarFallback>AJ</AvatarFallback>
    </Avatar>
    <Avatar>
      <AvatarFallback>
        <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-user size-4"
          aria-hidden="true"
        ><path d="M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2" /><circle cx="12" cy="7" r="4" /></svg>
      </AvatarFallback>
    </Avatar>
  </div>
</template>