Adds icons to docker stats

src/lib/DockerStats.svelte

@@ -1,6 +1,7 @@
 
 <script lang="ts">
   import type { DockerHubResponse } from '$src/Types';
+  import Icon from '$lib/Icon.svelte';
 
   export let info: DockerHubResponse;
 
@@ -44,12 +45,12 @@
 
   const makeRenderData = () => {
     const results = [
-      { label: 'Pulls', value: formatBigNumber(info.pull_count) },
+      { label: 'Pulls', value: formatBigNumber(info.pull_count), icon: 'download' },
-      { label: 'Stars', value: formatBigNumber(info.star_count) },
+      { label: 'Stars', value: formatBigNumber(info.star_count), icon: 'star' },
-      { label: 'User', value: info.hub_user },
+      { label: 'User', value: info.hub_user, icon: 'user' },
-      { label: 'Created', value: formatDate(info.date_registered) },
+      { label: 'Created', value: formatDate(info.date_registered), icon: 'published' },
-      { label: 'Updated', value: timeAgo(info.last_updated) },
+      { label: 'Updated', value: timeAgo(info.last_updated), icon: 'updated' },
-      { label: 'Status', value: info.status_description }
+      { label: 'Status', value: info.status_description, icon: 'status' }
     ];
     return results;
   };
@@ -58,7 +59,10 @@
 <div class="stats">
   {#each makeRenderData() as stat}
     <div class="row">
-      <span class="lbl">{stat.label}: </span>
+      <span class="lbl">
+        <Icon name={stat.icon} color="var(--accent)" />
+        {stat.label}:
+      </span>
       <span>{stat.value}</span>
     </div>
   {/each}
@@ -72,6 +76,10 @@
     .lbl {
       font-weight: 500;
       margin-right: 0.5rem;
+      display: inline-flex;
+      align-items: center;
+      gap: 0.5rem;
+      :global(svg) { opacity: 0.7; }
     }
   }
 </style>

src/lib/Icon.svelte

@@ -16,6 +16,13 @@
     'linux',
     'windows',
     'unknown',
+    'user',
+    'status',
+    'updated',
+    'published',
+    'star',
+    'download',
+    'whale'
   ] as const;
 
   interface Icon {
@@ -65,6 +72,41 @@
       name: 'unknown',
       svg: '<path d="M64 32C28.7 32 0 60.7 0 96V416c0 35.3 28.7 64 64 64H384c35.3 0 64-28.7 64-64V96c0-35.3-28.7-64-64-64H64zm73.8 133.3c7.9-22.3 29.1-37.3 52.8-37.3h58.3c34.9 0 63.1 28.3 63.1 63.1c0 22.6-12.1 43.5-31.7 54.8L248 264.4c-.2 13-10.9 23.6-24 23.6c-13.3 0-24-10.7-24-24V250.5c0-8.6 4.6-16.5 12.1-20.8l44.3-25.4c4.7-2.7 7.6-7.7 7.6-13.1c0-8.4-6.8-15.1-15.1-15.1H190.6c-3.4 0-6.4 2.1-7.5 5.3l-.4 1.2c-4.4 12.5-18.2 19-30.6 14.6s-19-18.2-14.6-30.6l.4-1.2zM192 352a32 32 0 1 1 64 0 32 32 0 1 1 -64 0z"/>',
     },
