Avatar

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

	const imgSrc =
		'https://images.unsplash.com/photo-1620122303020-87ec826cf70d?q=80&w=256&h=256&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D';
</script>

<Avatar src={imgSrc} name="skeleton" />

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 suppy 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>

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.
`filter`	string	Set avatar image filter name, such as: "#Apollo".
`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`		The default child slot.