Avatars

Using Images

Display an image source cropped into the shape.

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

Using Initials

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

<Avatar initials="JD" />

Applying Filters

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

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

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

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