Refactor icon component

Signed-off-by: Rūdolfs Ošiņš <rudolfs@osins.org>
2026-11-01 01:30:46 +08:00 · 2022-08-24 09:17:11 +02:00
parent 8021f6396d
commit c4769c8127
10 changed files with 174 additions and 102 deletions
@@ -28,10 +28,10 @@
    height: 24px;
  }
  .clipboard:hover :global(svg) {
-    stroke: var(--color-foreground-90);
+    fill: var(--color-foreground-90);
  }
  .clipboard:active :global(svg) {
-    stroke: var(--color-positive);
+    fill: var(--color-positive);
  }
  .clipboard:hover {
    border-radius: var(--border-radius);
@@ -40,8 +40,8 @@

 <span class="clipboard" class:small on:click|stopPropagation={copy}>
  {#if small}
-    <Icon name="clipboard-small" width={12} height={12} />
+    <Icon name="clipboard-small" />
  {:else}
-    <Icon name="clipboard" width={16} height={16} />
+    <Icon name="clipboard" />
  {/if}
 </span>
@@ -225,7 +225,9 @@
      </span>
    {/if}
    <div class="toggle" on:click={toggleNavbar}>
-      <Icon name="ellipsis" width={27} height={27} fill />
+      <span style="transform: scale(1.2);">
+        <Icon name="ellipsis" />
+      </span>
    </div>
  </div>

@@ -1,90 +1,152 @@
 <script lang="ts">
-  export let name: string;
-  export let width: number | null = null;
-  export let height: number | null = null;
-  export let inline = false;
-  export let fill = false;
+  import { unreachable } from "@app/utils";

-  const icons = [
-    {
-      name: "twitter",
-      size: 24,
-      data: `<path d="M23.953 4.57a10 10 0 01-2.825.775 4.958 4.958 0 002.163-2.723c-.951.555-2.005.959-3.127 1.184a4.92 4.92 0 00-8.384 4.482C7.69 8.095 4.067 6.13 1.64 3.162a4.822 4.822 0 00-.666 2.475c0 1.71.87 3.213 2.188 4.096a4.904 4.904 0 01-2.228-.616v.06a4.923 4.923 0 003.946 4.827 4.996 4.996 0 01-2.212.085 4.936 4.936 0 004.604 3.417 9.867 9.867 0 01-6.102 2.105c-.39 0-.779-.023-1.17-.067a13.995 13.995 0 007.557 2.209c9.053 0 13.998-7.496 13.998-13.985 0-.21 0-.42-.015-.63A9.935 9.935 0 0024 4.59z"/>`
-    },
-    {
-      name: "github",
-      size: 24,
-      data: `<path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/>`
-    },
-    {
-      name: "url",
-      size: 24,
-      data: `<path d="m 22.149137,10.881006 -4.50822,4.506674 c -2.488332,2.489875 -6.525018,2.489875 -9.0133491,0 C 8.2354124,14.997069 7.9288596,14.55666 7.6596044,14.102258 l 2.0946322,-2.094633 c 0.099595,-0.100392 0.2225451,-0.157959 0.3400174,-0.225634 0.144712,0.494888 0.397583,0.963282 0.786651,1.352302 1.242598,1.243393 3.264874,1.241849 4.506675,0 l 4.506675,-4.5066751 c 1.243394,-1.2433942 1.243394,-3.2648741 0,-4.5074715 -1.241851,-1.2425972 -3.26328,-1.2425972 -4.506675,0 L 13.784698,5.7245722 C 12.484535,5.2180323 11.083184,5.0818859 9.7191796,5.2818228 L 13.134194,1.8668091 c 2.489875,-2.4890788 6.525017,-2.4890788 9.014892,0 2.488384,2.4891784 2.488384,6.5251176 5.1e-5,9.0141969 z m -11.917939,7.410517 -1.6036301,1.604425 c -1.2425972,1.241852 -3.2648738,1.241852 -4.5074712,0 -1.2425974,-1.243393 -1.2425974,-3.264875 0,-4.508218 l 4.5074712,-4.506675 c 1.2433943,-1.2433946 3.2640781,-1.2433946 4.5066761,0 0.388269,0.388272 0.641141,0.856666 0.787447,1.350757 0.118269,-0.06847 0.239676,-0.124494 0.339271,-0.224088 L 16.355594,9.9138881 C 16.087933,9.4579417 15.779785,9.0190766 15.38763,8.6277177 c -2.488331,-2.4890788 -6.5250181,-2.4890788 -9.0141462,0 L 1.8668091,13.134392 c -2.4890788,2.489875 -2.4890788,6.525018 0,9.014894 2.489079,2.488332 6.5250179,2.488332 9.0141469,0 l 3.415809,-3.415811 c -1.364801,0.200735 -2.766151,0.0638 -4.065567,-0.441952 z"/>`
-    },
-    {
-      name: "ellipsis",
-      size: 24,
-      data: `<path d="M7 12a2 2 0 1 1-4.001-.001A2 2 0 0 1 7 12zm12-2a2 2 0 1 0 .001 4.001A2 2 0 0 0 19 10zm-7 0a2 2 0 1 0 .001 4.001A2 2 0 0 0 12 10z"/>`
-    },
-    {
-      name: "fork",
-      size: 16,
-      offset: { x: -1, y: 0 },
-      data: `<circle cx="6.5" cy="13.5" r="2" stroke="#5555FF"/><circle cx="10.5" cy="2.5" r="2" stroke="#5555FF"/><circle cx="2.5" cy="2.5" r="2" stroke="#5555FF"/><path d="M6.5 11.5C6.5 7 2.5 8 2.5 5.5C2.5 3.9 2.5 4.66667 2.5 4" stroke="#5555FF"/><path d="M6.5 11.5C6.5 7 10.5 8 10.5 5.5C10.5 3.9 10.5 4.66667 10.5 4" stroke="#5555FF"/>`
-    },
-    {
-      name: "browse",
-      size: 16,
-      data: `<path fill-rule="evenodd" d="M4.72 3.22a.75.75 0 011.06 1.06L2.06 8l3.72 3.72a.75.75 0 11-1.06 1.06L.47 8.53a.75.75 0 010-1.06l4.25-4.25zm6.56 0a.75.75 0 10-1.06 1.06L13.94 8l-3.72 3.72a.75.75 0 101.06 1.06l4.25-4.25a.75.75 0 000-1.06l-4.25-4.25z"></path>`
-    },
-    {
-      name: "chevron",
-      size: 15,
-      offset: { x: 0, y: 1 },
-      data: `<path fill-rule="evenodd" d="M12.78 6.22a.75.75 0 010 1.06l-4.25 4.25a.75.75 0 01-1.06 0L3.22 7.28a.75.75 0 011.06-1.06L8 9.94l3.72-3.72a.75.75 0 011.06 0z"></path>`
-    },
-    {
-      name: "clipboard-small",
-      size: 12,
-      offset: { x: -1, y: 1 },
-      data: `<svg width="12" height="12" viewBox="0 0 12 12" stroke="currentColor" xmlns="http://www.w3.org/2000/svg"><line x1="3.5" y1="1" x2="3.5" y2="10"/><line x1="6.5" y1="1" x2="6.5" y2="4"/><line x1="9.5" y1="5" x2="9.5" y2="10"/><line x1="7" y1="1.5" x2="4" y2="1.5"/><line x1="9.64645" y1="4.35355" x2="6.64644" y2="1.35355"/><line x1="10" y1="9.5" x2="4" y2="9.5"/><line x1="10" y1="4.5" x2="6" y2="4.5"/><line x1="1.5" y1="4" x2="1.5" y2="12"/><line x1="7" y1="11.5" x2="1" y2="11.5"/></svg>`
-    },
-    {
-      name: "clipboard",
-      size: 16,
-      data: `<svg width="16" height="16" viewBox="0 0 16 16" stroke="currentColor" xmlns="http://www.w3.org/2000/svg"><line x1="4.5" y1="1" x2="4.5" y2="13"/><line x1="9.5" y1="1" x2="9.5" y2="4"/><line x1="12.5" y1="5" x2="12.5" y2="13"/><line x1="9" y1="1.5" x2="5" y2="1.5"/><line x1="12.6464" y1="4.35355" x2="9.64644" y2="1.35355"/><line x1="12" y1="12.5" x2="5" y2="12.5"/><line x1="13" y1="4.5" x2="9" y2="4.5"/><line x1="2.5" y1="4" x2="2.5" y2="15"/><line x1="10" y1="14.5" x2="2" y2="14.5"/></svg>`
-    }
-  ];
-  const svg = icons.find(e => e.name === name);
+  export let name:
+    | "browse"
+    | "clipboard"
+    | "clipboard-small"
+    | "ellipsis"
+    | "fork"
+    | "github"
+    | "twitter"
+    | "url";
 </script>

 <style>
  svg {
-    fill: transparent;
-  }
-  svg.fill {
-    fill: currentColor;
-  }
-  span.inline, svg.inline {
-    height: 1.6rem;
-  }
-  svg.clickable {
-    cursor: pointer;
-  }
-  span {
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
+    display: flex;
+    flex-shrink: 0;
  }
 </style>

-{#if svg}
-  <span on:click class:inline style:height={`${height}px`} style:width={`${width}px`}>
-    <svg role="img" class={$$props.class} class:inline class:fill
-         width={width || "1rem"}
-         height={height || "1rem"}
-         viewBox="{svg.offset?.x || 0} {svg.offset?.y || 0} {svg.size} {svg.size}">
-      {@html svg.data}
-    </svg>
-  </span>
-{/if}
+<svg
+  role="img"
+  on:click
+  height="24"
+  width="24"
+  fill="currentColor"
+  viewBox="0 0 24 24">
+  {#if name === "browse"}
+    <path d="M8.46934 7.23871C8.61151 7.10623 8.79956 7.03411 8.99386
+    7.03753C9.18816 7.04096 9.37355 7.11967 9.51096 7.25709C9.64838 7.3945
+    9.72709 7.57988 9.73052 7.77419C9.73394 7.96849 9.66182 8.15653 9.52934
+    8.29871L5.80934 12.0187L9.52934 15.7387C9.60303 15.8074 9.66213 15.8902
+    9.70312 15.9822C9.74411 16.0742 9.76615 16.1735 9.76793 16.2742C9.76971
+    16.3749 9.75118 16.4749 9.71346 16.5683C9.67574 16.6617 9.6196 16.7465
+    9.54838 16.8177C9.47716 16.889 9.39233 16.9451 9.29894 16.9828C9.20555
+    17.0206 9.10552 17.0391 9.00482 17.0373C8.90411 17.0355 8.8048 17.0135
+    8.7128 16.9725C8.6208 16.9315 8.538 16.8724 8.46934 16.7987L4.21934
+    12.5487C4.07889 12.4081 4 12.2175 4 12.0187C4 11.82 4.07889 11.6293 4.21934
+    11.4887L8.46934 7.23871V7.23871ZM15.0293 7.23871C14.9607 7.16502 14.8779
+    7.10592 14.7859 7.06493C14.6939 7.02394 14.5946 7.00189 14.4939
+    7.00012C14.3932 6.99834 14.2931 7.01686 14.1997 7.05459C14.1064 7.09231
+    14.0215 7.14845 13.9503 7.21967C13.8791 7.29089 13.8229 7.37572 13.7852
+    7.46911C13.7475 7.5625 13.729 7.66253 13.7307 7.76323C13.7325 7.86393
+    13.7546 7.96325 13.7956 8.05525C13.8366 8.14725 13.8957 8.23005 13.9693
+    8.29871L17.6893 12.0187L13.9693 15.7387C13.8957 15.8074 13.8366 15.8902
+    13.7956 15.9822C13.7546 16.0742 13.7325 16.1735 13.7307 16.2742C13.729
+    16.3749 13.7475 16.4749 13.7852 16.5683C13.8229 16.6617 13.8791 16.7465
+    13.9503 16.8177C14.0215 16.889 14.1064 16.9451 14.1997 16.9828C14.2931
+    17.0206 14.3932 17.0391 14.4939 17.0373C14.5946 17.0355 14.6939 17.0135
+    14.7859 16.9725C14.8779 16.9315 14.9607 16.8724 15.0293 16.7987L19.2793
+    12.5487C19.4198 12.4081 19.4987 12.2175 19.4987 12.0187C19.4987 11.82
+    19.4198 11.6293 19.2793 11.4887L15.0293 7.23871V7.23871Z" />
+  {:else if name === "clipboard"}
+    <path d="M9 5H14.7071L18 8.29289V17H9V5ZM10 6V16H17V9H14V6H10ZM15
+    6.70711L16.2929 8H15V6.70711ZM7 8H8V18H15V19H7V8Z" />
+  {:else if name === "clipboard-small"}
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M14 7L17 10V16H10V7H14ZM13
+    8H11V15H16V11H13V8ZM14 8.41421V10H15.5858L14 8.41421ZM8
+    10H9V17H14V18H8V10Z" />
+  {:else if name === "ellipsis"}
+    <path d="M7 12a2 2 0 1 1-4.001-.001A2 2 0 0 1 7 12zm12-2a2 2 0 1 0 .001
+    4.001A2 2 0 0 0 19 10zm-7 0a2 2 0 1 0 .001 4.001A2 2 0 0 0 12 10z"/>
+  {:else if name === "fork"}
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M8.34375 6.9375C7.5671
+    6.9375 6.9375 7.5671 6.9375 8.34375C6.9375 9.1204 7.5671 9.75 8.34375
+    9.75C9.1204 9.75 9.75 9.1204 9.75 8.34375C9.75 7.5671 9.1204 6.9375 8.34375
+    6.9375ZM8.8125 10.6406C9.8823 10.4235 10.6875 9.47764 10.6875
+    8.34375C10.6875 7.04933 9.63817 6 8.34375 6C7.04933 6 6 7.04933 6 8.34375C6
+    9.47764 6.8052 10.4235 7.875 10.6406V11.1562C7.875 11.8999 8.18601 12.4028
+    8.62101 12.7834C8.82767 12.9643 9.06032 13.1164 9.28665 13.2541C9.39277
+    13.3187 9.48974 13.3756 9.5849 13.4316C9.71089 13.5056 9.83369 13.5777
+    9.97031 13.6631C10.4167 13.9421 10.8179 14.2499 11.1146 14.7072C11.3641
+    15.0919 11.5582 15.6119 11.6108 16.3623C10.5481 16.5849 9.75 17.5274 9.75
+    18.6562C9.75 19.9507 10.7993 21 12.0938 21C13.3882 21 14.4375 19.9507
+    14.4375 18.6562C14.4375 17.5274 13.6394 16.5849 12.5766 16.3623C12.6293
+    15.6119 12.8234 15.0919 13.073 14.7072C13.3696 14.2499 13.7709 13.9421
+    14.2172 13.6631C14.3538 13.5777 14.4766 13.5056 14.6026 13.4316C14.6978
+    13.3756 14.7947 13.3187 14.9008 13.2541C15.1272 13.1164 15.3598 12.9643
+    15.5665 12.7834C16.0015 12.4028 16.3125 11.8999 16.3125
+    11.1562V10.6406C17.3823 10.4235 18.1875 9.47764 18.1875 8.34375C18.1875
+    7.04933 17.1382 6 15.8438 6C14.5493 6 13.5 7.04933 13.5 8.34375C13.5
+    9.47764 14.3052 10.4235 15.375 10.6406V11.1562C15.375 11.5845 15.2173
+    11.8433 14.9491 12.0779C14.8042 12.2047 14.6267 12.3235 14.4136
+    12.4532C14.3363 12.5002 14.2463 12.5532 14.1515 12.6091C14.0098 12.6926
+    13.8574 12.7824 13.7203 12.8681C13.2292 13.1751 12.6929 13.5705 12.2864
+    14.1971C12.2176 14.3032 12.1532 14.4147 12.0938 14.5323C12.0343 14.4147
+    11.9699 14.3032 11.9011 14.1971C11.4946 13.5705 10.9583 13.1751 10.4672
+    12.8681C10.3301 12.7824 10.1776 12.6926 10.036 12.6091C9.94121 12.5532
+    9.85123 12.5002 9.77389 12.4532C9.56077 12.3235 9.38326 12.2047 9.23836
+    12.0779C8.97024 11.8433 8.8125 11.5845 8.8125 11.1562V10.6406ZM15.8438
+    9.75C16.6204 9.75 17.25 9.1204 17.25 8.34375C17.25 7.5671 16.6204 6.9375
+    15.8438 6.9375C15.0671 6.9375 14.4375 7.5671 14.4375 8.34375C14.4375 9.1204
+    15.0671 9.75 15.8438 9.75ZM12.0938 17.25C11.3171 17.25 10.6875 17.8796
+    10.6875 18.6562C10.6875 19.4329 11.3171 20.0625 12.0938 20.0625C12.8704
+    20.0625 13.5 19.4329 13.5 18.6562C13.5 17.8796 12.8704 17.25 12.0938
+    17.25Z" />
+  {:else if name === "github"}
+    <path d="M12 4C7.58 4 4 7.67295 4 12.2031C4 15.8282 6.292 18.9023 9.47
+    19.9858C9.87 20.0631 10.0167 19.8095 10.0167 19.5914C10.0167 19.3966 10.01
+    18.8805 10.0067 18.1969C7.78133 18.6918 7.312 17.0963 7.312 17.0963C6.948
+    16.1495 6.422 15.8966 6.422 15.8966C5.69733 15.388 6.478 15.3982 6.478
+    15.3982C7.28133 15.4557 7.70333 16.2432 7.70333 16.2432C8.41667 17.4975
+    9.576 17.1352 10.0333 16.9254C10.1053 16.3949 10.3113 16.0333 10.54
+    15.8282C8.76333 15.6231 6.896 14.9177 6.896 11.7745C6.896 10.879 7.206
+    10.1476 7.71933 9.57334C7.62933 9.36621 7.35933 8.53222 7.78933
+    7.40224C7.78933 7.40224 8.45933 7.18213 9.98933 8.24306C10.6293 8.06054
+    11.3093 7.97031 11.9893 7.96621C12.6693 7.97031 13.3493 8.06054 13.9893
+    8.24306C15.5093 7.18213 16.1793 7.40224 16.1793 7.40224C16.6093 8.53222
+    16.3393 9.36621 16.2593 9.57334C16.7693 10.1476 17.0793 10.879 17.0793
+    11.7745C17.0793 14.9259 15.2093 15.6197 13.4293 15.8214C13.7093 16.0675
+    13.9693 16.5706 13.9693 17.339C13.9693 18.4368 13.9593 19.3186 13.9593
+    19.5852C13.9593 19.8006 14.0993 20.0569 14.5093 19.9749C17.71 18.8989 20
+    15.8227 20 12.2031C20 7.67295 16.418 4 12 4" />
+  {:else if name === "url"}
+    <path d="M18.7566 11.2493L15.7531 14.2518C14.0953 15.9107 11.4059 15.9107
+    9.74803 14.2518C9.48676 13.9916 9.28252 13.6982 9.10313 13.3954L10.4987
+    11.9999C10.565 11.933 10.6469 11.8947 10.7252 11.8496C10.8216 12.1793
+    10.9901 12.4914 11.2493 12.7505C12.0772 13.5789 13.4245 13.5779 14.2518
+    12.7505L17.2543 9.74802C18.0827 8.91963 18.0827 7.57285 17.2543
+    6.74499C16.427 5.91713 15.0802 5.91713 14.2518 6.74499L13.1839
+    7.81391C12.3177 7.47644 11.3841 7.38573 10.4753 7.51894L12.7505
+    5.24373C14.4094 3.58542 17.0977 3.58542 18.7566 5.24373C20.4145 6.90211
+    20.4145 9.591 18.7566 11.2493ZM10.8164 16.1865L9.74803 17.2554C8.92016
+    18.0828 7.57284 18.0828 6.74497 17.2554C5.9171 16.427 5.9171 15.0802
+    6.74497 14.2519L9.74803 11.2493C10.5764 10.421 11.9227 10.421 12.7506
+    11.2493C13.0092 11.508 13.1777 11.8201 13.2752 12.1493C13.354 12.1036
+    13.4349 12.0663 13.5012 12L14.8967 10.605C14.7184 10.3012 14.5131 10.0088
+    14.2518 9.74809C12.594 8.08978 9.90462 8.08978 8.24627 9.74809L5.24374
+    12.7506C3.58542 14.4094 3.58542 17.0978 5.24374 18.7566C6.90207 20.4145
+    9.59097 20.4145 11.2493 18.7566L13.5251 16.4809C12.6158 16.6146 11.6822
+    16.5234 10.8164 16.1865Z"/>
+  {:else if name === "twitter"}
+    <path d="M19.9687 7.54849C19.3697 7.81214 18.7351 7.98617 18.0853
+    8.06498C18.7694 7.65395 19.2816 7.00936 19.5273 6.25025C18.8933 6.62013
+    18.1907 6.88937 17.4427 7.03932C16.9492 6.51179 16.2952 6.1619 15.5824
+    6.04399C14.8696 5.92608 14.1378 6.04675 13.5006 6.38727C12.8635 6.72778
+    12.3566 7.26908 12.0587 7.92711C11.7608 8.58514 11.6886 9.32307 11.8533
+    10.0263C9.12667 9.8977 6.71133 8.58814 5.09333 6.61013C4.7992 7.10984
+    4.64578 7.67979 4.64933 8.25958C4.64933 9.3992 5.22933 10.4009 6.108
+    10.9893C5.58724 10.9728 5.07798 10.832 4.62267 10.5788V10.6188C4.62237
+    11.3761 4.88418 12.1103 5.36367 12.6966C5.84316 13.283 6.51081 13.6854
+    7.25333 13.8357C6.7722 13.9646 6.26828 13.984 5.77867 13.8924C5.98941
+    14.5442 6.39844 15.1139 6.94868 15.5222C7.49891 15.9304 8.1629 16.1567
+    8.848 16.1696C7.68769 17.0799 6.25498 17.574 4.78 17.5725C4.52 17.5725
+    4.26067 17.5571 4 17.5278C5.50381 18.4904 7.25234 19.0013 9.038 19C15.0733
+    19 18.37 14.0043 18.37 9.67978C18.37 9.53982 18.37 9.39987 18.36
+    9.25992C19.004 8.79665 19.5595 8.22147 20 7.56182L19.9687 7.54849Z"/>
+  {:else}
+    {unreachable(name)}
+  {/if}
+</svg>
@@ -129,8 +129,9 @@
  }
  .url {
    display: flex; /* Ensures correct vertical positioning of icons */
-    margin-right: 1rem;
+    margin-right: 0.5rem;
    height: 1.6rem;
+    align-items: center;
  }
  .members {
    margin-top: 2rem;
@@ -199,21 +200,21 @@
          {#if profile.url}
            <a class="url" href={profile.url}>
              <span class="mobile">
-                <Icon name="url" fill inline />
+                <Icon name="url" />
              </span>
-              <span class="desktop">
+              <span class="desktop" style="margin-right: 0.3rem;">
                {profile.url}
              </span>
            </a>
          {/if}
          {#if profile.twitter}
            <a class="url" href="https://twitter.com/{profile.twitter}">
-              <Icon name="twitter" fill inline />
+              <Icon name="twitter" />
            </a>
          {/if}
          {#if profile.github}
            <a class="url" href="https://github.com/{profile.github}">
-              <Icon name="github" fill inline />
+              <Icon name="github" />
            </a>
          {/if}
        </div>
@@ -49,11 +49,7 @@
 </style>

 <div class="selector">
-  <Icon fill
-    name="ellipsis"
-    width={18}
-    height={18}
-  />
+  <Icon name="ellipsis" />
  {#if showReactions}
    <div class="modal">
      {#each config.reactions as reaction}
@@ -9,6 +9,11 @@
 </script>

 <style>
+  .wrapper {
+    display: flex;
+    align-items: center;
+    gap: 0.2rem;
+  }
  .seed-address {
    display: inline-flex;
    font-size: 1rem;
@@ -25,7 +30,7 @@
  }
 </style>

-<div>
+<div class="wrapper">
  <div class="seed-address">
    <span class="seed-icon">{seed.emoji}</span>
    {#if full}
@@ -97,7 +97,7 @@
    <CommitVerifiedBadge {commit} />
    <span class="secondary hash">{formatCommit(commit.header.sha1)}</span>
    <div class="browse" title="View file" on:click|stopPropagation={() => browseCommit(commit.header.sha1)}>
-      <Icon name="browse" width={17} inline fill />
+      <Icon name="browse" />
    </div>
  </div>
 </div>
@@ -38,7 +38,7 @@
  }
  .selector .peer {
    cursor: pointer;
-    padding: 0.5rem 0.75rem;
+    padding: 0.5rem;
    color: var(--color-secondary);
    background-color: var(--color-secondary-background);
    border-radius: var(--border-radius-small);
@@ -60,7 +60,7 @@
    display: flex;
    align-items: center;
    font-family: var(--font-family-monospace);
-    padding: 0.5rem 0.75rem;
+    padding: 0.5rem;
    height: 2.125rem;
    background: var(--color-foreground-background);
  }
@@ -69,7 +69,7 @@
 <Floating>
  <div slot="toggle" class="selector">
    <div class="stat peer" class:not-allowed={!peers}>
-      <Icon name="fork" width={15} height={15} />
+      <Icon name="fork" />
      {#if meta}
        <span class="peer-id">
          {meta.person?.name ?? formatSeedId(meta.id)}
@@ -146,7 +146,9 @@
      {/if}
    </div>
    <div class="browse clickable" on:click|stopPropagation={() => dispatch("browse", file.path)}>
-      <Icon name="browse" title="View file" width={20} inline fill />
+      <span title="View file" style="transform: scale(1.25);">
+        <Icon name="browse" />
+      </span>
    </div>
  </header>
  {#if !collapsed}
@@ -701,3 +701,7 @@ export const lookupAddress = cache.cached(
  (address) => address,
  { max: 1000 }
 );
+
+export const unreachable = (value: never): never => {
+  throw new Error(`Unreachable code: ${value}`);
+};