dnscms, web: try supporting svgs

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

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} />;
 }