Support setting an SVG as a hero image (#185)

2 files changed, 18 insertions, 7 deletions

diff --git a/.changeset/silent-feet-think.md b/.changeset/silent-feet-think.md
new file mode 100644
index 00000000..c521c90e
--- /dev/null
+++ b/.changeset/silent-feet-think.md
@@ -0,0 +1,5 @@
+---
+"@astrojs/starlight": patch
+---
+
+Support setting an SVG as the hero image file
diff --git a/packages/starlight/components/Hero.astro b/packages/starlight/components/Hero.astro
index d16a60e2..a4768622 100644
--- a/packages/starlight/components/Hero.astro
+++ b/packages/starlight/components/Hero.astro
@@ -14,18 +14,24 @@ const {
   image,
   actions,
 } = Astro.props.hero;
+
+const imageAttrs = {
+  loading: 'eager' as const,
+  decoding: 'async' as const,
+  width: 400,
+  height: 400,
+  alt: image?.alt,
+};
 ---
 
 <div class="hero">
   {
     image?.file ? (
-      <Image
-        src={image.file}
-        loading="eager"
-        width={400}
-        height={400}
-        alt={image.alt}
-      />
+      image.file.format === 'svg' ? (
+        <img src={image.file.src} {...imageAttrs} />
+      ) : (
+        <Image src={image.file} {...imageAttrs} />
+      )
     ) : (
       image?.html && <div class="hero-html flex" set:html={image.html} />
     )