+    {
+      box: 500,
+      name: 'user',
+      svg: '<path d="M224 256A128 128 0 1 0 224 0a128 128 0 1 0 0 256zm-45.7 48C79.8 304 0 383.8 0 482.3C0 498.7 13.3 512 29.7 512H418.3c16.4 0 29.7-13.3 29.7-29.7C448 383.8 368.2 304 269.7 304H178.3z"/>',
+    },
+    {
+      box: 500,
+      name: 'status',
+      svg: '<path d="M269.4 2.9C265.2 1 260.7 0 256 0s-9.2 1-13.4 2.9L54.3 82.8c-22 9.3-38.4 31-38.3 57.2c.5 99.2 41.3 280.7 213.6 363.2c16.7 8 36.1 8 52.8 0C454.7 420.7 495.5 239.2 496 140c.1-26.2-16.3-47.9-38.3-57.2L269.4 2.9zM369 209L241 337c-9.4 9.4-24.6 9.4-33.9 0l-64-64c-9.4-9.4-9.4-24.6 0-33.9s24.6-9.4 33.9 0l47 47L335 175c9.4-9.4 24.6-9.4 33.9 0s9.4 24.6 0 33.9z"/>',
+    },
+    {
+      box: 500,
+      name: 'updated',
+      svg: '<path d="M67.2 83.2L0 16V192H176l-63.5-63.5C147.7 88.9 198.9 64 256 64c106 0 192 86 192 192s-86 192-192 192c-40.8 0-78.6-12.7-109.7-34.4l-36.6 52.5C151.2 495 201.7 512 256 512c141.4 0 256-114.6 256-256S397.4 0 256 0C181.2 0 113.9 32.1 67.2 83.2zM280 128H232v24V256v9.9l7 7 64 64 17 17L353.9 320l-17-17-57-57V152 128z"/>',
+    },
+    {
+      box: 500,
+      name: 'published',
+      svg: '<path d="M96 32V64H48C21.5 64 0 85.5 0 112v48H448V112c0-26.5-21.5-48-48-48H352V32c0-17.7-14.3-32-32-32s-32 14.3-32 32V64H160V32c0-17.7-14.3-32-32-32S96 14.3 96 32zM448 192H0V464c0 26.5 21.5 48 48 48H400c26.5 0 48-21.5 48-48V192z"/>',
+    },
+    {
+      box: 560,
+      name: 'star',
+      svg: '<path d="M316.9 18C311.6 7 300.4 0 288.1 0s-23.4 7-28.8 18L195 150.3 51.4 171.5c-12 1.8-22 10.2-25.7 21.7s-.7 24.2 7.9 32.7L137.8 329 113.2 474.7c-2 12 3 24.2 12.9 31.3s23 8 33.8 2.3l128.3-68.5 128.3 68.5c10.8 5.7 23.9 4.9 33.8-2.3s14.9-19.3 12.9-31.3L438.5 329 542.7 225.9c8.6-8.5 11.7-21.2 7.9-32.7s-13.7-19.9-25.7-21.7L381.2 150.3 316.9 18z"/>',
+    },
+    {
+      box: 500,
+      name: 'download',
+      svg: '<path d="M288 32c0-17.7-14.3-32-32-32s-32 14.3-32 32V274.7l-73.4-73.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l128 128c12.5 12.5 32.8 12.5 45.3 0l128-128c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L288 274.7V32zM64 352c-35.3 0-64 28.7-64 64v32c0 35.3 28.7 64 64 64H448c35.3 0 64-28.7 64-64V416c0-35.3-28.7-64-64-64H346.5l-45.3 45.3c-25 25-65.5 25-90.5 0L165.5 352H64zm368 56a24 24 0 1 1 0 48 24 24 0 1 1 0-48z"/>',
+    },
+    {
+      box: 640,
+      name: 'whale',
+      svg: '<path d="M175.8 13.4c-1-5.9-5.2-10.8-10.9-12.6s-12-.3-16.2 3.9L108 45.4C89.7 63.7 81.4 89.6 85.6 115.1l7.9 47.4L43.6 212.4C15.7 240.3 0 278.2 0 317.6C0 407.3 72.7 480 162.4 480H544c53 0 96-43 96-96V272.1C640 192.5 575.5 128 495.9 128c-82.5 0-162.4 29.5-225 83.2L156.4 309.4c-8 6.8-18.1 10.6-28.6 10.6h-1.1c-18.3 0-34.5-11.7-40.3-29c-4-12-2.4-25.2 4.3-35.9l37.6-60.1 44.7 7.5c25.5 4.2 51.5-4.1 69.7-22.3l40.7-40.7c4.2-4.2 5.8-10.5 3.9-16.2s-6.7-9.9-12.6-10.9L189.9 98.1 175.8 13.4zM400 280a24 24 0 1 1 0 48 24 24 0 1 1 0-48z"/>',
+    },
   ];
   let displayIcon = icons.find((e) => e.name === name);
 </script>