mirror of
https://seed.radicle.dev/rad:z4V1sjrXqjvFdnCUbxPFqd5p4DtH5.git
synced 2026-10-30 16:50:47 +08:00
37 lines
783 B
Svelte
37 lines
783 B
Svelte
<script lang="ts">
|
|
import { onMount } from 'svelte';
|
|
import { createIcon } from '@app/blockies';
|
|
|
|
export let address: string;
|
|
export let glowOnHover = false;
|
|
|
|
let container: HTMLElement;
|
|
|
|
onMount(() => {
|
|
const seed = address.toLowerCase();
|
|
const avatar = createIcon({
|
|
seed,
|
|
size: 8,
|
|
scale: 16,
|
|
});
|
|
container.style.backgroundImage = `url(${avatar.toDataURL()})`;
|
|
});
|
|
</script>
|
|
|
|
<style>
|
|
.icon {
|
|
width: 100%;
|
|
height: 100%;
|
|
min-width: 1rem;
|
|
min-height: 1rem;
|
|
background-size: cover;
|
|
background-repeat: no-repeat;
|
|
border-radius: 50%;
|
|
}
|
|
.icon.glowOnHover:hover {
|
|
box-shadow: 0 0 3rem var(--color-secondary);
|
|
}
|
|
</style>
|
|
|
|
<div class="icon" bind:this={container} class:glowOnHover title={address}></div>
|