Inline tauri logo on the main page (#3477)

Author: Legend-Master

src/assets/logo.svg

@@ -1,6 +1,8 @@
 ---
 import { LinkButton } from '@astrojs/starlight/components';
-import { Image } from 'astro:assets';
+import LogoLight from '@assets/logo_light.svg';
+import LogoDark from '@assets/logo.svg';
+import LogoOutline from '@assets/logo-outline.svg';
 
 const { tagline, getStarted, v1Docs } = Astro.props;
 ---
@@ -14,8 +16,8 @@ const { tagline, getStarted, v1Docs } = Astro.props;
 <div class="lp-content">
   <div class="lp-header lp-hero">
     <div class="lp-header-content">
-      <Image class="lp-tauri-logo light" src={import('@assets/logo_light.svg')} alt="Tauri Logo" />
-      <Image class="lp-tauri-logo dark" src={import('@assets/logo.svg')} alt="Tauri Logo" />
+      <LogoLight class="lp-tauri-logo light" />
+      <LogoDark class="lp-tauri-logo dark" />
       <p class="lp-tagline">
         {tagline}
       </p>
@@ -26,6 +28,6 @@ const { tagline, getStarted, v1Docs } = Astro.props;
         </LinkButton>
       </div>
     </div>
-    <Image src={import('@assets/logo-outline.svg')} alt="Tauri outline logo" />
+    <LogoOutline />
   </div>
 </div>

src/assets/logo_light.svg

@@ -31,7 +31,7 @@
   justify-content: center;
 }
 
-.lp-header > img {
+.lp-header > svg {
   order: -1;
 }
 
@@ -49,7 +49,7 @@
     margin-inline-start: 0;
   }
 
-  .lp-header > img {
+  .lp-header > svg {
     order: 1;
   }
 }
@@ -70,7 +70,7 @@
   margin-bottom: 1rem;
 }
 
-.lp-hero > img {
+.lp-hero > svg {
   animation: 3s intro;
   animation-fill-mode: forwards;
   transition: opacity 1s ease-in-out;
@@ -80,7 +80,7 @@
 }
 
 @media (min-width: 50rem) {
-  .lp-hero > img {
+  .lp-hero > svg {
     opacity: 0.5;
     width: 400px;
     height: 400px;
@@ -103,7 +103,7 @@
   }
 }
 
-:root[data-theme='light'] .lp-hero > img {
+:root[data-theme='light'] .lp-hero > svg {
   filter: invert(1);
 }