Function compose

tools/icons/src/render.js:24–50

* Core: a tinted logo sized to `fraction` of the shorter side, centered on a * canvas. `bg` is a hex color (opaque background) or null (transparent).

(
    svg,
    { width, height = width, bg = null, logoColor, fraction },
)

 * canvas. `bg` is a hex color (opaque background) or null (transparent).
 */
async function compose(
    svg,
    { width, height = width, bg = null, logoColor, fraction },
) {
    const logoSize = Math.round(Math.min(width, height) * fraction);
    const logo = await sharp(Buffer.from(tintLogo(svg, logoColor)))
        .resize(logoSize, logoSize, { fit: "contain", background: TRANSPARENT })
        .png()
        .toBuffer();
    return sharp({
        create: {
            width,
            height,
            channels: 4,
            background: bg ? { ...hexToRgb(bg), alpha: 1 } : TRANSPARENT,
        },
    })
        .composite([
            {
                input: logo,
                top: Math.round((height - logoSize) / 2),
                left: Math.round((width - logoSize) / 2),
            },
        ])
        .png()
        .toBuffer();
}

/** Favicon: logo fills the square, transparent background. */
export function renderFavicon(svg, size, color) {