@cedgetec-utils/astro-components 1.10.0 → 1.11.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cedgetec-utils/astro-components",
-  "version": "1.10.0",
+  "version": "1.11.0",
   "keywords": [
     "astro-component"
   ],

package/src/components/Head.astro

@@ -27,19 +27,32 @@ const ogTitle = slug === "" ? props.siteName : `${props.title}`;
 // Common favicon / PWA icon sizes.
 const faviconSizes = [16, 32, 48, 96, 192, 512];
 
-const buildIcons = (src: string | ImageMetadata) =>
-  Promise.all(
-    faviconSizes.map(async (size) => ({
-      size,
-      image: await getImage({
+type Icon = { type: string; sizes: string; href: string };
+
+const isSvg = (src: string | ImageMetadata) =>
+  typeof src === "string" ? src.endsWith(".svg") : src.format === "svg";
+
+const buildIcons = async (src: string | ImageMetadata): Promise<Icon[]> => {
+  // An SVG favicon scales to any size, so pass it through unchanged rather
+  // than rasterizing it to PNG at every size.
+  if (isSvg(src)) {
+    const image = await getImage({ src, format: "svg" });
+    return [{ type: "image/svg+xml", sizes: "any", href: image.src }];
+  }
+
+  return Promise.all(
+    faviconSizes.map(async (size) => {
+      const image = await getImage({
         src,
         width: size,
         height: size,
         fit: "contain",
         format: "png",
-      }),
-    })),
+      });
+      return { type: "image/png", sizes: `${size}x${size}`, href: image.src };
+    }),
   );
+};
 
 const iconsLight = await buildIcons(props.icons.light);
 const iconsDark = await buildIcons(props.icons.dark);
@@ -59,24 +72,19 @@ const openGraphImage = props.image
 
   {/* Default fallback icons (used when prefers-color-scheme is unsupported) */}
   {
-    iconsDark.map(({ size, image }) => (
-      <link
-        rel="icon"
-        type="image/png"
-        sizes={`${size}x${size}`}
-        href={image.src}
-      />
+    iconsDark.map(({ type, sizes, href }) => (
+      <link rel="icon" type={type} sizes={sizes} href={href} />
     ))
   }
 
   {/* Light-colored icons for dark UI */}
   {
-    iconsLight.map(({ size, image }) => (
+    iconsLight.map(({ type, sizes, href }) => (
       <link
         rel="icon"
-        type="image/png"
-        sizes={`${size}x${size}`}
-        href={image.src}
+        type={type}
+        sizes={sizes}
+        href={href}
         media="(prefers-color-scheme:dark)"
       />
     ))
@@ -84,12 +92,12 @@ const openGraphImage = props.image
 
   {/* Dark-colored icons for light UI */}
   {
-    iconsDark.map(({ size, image }) => (
+    iconsDark.map(({ type, sizes, href }) => (
       <link
         rel="icon"
-        type="image/png"
-        sizes={`${size}x${size}`}
-        href={image.src}
+        type={type}
+        sizes={sizes}
+        href={href}
         media="(prefers-color-scheme:light)"
       />
     ))