feat: replace svg image with png format.

Author: anyulled

src/components/aboutus.astro

@@ -1,10 +1,21 @@
 ---
 import {Icon} from "astro-icon/components";
 import ContentSection from "~/components/content-section.astro";
+import {Image} from "astro:assets";
+import logoImage from "~/assets/logo_small.png";
+const widths = [450, 800];
+const sizes = "(min-width: 640px) 42vw, 67vw";
 ---
 
 <ContentSection title="About Us" id="aboutus">
-    <Icon slot="eyebrow" name="logo_small" class="size-32"/>
+    <Image slot="eyebrow"
+           class="size-32"
+           src={logoImage}
+           widths={widths}
+           sizes={sizes}
+           loading="eager"
+           alt="Barcelona Java User Group Logo"
+    />
     <Fragment slot="lead">
         <p>We're a group of geeks from the condal city who want to share
             experiences and knowledge related to the IT world and this

src/components/contribute.astro

@@ -1,10 +1,21 @@
 ---
 import { Icon } from "astro-icon/components";
 import ContentSection from "~/components/content-section.astro";
+import {Image} from "astro:assets";
+import logoImage from "~/assets/logo_small.png";
+const widths = [450, 800];
+const sizes = "(min-width: 640px) 42vw, 67vw";
 ---
 
 <ContentSection title="Contribute" id="contribute">
-  <Icon slot="eyebrow" name="logo_small" class="size-32" />
+  <Image slot="eyebrow"
+         class="size-32"
+         src={logoImage}
+         widths={widths}
+         sizes={sizes}
+         loading="eager"
+         alt="Barcelona Java User Group Logo"
+  />
   <Fragment slot="lead">
     We're open to contributions from <span class="text-primary">anyone</span>
     Either if you have a <span class="text-primary">meetup</span> idea, or if

src/components/header.astro

@@ -1,5 +1,7 @@
 ---
 import { Icon } from "astro-icon/components";
+import {Image} from "astro:assets";
+import logoImage from "~/assets/logo_small.png";
 import ThemeSwitcher from "~/components/theme-switcher.astro";
 import type { NavItem } from "~/types";
 
@@ -8,6 +10,8 @@ const navItems: Array<NavItem> = [
   { title: "Community", url: "#community" },
   { title: "Contribute", url: "#contribute" },
 ];
+const sizes = "(min-width: 640px) 42vw, 67vw";
+const widths = [450, 800];
 ---
 
 <header
@@ -57,7 +61,14 @@ const navItems: Array<NavItem> = [
             </button>
           </header>
           <div class="flex justify-center">
-            <Icon name="logo_small" class="size-16" />
+            <Image
+                class="size-16"
+                src={logoImage}
+                widths={widths}
+                sizes={sizes}
+                loading="eager"
+                alt="Barcelona Java User Group Logo"
+            />
           </div>
           <nav>
             <ul class="flex flex-col">