Avatar — Svelte

Avatar component

Accessible avatar: profile image when provided, or initials from name / initials. Sizes (sm, md, lg) and shape (circle, square). BEM: avatar, avatar--sm/md/lg, avatar--circle/square.

Props

• src (string, optional) — Image URL
• alt (string, optional) — Alt text for the image
• name (string, optional) — Full name for initials (e.g. "Jane Doe" → "JD")
• initials (string, optional) — Override initials; ignored if name is set
• size (string, optional) — sm, md, lg (default: md)
• shape (string, optional) — circle, square (default: circle)
• class (string, optional) — Additional CSS classes

Initials (basic)

Sizes

Shape

Use shape="square" for a rounded square; default is circle.

With image

Pass src and alt for a profile image (lazy-loaded, object-fit: cover).

Live example (placeholder)

Usage

<script>
  import Avatar from './components/svelte/Avatar.svelte';
</script>

<Avatar name="Jane Doe" />
<Avatar name="Alice" />
<Avatar initials="AB" />
<Avatar name="Jane Doe" size="sm" />
<Avatar name="Jane Doe" shape="square" />
<Avatar src="/photo.jpg" alt="Jane Doe" size="md" />