1  <script lang="ts">
 2    import { createIcon } from "@app/lib/blockies";
 3  
 4    export let nodeId: string;
 5    export let variant: "small" | "large";
 6  
 7    function createContainer(source: string) {
 8      source = source.replace("did:key:", "");
 9      const seed = source.toLowerCase();
10      const avatar = createIcon({
11        seed,
12        size: 8,
13        scale: 16,
14      });
15      return avatar.toDataURL();
16    }
17  </script>
18  
19  <style>
20    .avatar {
21      display: block;
22      box-shadow: 0 0 0 1px var(--color-border-match-background);
23      width: inherit;
24      object-fit: cover;
25      background-size: cover;
26      background-repeat: no-repeat;
27    }
28    .small {
29      width: 1rem;
30      border-radius: var(--border-radius-round);
31    }
32    .large {
33      width: 4rem;
34      border-radius: var(--border-radius-small);
35    }
36  </style>
37  
38  <img
39    title={nodeId}
40    src={createContainer(nodeId)}
41    class="avatar"
42    class:small={variant === "small"}
43    class:large={variant === "large"}
44    alt="avatar" />