From e284a0fcbdec01832cde78ff6b72e8b149eb1822 Mon Sep 17 00:00:00 2001
From: Philippe Serhal <philippe.serhal@gmail.com>
Date: Sun, 23 Aug 2026 19:35:43 -0400
Subject: [PATCH] refactor: extract app logo to self-contained .svg

---
 src/App.svelte             |  6 ++++--
 src/SharedReport.svelte    |  6 ++++--
 src/components/Logo.svelte | 31 -------------------------------
 src/components/logo.svg    | 29 +++++++++++++++++++++++++++++
 4 files changed, 37 insertions(+), 35 deletions(-)
 delete mode 100644 src/components/Logo.svelte
 create mode 100644 src/components/logo.svg

diff --git a/src/App.svelte b/src/App.svelte
index 141a9fe..c293694 100644
--- a/src/App.svelte
+++ b/src/App.svelte
@@ -10,7 +10,7 @@
   import TagInput from "./components/TagInput.svelte";
   import ThemeToggle from "./components/ThemeToggle.svelte";
   import TrustGlossary from "./components/TrustGlossary.svelte";
-  import Logo from "./components/Logo.svelte";
+  import logo from "./components/logo.svg";
   import UserPublishView from "./components/UserPublishView.svelte";
   import {
     DEFAULT_BOT_EXCLUSIONS,
@@ -322,7 +322,9 @@
   <header class="masthead">
     <div class="masthead__top">
       <h1 class="wordmark">
-        <a href="/#" aria-label="npm.report"><span>npm</span><Logo /><span>report</span></a>
+        <a href="/#" aria-label="npm.report"
+          ><span>npm</span><img class="logo" src={logo} alt="" /><span>report</span></a
+        >
       </h1>
       <div class="masthead__controls">
         <ThemeToggle />
diff --git a/src/SharedReport.svelte b/src/SharedReport.svelte
index 059f2d0..c28e514 100644
--- a/src/SharedReport.svelte
+++ b/src/SharedReport.svelte
@@ -7,7 +7,7 @@
   import SiteFooter from "./components/SiteFooter.svelte";
   import ThemeToggle from "./components/ThemeToggle.svelte";
   import TrustGlossary from "./components/TrustGlossary.svelte";
-  import Logo from "./components/Logo.svelte";
+  import logo from "./components/logo.svg";
   import { formatDate, formatDateTime } from "#client/dateFormatting";
   import type { ReportHistoryResponse } from "#shared/reportHistory";
   import { parseOrNull, ReportHistoryResponseSchema, ReportRecordSchema } from "#shared/schemas";
@@ -147,7 +147,9 @@
   <header class="masthead">
     <div class="masthead__top">
       <h1 class="wordmark">
-        <a href="/#" aria-label="npm.report"><span>npm</span><Logo /><span>report</span></a>
+        <a href="/#" aria-label="npm.report"
+          ><span>npm</span><img class="logo" src={logo} alt="" /><span>report</span></a
+        >
       </h1>
       <div class="masthead__controls">
         <ThemeToggle />
diff --git a/src/components/Logo.svelte b/src/components/Logo.svelte
deleted file mode 100644
index bbd02cb..0000000
--- a/src/components/Logo.svelte
+++ /dev/null
@@ -1,31 +0,0 @@
-<script lang="ts">
-  // The npm.report mark: a trust "signal" radiating from a gold source, its three
-  // waves in the tier colors (inner staged → outer provenance). Uses the app's
-  // theme tokens so it adapts to light/dark. The favicon (public/favicon.svg) is
-  // the tiled, fixed-color twin for browser tabs.
-</script>
-
-<svg class="logo" width="28" height="28" viewBox="5 5 22 22" aria-hidden="true">
-  <path
-    d="M10 8 A14 14 0 0 1 24 22"
-    fill="none"
-    stroke="var(--t-provenance)"
-    stroke-width="2.2"
-    stroke-linecap="round"
-  />
-  <path
-    d="M10 12 A10 10 0 0 1 20 22"
-    fill="none"
-    stroke="var(--t-trusted)"
-    stroke-width="2.2"
-    stroke-linecap="round"
-  />
-  <path
-    d="M10 16 A6 6 0 0 1 16 22"
-    fill="none"
-    stroke="var(--t-staged)"
-    stroke-width="2.2"
-    stroke-linecap="round"
-  />
-  <circle cx="10" cy="22" r="2.8" fill="var(--gold)" />
-</svg>
diff --git a/src/components/logo.svg b/src/components/logo.svg
new file mode 100644
index 0000000..4343141
--- /dev/null
+++ b/src/components/logo.svg
@@ -0,0 +1,29 @@
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  width="28"
+  height="28"
+  viewBox="5 5 22 22"
+>
+  <path
+    d="M10 8 A14 14 0 0 1 24 22"
+    fill="none"
+    stroke="#5fb3b3"
+    stroke-width="2.2"
+    stroke-linecap="round"
+  />
+  <path
+    d="M10 12 A10 10 0 0 1 20 22"
+    fill="none"
+    stroke="#8fbf7f"
+    stroke-width="2.2"
+    stroke-linecap="round"
+  />
+  <path
+    d="M10 16 A6 6 0 0 1 16 22"
+    fill="none"
+    stroke="#c9a0dc"
+    stroke-width="2.2"
+    stroke-linecap="round"
+  />
+  <circle cx="10" cy="22" r="2.8" fill="#d8a657" />
+</svg>
-- 
2.51.2