Icons via avif

app/components/Image.tsx

@@ -0,0 +1,32 @@
+export function Image({
+  path,
+  alt,
+  className,
+  width,
+  height,
+}: {
+  path: string;
+  alt: string;
+  className: string;
+  width?: number;
+  height?: number;
+}) {
+  return (
+    <picture>
+      <source
+        type="image/avif"
+        srcSet={`${path}.avif`}
+        className={className}
+        width={width}
+        height={height}
+      />
+      <img
+        alt={alt}
+        src={`${path}.png`}
+        className={className}
+        width={width}
+        height={height}
+      />
+    </picture>
+  );
+}

app/components/layout/Menu.tsx

@@ -1,6 +1,7 @@
 import clsx from "clsx";
 import { Link } from "@remix-run/react";
 import navItems from "./nav-items.json";
+import { Image } from "../Image";
 
 // xxx: overflows but maybe on chrome mobile emulator only?
 export function Menu({
@@ -25,9 +26,9 @@ export function Menu({
             data-cy={`menu-link-${navItem.name}`}
             tabIndex={!expanded ? -1 : undefined}
           >
-            <img
+            <Image
               className="layout__menu__link__icon"
-              src={`/img/layout/${navItem.name.replace(" ", "")}.webp`}
+              path={`/img/layout/${navItem.name.replace(" ", "")}`}
               alt={navItem.name}
             />
             <div>{navItem.displayName ?? navItem.name}</div>

app/components/layout/index.tsx

@@ -4,6 +4,7 @@ import { Menu } from "./Menu";
 import { UserItem } from "./UserItem";
 import navItems from "./nav-items.json";
 import { useLocation } from "@remix-run/react";
+import { Image } from "../Image";
 
 export const Layout = React.memo(function Layout({
   children,
@@ -22,13 +23,11 @@ export const Layout = React.memo(function Layout({
       <header className="layout__header">
         {currentPagesNavItem ? (
           <h1 className="layout__page-heading">
-            <img
+            <Image
               className="layout__icon"
-              // xxx: from constant... but this will be a component anyway?
-              // xxx: change to avif
-              src={`/img/layout/${currentPagesNavItem.name}.webp`}
-              width="40"
-              height="40"
+              path={`/img/layout/${currentPagesNavItem.name}`}
+              width={40}
+              height={40}
               alt=""
             />
             {currentPagesNavItem.displayName}