Avatars

Svelte Component

Display user avatars with an image or initials.

Examples

avatar

Usage

Image

Display an image source cropped into the shape.

html
<Avatar src="https://i.pravatar.cc/" />

Initials

Display up to two text characters. (ex: Jane Doe would be JD)

html
<Avatar initials="JD" />

Using Filters

See Filters to learn how to import and configure the filters action and SVG filter components.

ts
import { filter, Apollo, /* ... */ } from '@skeletonlabs/skeleton';

Import the filter action reference using action and set actionParams to the desired filter id.

html
<Avatar src="https://i.pravatar.cc/" action={filter} actionParams="Apollo" />