fixed svg favicons when the input size is smaller than output

Author: oscarotero

CHANGELOG.md

@@ -26,6 +26,7 @@ Go to the `v1` branch to see the changelog of Lume 1.
 ### Fixed
 - Ensure console output for validate_html and seo plugins is shown after the build process.
 - Ensure `metas` plugin is registered after `og_images`.
+- `favicon` plugin: scale the SVG icons before render to PNG.
 - `run` command.
 - Added missing tests for SEO plugin.
 - Renamed `Config` interface of `seo` and `validate_html` plugins to `Options`.

deps/resvg.ts

@@ -1,11 +1,19 @@
-import { initWasm, Resvg } from "npm:@resvg/[email protected]";
+import {
+  initWasm,
+  Resvg,
+  type ResvgRenderOptions,
+} from "npm:@resvg/[email protected]";
+export type { ResvgRenderOptions };
 
 const url =
   "https://cdn.jsdelivr.net/npm/@resvg/[email protected]/index_bg.wasm";
 await initWasm(url);
 
-export function toPng(svg: string): Uint8Array {
-  const resvg = new Resvg(svg, { fitTo: { mode: "original" } });
+export function toPng(
+  svg: string,
+  options: ResvgRenderOptions = { fitTo: { mode: "original" } },
+): Uint8Array {
+  const resvg = new Resvg(svg, options);
   const pngData = resvg.render();
   return pngData.asPng();
 }

deps/sharp.ts

@@ -1,7 +1,7 @@
 export { default } from "npm:[email protected]";
 import sharp from "npm:[email protected]";
 import icoEndec from "npm:[email protected]";
-import { toPng } from "./resvg.ts";
+import { type ResvgRenderOptions, toPng } from "./resvg.ts";
 
 export async function sharpsToIco(...images: sharp.Sharp[]) {
   const buffers = await Promise.all(
@@ -15,10 +15,11 @@ export async function sharpsToIco(...images: sharp.Sharp[]) {
 export function create(
   content: Uint8Array | string,
   config: sharp.SharpOptions = {},
+  svgOptions?: ResvgRenderOptions,
 ): sharp.Sharp {
   // It's a SVG
   if (typeof content === "string") {
-    return sharp(toPng(content));
+    return sharp(toPng(content, svgOptions));
   }
 
   return sharp(content, config);

plugins/favicon.ts

@@ -176,16 +176,19 @@ async function buildIco(
     }
   }
 
+  const svgOptions = {
+    fitTo: { mode: "width", value: Math.max(...size) },
+  } as const;
   let image: Uint8Array;
 
   if (format === "ico") {
     const resizeOptions = { background: { r: 0, g: 0, b: 0, alpha: 0 } };
-    const img = create(content);
+    const img = create(content, undefined, svgOptions);
     image = await sharpsToIco(
       ...size.map((size) => img.clone().resize(size, size, resizeOptions)),
     );
   } else {
-    image = await create(content)
+    image = await create(content, undefined, svgOptions)
       .resize(size[0], size[0])
       .toFormat(format)
       .toBuffer();