<script>
import { PersonPicture, InfoBadge } from "fluent-svelte";
</script>
<PersonPicture src="https://thispersondoesnotexist.com/image" alt="Random person">
{Math.random()
.toString(36)
.replace(/[^a-z]+/g, "")
.toUpperCase()
.substr(0, 2)}
</PersonPicture>
<PersonPicture src="https://thispersondoesnotexist.com/image" alt="Random person" size={48} />
<PersonPicture>
{Math.random()
.toString(36)
.replace(/[^a-z]+/g, "")
.toUpperCase()
.substr(0, 2)}
<svelte:fragment slot="badge">
<InfoBadge>1</InfoBadge>
</svelte:fragment>
</PersonPicture>
<PersonPicture alt="A A A" />
<style>
@import url("https://unpkg.com/fluent-svelte/theme.css");
:global(body) {
background-color: var(--fds-solid-background-base);
color: var(--fds-text-primary);
}
</style>