Avatar - Skeleton

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