svg refactor

Author: lucasgoral

public/yaml-icon-dark.svg

@@ -3,12 +3,36 @@ import { useThemeMode } from '../../lib/useThemeMode.ts';
 export const YamlIcon = () => {
   const { isDarkMode } = useThemeMode();
   return (
-    <img
-      className="logo"
-      src={isDarkMode ? '/yaml-icon-dark.svg' : '/yaml-icon-light.svg'}
-      alt="Yaml icon"
-      width={32}
-      height={16}
-    />
+    <svg
+      width="32"
+      height="16"
+      viewBox="0 0 32 16"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        id="label"
+        d="M31.75 6.25C31.6042 6.08333 31.4167 6 31.1875 6H6.8125C6.58333 6 6.38542 6.08333 6.21875 6.25C6.07292 6.39583 6 6.58333 6 6.8125V12.1875C6 12.4167 6.07292 12.6146 6.21875 12.7812C6.38542 12.9271 6.58333 13 6.8125 13H31.1875C31.4167 13 31.6042 12.9271 31.75 12.7812C31.9167 12.6146 32 12.4167 32 12.1875V6.8125C32 6.58333 31.9167 6.39583 31.75 6.25Z"
+        fill={isDarkMode ? '#2F648E' : '#004CA3'}
+      />
+      <path
+        id="icon"
+        d="M11.1875 14.4062C11.4167 14.4062 11.6042 14.4792 11.75 14.625C11.9167 14.7708 12 14.9583 12 15.1875C12 15.4167 11.9167 15.6042 11.75 15.75C11.6042 15.9167 11.4167 16 11.1875 16H0.8125C0.583333 16 0.385417 15.9167 0.21875 15.75C0.0729167 15.6042 0 15.4167 0 15.1875V6C0 5.79167 0.0625 5.61458 0.1875 5.46875L4.65625 0.28125C4.78125 0.09375 4.97917 0 5.25 0H11.1875C11.4167 0 11.6042 0.0833333 11.75 0.25C11.9167 0.395833 12 0.583333 12 0.8125V3.1875C12 3.41667 11.9167 3.61458 11.75 3.78125C11.6042 3.92708 11.4167 4 11.1875 4C10.9583 4 10.7708 3.92708 10.625 3.78125C10.4792 3.61458 10.4062 3.41667 10.4062 3.1875V1.59375H5.625L5 2.34375V4.40625C5 4.84375 4.84375 5.21875 4.53125 5.53125C4.21875 5.84375 3.84375 6 3.40625 6H1.84375L1.59375 6.28125V14.4062H11.1875Z"
+        fill={isDarkMode ? '#4CB1FF' : '#0065d9'}
+      />
+      <path
+        d="M8.88164 10.2399L7 7H8.68816L9.65174 8.94819L10.6457 7H12.3225L10.4332 10.2399V12H8.88164V10.2399Z"
+        fill="white"
+      />
+      <path
+        d="M16.1153 11.0419H14.2678L13.9568 12H12.3938L14.2489 7H16.1608L18.0121 12H16.4264L16.1153 11.0419ZM15.7625 9.9489L15.368 8.72818C15.2795 8.46558 15.22 8.26686 15.1897 8.13201C15.1619 8.25266 15.105 8.45138 15.019 8.72818L14.6244 9.9489H15.7625Z"
+        fill="white"
+      />
+      <path
+        d="M19.3316 7H21.6305L22.2299 9.03336C22.2653 9.15874 22.3058 9.32198 22.3513 9.52307C22.3993 9.72415 22.4385 9.90277 22.4689 10.0589C22.4992 9.90513 22.5384 9.72889 22.5865 9.53016C22.6371 9.33144 22.6813 9.17412 22.7193 9.0582L23.33 7H25.5683V12H24.1305V9.53726C24.1305 9.09013 24.1406 8.69269 24.1608 8.34493C24.0774 8.66903 23.9459 9.12444 23.7663 9.71114L23.0759 12H21.8088L21.1259 9.71114C20.9439 9.12444 20.8136 8.66903 20.7352 8.34493C20.7504 8.78732 20.758 9.18476 20.758 9.53726V12H19.3316V7Z"
+        fill="white"
+      />
+      <path d="M27.2026 7H28.7542V10.7935H31V12H27.2026V7Z" fill="white" />
+    </svg>
   );
 };

public/yaml-icon-light.svg

@@ -15,7 +15,7 @@
   align-items: center;
   justify-content: center;
 
-  img {
+  svg {
     width: 32px;
     transform: translateY(1px);
   }