perf: separate svg logos with img tag

Author: aster-void

src/icons/menu.svg public/icons/menu.svgsrc/icons/menu.svg renamed to public/icons/menu.svg

@@ -6,30 +6,10 @@ interface Props {
 const props = Astro.props;
 ---
 
-<svg
+<img
   aria-labelledby="ut.code();"
   class={props.class}
-  viewBox="0 0 3957 827"
-  fill-rule="evenodd"
-  stroke-linejoin="round"
-  stroke-miterlimit="2"
->
-  <title>ut.code();</title>
-  {
-    props.variant === "default" && (
-      <path d="M99 83v292h67v416h441V83H99Z" fill="#ffffff" />
-    )
-  }
-  <path
-    d="M641 775c0 23-20 43-43 43H164c-24 0-43-20-43-43V464c0-24-19-43-43-43H52c-24 0-43-19-43-43V52A43 43 0 0 1 52 9h546a43 43 0 0 1 43 43v723Zm-175-25 97-1c7 0 13-5 13-12v-22c0-6-6-13-13-13h-24v-6h24c10 0 19 9 19 19v21c0 11-9 20-19 20h-97l17 11-4 5-25-17-1-2c-1-1 0-2 1-3l25-17 4 5-17 12Zm57-114a103 103 0 0 1-48 12c-28 0-50-10-65-30-16-20-24-48-24-84 0-35 8-63 24-83 15-20 37-30 65-30a102 102 0 0 1 48 12v30c-7-6-15-10-23-13-8-4-17-5-25-5-19 0-34 7-43 22-10 15-15 37-15 67s5 53 15 68c9 14 24 22 43 22a80 80 0 0 0 48-18v30Zm-303-47h51v59h-51v-59Zm-94-342V112h30v149l1 22c0 5 1 8 3 11 3 6 7 10 13 13s17 4 26 4c8 0 19-1 25-4s11-7 14-13l3-11 1-22V112h29v135c0 22-1 38-4 48-3 9-7 17-14 23s-14 10-22 13c-9 3-22 4-32 4-11 0-24-1-32-4-9-3-16-7-22-13-7-6-12-14-15-23-3-10-4-26-4-48Zm240-135h167v25h-68v194h-30V137h-69v-25Z"
-    fill={props.variant === "default" ? "#303030" : "#ffffff"}></path>
-  <path
-    d="M850 493V301h51v192c0 28 5 48 15 61s25 20 46 20c24 0 42-9 55-25 12-17 19-42 19-73V301h51v309h-51v-46a96 96 0 0 1-92 54c-32 0-55-10-71-31-15-21-23-52-23-94Zm443-281v88h116v40h-116v168c0 23 4 39 13 48s24 13 45 13h58v41h-63c-38 0-65-8-80-23-16-15-24-42-24-79V340h-83v-40h83v-88h51Zm265 286h97v112h-97z"
-    fill={props.variant === "default" ? "#676767" : "#ffffff"}></path>
-  <path
-    d="M2071 594a177 177 0 0 1-87 24c-48 0-85-14-112-43s-41-69-41-120c0-50 14-90 41-119s64-43 112-43a165 165 0 0 1 87 24v53a125 125 0 0 0-87-34c-32 0-56 10-74 31-17 21-25 50-25 88 0 39 8 68 26 89 17 21 41 31 73 31 18 0 34-3 48-8 14-6 27-14 39-25v52Zm203-258c-25 0-45 10-58 30s-20 50-20 89c0 40 7 70 20 90s33 30 58 30c27 0 46-10 59-30 14-20 20-50 20-90 0-39-6-69-20-89a66 66 0 0 0-59-30Zm0-43c43 0 76 14 99 42 23 27 34 68 34 120 0 53-11 94-34 122-22 27-55 41-99 41-42 0-75-14-98-41-23-28-34-69-34-122 0-52 11-93 34-120 23-28 56-42 98-42Zm394 47V180h51v430h-51v-39a88 88 0 0 1-82 47c-38 0-67-14-89-43-21-29-32-70-32-121 0-50 11-90 32-118 22-29 51-43 89-43a86 86 0 0 1 82 47Zm-149 115c0 40 6 70 19 90 12 20 31 30 55 30 25 0 43-10 56-30 13-21 19-50 19-90 0-39-6-69-19-89a62 62 0 0 0-56-30c-24 0-43 10-55 30-13 20-19 50-19 89Zm549-25v25h-221v1c-1 43 7 73 25 91 17 19 42 28 74 28 16 0 33-3 51-8s37-13 57-23v50a344 344 0 0 1-108 24c-48 0-86-14-113-43s-41-69-41-120c0-49 13-88 40-118 26-29 62-44 106-44 40 0 71 13 94 40 22 27 34 59 36 97Zm-51-15c-2-22-10-40-23-56-14-15-33-23-58-23s-45 8-61 24a86 86 0 0 0-26 55h168Z"
-    fill="#00d372"></path>
-  <path
-    d="M3322 152c-25 43-43 84-55 126a453 453 0 0 0 0 253c12 42 30 84 55 126h-45c-28-44-48-86-62-128a397 397 0 0 1 0-249c14-41 34-84 62-128h45Zm186 0h45c27 44 48 87 62 128a397 397 0 0 1 0 249c-14 42-35 85-62 128h-45c25-43 43-85 55-127a451 451 0 0 0 0-251c-12-42-30-84-55-127Zm353 358h87v74l-55 105h-59l27-105v-74Zm-3-209h86v99h-86v-99Z"
-    fill={props.variant === "default" ? "#676767" : "#ffffff"}></path>
-</svg>
+  src={props.variant === "default"
+    ? "/utcode-logo/normal.svg"
+    : "/utcode-logo/light.svg"}
+/>

public/utcode-logo/light.svg

@@ -8,24 +8,7 @@
 <Popover.Root>
   <Popover.Trigger class="h-16 w-16 hover:bg-gray-100 lg:hidden">
     <div class="mx-auto my-auto h-6 w-6 text-gray-600">
-      <svg
-        xmlns="http://www.w3.org/2000/svg"
-        width="24"
-        height="24"
-        viewBox="0 0 24 24"
-        fill="none"
-        stroke="currentColor"
-        stroke-width="2"
-        stroke-linecap="round"
-        stroke-linejoin="round"
-        class="feather feather-menu"
-        ><line x1="3" y1="12" x2="21" y2="12"></line><line
-          x1="3"
-          y1="6"
-          x2="21"
-          y2="6"
-        ></line><line x1="3" y1="18" x2="21" y2="18"></line></svg
-      >
+      <img src="/icons/menu.svg" alt="open menu" />
     </div>
   </Popover.Trigger>