Avatar

	<script>
  import { Avatar } from "flowbite-svelte";
</script>

<div class="flex space-x-4 rtl:space-x-reverse">
  <Avatar src="/images/profile-picture-2.webp" />
  <Avatar src="/images/profile-picture-2.webp" cornerStyle="rounded" />
</div>

	<script>
  import { Avatar } from "flowbite-svelte";
  import { BugOutline } from "flowbite-svelte-icons";
</script>

<Avatar>
  <BugOutline />
</Avatar>

	<script>
  import { Avatar, Indicator } from "flowbite-svelte";
  import { BugOutline } from "flowbite-svelte-icons";
</script>

<Avatar src="/images/profile-picture-3.webp">
  {#snippet indicator()}
    <Indicator color="gray" border size="xl" placement="top-right">
      <BugOutline />
    </Indicator>
  {/snippet}
</Avatar>

	<script>
  import { Avatar } from "flowbite-svelte";
</script>

<Avatar src="/images/profile-picture-2.webp" border />
<Avatar src="/images/profile-picture-2.webp" border class="ring-red-400 dark:ring-red-300" />

	<script>
  import { Avatar } from "flowbite-svelte";
</script>

<Avatar />
<Avatar cornerStyle="rounded" />
<Avatar border />
<Avatar cornerStyle="rounded" border />

	<script>
  import { Avatar } from "flowbite-svelte";
</script>

<Avatar>JL</Avatar>

	<script>
  import { Avatar, Tooltip } from "flowbite-svelte";
</script>

<Avatar data-name="Jese Leos" src="/images/profile-picture-1.webp" />
<Tooltip>Jese Leos</Tooltip>
<Avatar data-name="Robert Gouth" src="/images/profile-picture-2.webp" />
<Tooltip>Robert Gouth</Tooltip>
<Avatar data-name="Bonnie Green" src="/images/profile-picture-3.webp" />
<Tooltip>Bonnie Green</Tooltip>

	<script>
  import { Avatar } from "flowbite-svelte";
</script>

<Avatar src="/images/profile-picture-3.webp" dot={{ color: "red" }} />
<Avatar src="/images/profile-picture-3.webp" dot={{ placement: "top-right", color: "red" }} cornerStyle="rounded" />
<Avatar src="/images/profile-picture-5.webp" dot={{ placement: "bottom-right", color: "green" }} />
<Avatar src="/images/profile-picture-5.webp" dot={{ placement: "bottom-right" }} cornerStyle="rounded" />

<Avatar dot={{}} />

	<script>
  import { Avatar } from "flowbite-svelte";
</script>

<div class="mb-5 flex">
  <Avatar src="/images/profile-picture-1.webp" stacked />
  <Avatar src="/images/profile-picture-2.webp" stacked />
  <Avatar src="/images/profile-picture-3.webp" stacked />
  <Avatar stacked />
</div>
<div class="flex">
  <Avatar src="/images/profile-picture-1.webp" stacked />
  <Avatar src="/images/profile-picture-2.webp" stacked />
  <Avatar src="/images/profile-picture-3.webp" stacked />
  <Avatar stacked href="/" class="bg-gray-700 text-sm text-white hover:bg-gray-600">+99</Avatar>
</div>

	<script>
  import { Avatar } from "flowbite-svelte";
</script>

<div class="flex items-center space-x-4 rtl:space-x-reverse">
  <Avatar src="/images/profile-picture-1.webp" cornerStyle="rounded" />
  <div class="space-y-1 font-medium dark:text-white">
    <div>Jese Leos</div>
    <div class="text-sm text-gray-500 dark:text-gray-400">Joined in August 2014</div>
  </div>
</div>

	<script>
  import { Avatar, Dropdown, DropdownHeader, DropdownItem, DropdownGroup } from "flowbite-svelte";
</script>

<Avatar id="user-drop" src="/images/profile-picture-3.webp" class="cursor-pointer" dot={{ color: "green" }} />
<Dropdown triggeredBy="#user-drop">
  <DropdownHeader>
    <span class="block text-sm">Bonnie Green</span>
    <span class="block truncate text-sm font-medium">name@flowbite.com</span>
  </DropdownHeader>
  <DropdownGroup>
    <DropdownItem>Dashboard</DropdownItem>
    <DropdownItem>Settings</DropdownItem>
    <DropdownItem>Earnings</DropdownItem>
  </DropdownGroup>
  <DropdownGroup>
    <DropdownItem>Sign out</DropdownItem>
  </DropdownGroup>
</Dropdown>

	<script>
  import { Avatar } from "flowbite-svelte";
</script>

<div class=" flex flex-wrap justify-center space-x-4 rtl:space-x-reverse">
  <Avatar src="/images/profile-picture-3.webp" size="xs" />
  <Avatar src="/images/profile-picture-3.webp" size="sm" />
  <Avatar src="/images/profile-picture-3.webp" size="md" />
  <Avatar src="/images/profile-picture-3.webp" size="lg" />
  <Avatar src="/images/profile-picture-3.webp" size="xl" />
  <Avatar src="/images/profile-picture-3.webp" class="h-28 w-28" />
</div>