fix: generateBrand: load system fonts only for marks with text (#120)

.changeset/brand-render-no-system-fonts.md

@@ -0,0 +1,5 @@
+---
+"@codeatlasdev/ui": patch
+---
+
+`generateBrand` and the brand Vite plugin no longer load every system font for each PNG they render. resvg did that by default on every construction (~450 ms per render on Windows, ~2.7 s per icon set, at every build and dev start); fonts now load only when the mark has `<text>` (#120).

packages/ui/src/lib/brand.ts

@@ -109,6 +109,18 @@ export interface GenerateBrandOptions {
 
 const SIZES = [16, 32, 48] as const;
 
+/**
+ * Render options for one PNG. resvg loads every system font on each construction by default
+ * (~450 ms per render on Windows); a mark drawn with paths needs none, so fonts load only when the
+ * SVG has text (#120).
+ */
+export function resvgOptions(svg: string, size: number) {
+	return {
+		fitTo: { mode: "width" as const, value: size },
+		font: { loadSystemFonts: /<text\b/.test(svg) },
+	};
+}
+
 /**
  * Writes `favicon.<h>.svg`, `favicon.<h>.ico` (16/32/48), `favicon-32.<h>.png`, `apple-touch-icon.<h>.png`
  * (180, opaque), `icon-192/512.<h>.png`, `maskable-512.<h>.png` and `manifest.<h>.webmanifest`.
@@ -146,7 +158,7 @@ export async function generateBrand(o: GenerateBrandOptions): Promise<BrandAsset
 		);
 	};
 	const png = (svg: string, size: number) =>
-		new Resvg(svg, { fitTo: { mode: "width", value: size } }).render().asPng();
+		new Resvg(svg, resvgOptions(svg, size)).render().asPng();
 	/** Transparent PNG of the mark alone (favicon sizes). */
 	const bare = (size: number) =>
 		png(light.replace(/<svg\b/, `<svg width="${size}" height="${size}"`), size);

packages/ui/tests/brand.test.ts

@@ -2,7 +2,7 @@ import { describe, expect, it } from "bun:test";
 import { mkdtempSync, readdirSync, readFileSync } from "node:fs";
 import { tmpdir } from "node:os";
 import { join } from "node:path";
-import { generateBrand, renderMark, resolveBrand } from "../src/lib/brand.js";
+import { generateBrand, renderMark, resolveBrand, resvgOptions } from "../src/lib/brand.js";
 import { iconLinks, ogCard } from "../src/lib/seo/index.js";
 
 const MARK =
@@ -99,3 +99,14 @@ describe("iconLinks / ogCard", () => {
 		expect(html).toContain("1200px");
 	});
 });
+
+describe("resvgOptions", () => {
+	// resvg loads every system font per render by default: ~450 ms each on Windows, so one icon set
+	// took ~2.7 s and the generateBrand test timed out there (#120). A mark without text needs none.
+	it("loads system fonts only for an SVG with text (#120)", () => {
+		expect(resvgOptions(MARK, 32).font?.loadSystemFonts).toBe(false);
+		const withText = MARK.replace("</svg>", '<text x="4" y="20">A</text></svg>');
+		expect(resvgOptions(withText, 32).font?.loadSystemFonts).toBe(true);
+		expect(resvgOptions(MARK, 180).fitTo).toEqual({ mode: "width", value: 180 });
+	});
+});