Avatar

Just an avatar.

The image provided by AvatarMeta is not optimized. That’s because we cannot use enhanced:img because the image needs to be local and known at build time.

Props

An Avatar component has the following properties:

Prop	Required	Description
`value`	yes	Metadata of type `AvatarMeta`.

Examples

Avatar with image:

Thilo Maier

<script lang="ts">
	import { Avatar } from '$lib/components/index.js';
	import type { AvatarMeta } from '$lib/types.js';

	const value: AvatarMeta = {
		id: 'thilo',
		name: 'Thilo Maier',
		initials: 'TM',
		url: 'https://mu.social/profile/maier.tech',
		imageUrl: 'https://www.maier.tech/assets/portrait-thilo-maier.jpg'
	};
</script>

<Avatar {value} />

Avatar without image:

Thilo Maier

<script lang="ts">
	import { Avatar } from '$lib/components/index.js';
	import type { AvatarMeta } from '$lib/types.js';

	const value: AvatarMeta = {
		id: 'thilo',
		name: 'Thilo Maier',
		initials: 'TM',
		url: 'https://mu.social/profile/maier.tech',
		imageUrl: 'https://www.maier.tech/assets/portrait-thilo-maier.jpg'
	};
</script>

<Avatar {value} />