Avatar
A face, or the initials standing in for it.
Default
Two avatars: the first finds its picture, the second does not and keeps its initials.
PGPG
The image is shown once it has loaded; until then, and for good if it never arrives, the fallback holds its place. The swap is a 200 ms fade rather than a jump, and the shape never changes size, so a row of avatars does not shuffle as pictures arrive.
Installation
npx philcn@latest add avatarThe file is written into your project. It is yours from then on — change it as you like.
Examples
A stack
Overlapped, with a ring in the page's colour so they read as a group.
ABCDEF
Props
| Prop | Type | What it does |
|---|---|---|
| AvatarImage.src | string | The picture to show once it loads. |
| AvatarImage.alt | string | Leave it empty when the name is written next to the avatar: repeating it only makes a screen reader say it twice. |
| AvatarFallback.delayMs | number | Waits this long before showing the initials, so a picture that arrives quickly does not flash them first. |
Types are read from the library itself, so this table cannot describe an option the code no longer has.