32 lines
No EOL
701 B
Svelte
32 lines
No EOL
701 B
Svelte
<script>
|
|
const {src, alt = "Profile image"} = $props();
|
|
import jdenticon from "jdenticon/standalone";
|
|
</script>
|
|
|
|
<div class="rounded-avatar-wrapper">
|
|
{#if src}
|
|
<img class="rounded-avatar" {src} {alt} />
|
|
{:else}
|
|
{@const randomAvatar = jdenticon.toSvg(Navigator.userAgent, 320, { padding: 0 })}
|
|
<div class="rounded-avatar">
|
|
{@html randomAvatar}
|
|
</div>
|
|
{/if}
|
|
</div>
|
|
|
|
<style>
|
|
.rounded-avatar-wrapper {
|
|
display: flex;
|
|
width: 100%;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
|
|
.rounded-avatar {
|
|
overflow: hidden;
|
|
border-radius: 100%;
|
|
aspect-ratio: 1 / 1;
|
|
}
|
|
|
|
|
|
</style> |