From 10c8ce194c52d365ed73314833d2b6131cd3127b Mon Sep 17 00:00:00 2001
From: Jonas Braathen <jonas@ponas.no>
Date: Tue, 19 May 2026 06:15:36 +0200
Subject: [PATCH] dnscms, web: try supporting svgs

---
 dnscms/dnscms/settings/base.py       |  1 +
 web/src/components/general/Image.tsx | 29 ++++++++++++++++++++++++----
 2 files changed, 26 insertions(+), 4 deletions(-)

diff --git a/dnscms/dnscms/settings/base.py b/dnscms/dnscms/settings/base.py
index 769bfa8..228a607 100644
--- a/dnscms/dnscms/settings/base.py
+++ b/dnscms/dnscms/settings/base.py
@@ -174,6 +174,7 @@ WAGTAIL_SITE_NAME = "dnscms"
 WAGTAIL_ALLOW_UNICODE_SLUGS = False
 
 WAGTAILIMAGES_IMAGE_MODEL = "images.CustomImage"
+WAGTAILIMAGES_EXTENSIONS = ["avif", "gif", "jpg", "jpeg", "png", "webp", "svg"]
 
 # Search
 # https://docs.wagtail.org/en/stable/topics/search/backends.html
diff --git a/web/src/components/general/Image.tsx b/web/src/components/general/Image.tsx
index 13a2925..6c44408 100644
--- a/web/src/components/general/Image.tsx
+++ b/web/src/components/general/Image.tsx
@@ -1,4 +1,4 @@
-import NextImage, { ImageProps as NextImageProps } from "next/image";
+import NextImage, { type ImageProps as NextImageProps } from "next/image";
 import styles from "./image.module.scss";
 
 type ImageProps = NextImageProps & {
@@ -7,14 +7,35 @@ type ImageProps = NextImageProps & {
   imageFormat?: string | null; // "original" | "bleed" | "fullWidth"
 };
 
+function isSvgSrc(src: NextImageProps["src"]): src is string {
+  return typeof src === "string" && /\.svg(\?|#|$)/i.test(src);
+}
+
+function MaybeNextImage(props: NextImageProps) {
+  if (isSvgSrc(props.src)) {
+    const { src, alt, width, height, className, style } = props;
+    return (
+      <img // eslint-disable-line @next/next/no-img-element
+        src={src}
+        alt={alt}
+        width={width}
+        height={height}
+        className={className}
+        style={style}
+      />
+    );
+  }
+  return <NextImage {...props} />;
+}
+
 export function ImageFigure(props: ImageProps) {
-  const { attribution, caption, imageFormat, ...nextImageProps } = props;
+  const { attribution, caption, imageFormat, ...imageProps } = props;
   return (
     <figure
       className={`${styles.image} ${imageFormat ? styles[imageFormat] : ""}`}
     >
       <div className={styles.imageWrapper}>
-        <NextImage {...nextImageProps} />
+        <MaybeNextImage {...imageProps} />
         {attribution && <div className={styles.attribution}>{attribution}</div>}
       </div>
       {caption && <figcaption>{caption}</figcaption>}
@@ -23,5 +44,5 @@ export function ImageFigure(props: ImageProps) {
 }
 
 export function Image(props: NextImageProps) {
-  return <NextImage {...props} />;
+  return <MaybeNextImage {...props} />;
 }