Avatar

Fallback

When src or srcSet are missing or fail to load, a fallback will be displayed. By default this will show the user initials, based on the name. Optionally you can supply your own content using the default children. This can be used to display icons or implement a custom image using @sveltejs/enhanced-img.

<script lang="ts">
  import { Avatar } from '@skeletonlabs/skeleton-svelte';
  import Skull from '@lucide/svelte/icons/skull';
</script>

<div class="flex gap-4">
  <Avatar name="John Doe"></Avatar>
  <Avatar name="icon" background="preset-filled-primary-500">
    <Skull size={24} />
  </Avatar>
</div>

Filters

Avatars can implement SVG Filters using arbitrary Tailwind syntax.

<script lang="ts">
  import { Avatar } from '@skeletonlabs/skeleton-svelte';
</script>

<Avatar src="https://i.pravatar.cc/150?img=48" name="filtered" imageClasses="[filter:url(#Apollo)]" />

<!-- Filter -->
<!-- Ideally you have as single instance of this in your application. -->
<svg id="svg-filter-apollo" class="absolute -left-full w-0 h-0">
  <filter id="Apollo" filterUnits="objectBoundingBox" primitiveUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
    <feColorMatrix
      values="0.8 0.6 -0.4 0.1 0,
    0 1.2 0.05 0 0,
    0 -1 3 0.02 0,
    0 0 0 50 0"
      result="final"
      in="SourceGraphic"
    ></feColorMatrix>
  </filter>
</svg>

Style Attribute

Use the style prop to implement custom styles on the parent <figure> element.

Anatomy

<Avatar>

image

<img>

fallback

<span>

API Reference

Property	Type	Description
`src`	string	Set avatar image source URL.
`srcset`	string	The source set of the avatar image.
`name` *	string	Provide a name or username for the avatar.
`base`	string	Set base styles.
`background`	string	Set background styles.
`size`	string	Set size styles.
`font`	string	Set font styles.
`border`	string	Set border styles.
`rounded`	string	Set border radius styles.
`shadow`	string	Set shadow styles.
`classes`	string	Provide arbitrary CSS classes.
`imageBase`	string	Set avatar image base styles.
`imageClasses`	string	Provide avatar image arbitrary CSS classes.
`fallbackBase`	string	Set base classes for the fallback element.
`fallbackClasses`	string	Provide arbitrary CSS classes to fallback element.
`children`	Snippet<[]>	The default child slot.
`ids`		The ids of the elements in the avatar. Useful for composition.
`dir`	"ltr" \| "rtl"	The document's text/writing direction. Default: "ltr"
`getRootNode`		A root node to correctly resolve document in custom environments. E.x.: Iframes, Electron.
`onStatusChange`		Functional called when the image loading status changes.
`style`	string