@cedgetec-utils/astro-components 1.10.0 → 1.12.0

package/package.json

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

package/src/components/Head.astro

@@ -25,21 +25,46 @@ const title =
 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({
-        src,
-        width: size,
-        height: size,
-        fit: "contain",
-        format: "png",
+const faviconSizes = [32, 48, 96, 192, 512];
+
+type Icon = { type: string; sizes: string; href: string };
+
+const isSvg = (src: string | ImageMetadata) =>
+  typeof src === "string" ? src.endsWith(".svg") : src.format === "svg";
+
+const buildSvgIcon = async (src: string | ImageMetadata): Promise<Icon[]> => {
+  const image = await getImage({ src, format: "svg", quality: "max" });
+  return [{ type: "image/svg+xml", sizes: "any", href: image.src }];
+};
+
+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)) {
+    return buildSvgIcon(src);
+  }
+
+  try {
+    return await Promise.all(
+      faviconSizes.map(async (size) => {
+        const image = await getImage({
+          src,
+          width: size,
+          height: size,
+          fit: "contain",
+          format: "png",
+          quality: "max",
+        });
+        return { type: "image/png", sizes: `${size}x${size}`, href: image.src };
       }),
-    })),
-  );
+    );
+  } catch {
+    // `isSvg` only detects SVGs by their `.svg` extension, so a string URL
+    // that points to an SVG without one slips through and fails to
+    // rasterize. Fall back to treating it as an SVG.
+    return buildSvgIcon(src);
+  }
+};
 
 const iconsLight = await buildIcons(props.icons.light);
 const iconsDark = await buildIcons(props.icons.dark);
@@ -59,24 +84,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 +104,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)"
       />
     ))
@@ -115,4 +135,4 @@ const openGraphImage = props.image
   {props.type && <meta property="og:type" content={props.type} />}
   {openGraphImage && <meta property="og:image" content={openGraphImage.src} />}
   <slot />
-</head>
+</head>