chore: adds logo

Author: justin-schroeder

packages/docs/components/Logo.vue

@@ -1,12 +1,33 @@
 <template>
   <span :class="['text-accent flex items-center', sizeClasses.container]">
-    <span
-      :class="[
-        'inline-flex items-center justify-center bg-accent text-white rounded-full leading-none tracking-tighter',
-        sizeClasses.icon,
-      ]"
-      >{&hellip;}</span
+    <svg
+      :class="['inline-flex', sizeClasses.icon]"
+      viewBox="0 0 100 100"
+      xmlns="http://www.w3.org/2000/svg"
     >
+      <!-- Background circle -->
+      <circle
+        cx="50"
+        cy="50"
+        r="45"
+        fill="currentColor"
+        class="text-accent"
+      />
+      
+      <!-- JSON-like syntax -->
+      <text
+        x="50"
+        y="50"
+        text-anchor="middle"
+        dominant-baseline="middle"
+        fill="white"
+        :font-size="sizeClasses.fontSize"
+        font-family="monospace"
+        font-weight="bold"
+      >
+        {&hellip;}
+      </text>
+    </svg>
     <span :class="sizeClasses.text">jsonreader</span>
   </span>
 </template>
@@ -26,20 +47,23 @@ const sizeClasses = computed(() => {
     case "small":
       return {
         container: "text-xl",
-        icon: "w-8 h-8 mr-2 text-xs",
+        icon: "w-8 h-8 mr-2",
+        fontSize: "24",
         text: "font-semibold",
       }
     case "medium":
       return {
         container: "text-2xl",
-        icon: "w-10 h-10 mr-2.5 text-xl",
+        icon: "w-10 h-10 mr-2.5",
+        fontSize: "32",
         text: "font-bold",
       }
     case "large":
     default:
       return {
         container: "text-3xl md:text-4xl",
-        icon: "w-16 h-16 md:w-20 md:h-20 mr-3 md:mr-4 text-2xl md:text-3xl",
+        icon: "w-16 h-16 md:w-20 md:h-20 mr-3 md:mr-4",
+        fontSize: "48",
         text: "font-bold",
       }
   }