![<LogoSoup
logos={["/logo1.svg", "/logo2.svg"]}
baseSize={48}
gap={16}
scaleFactor={0.5}
densityAware={true}
densityFactor={0.5}
alignBy="bounds" | "visual-center" | "visual-center-x" | "visual-center-y"
cropToContent={false}
// Custom image renderer (e.g. Next.js Image)
renderImage={(props) => (<CustomImageComponent ...props />
/>](https://cdn.bsky.app/img/feed_thumbnail/plain/did:plc:blb25uhgtcwaiqjivuah67z3/bafkreidorjbueu2p242n5dlmhk6vakvcu4qafwoesron54vvlfrdgpnv5a)
<LogoSoup logos={["/logo1.svg", "/logo2.svg"]} baseSize={48} gap={16} scaleFactor={0.5} densityAware={true} densityFactor={0.5} alignBy="bounds" | "visual-center" | "visual-center-x" | "visual-center-y" cropToContent={false} // Custom image renderer (e.g. Next.js Image) renderImage={(props) => (<CustomImageComponent ...props /> />
We bet you've spent more hours than you'd admit getting a row of partner logos to look right.
Our colleague @rosti.no automated it. Pixel density analysis, aspect ratio normalization. Just maths (not AI).
npm install react-logo-soup
🧪 sanity.io/blog/the-logo-soup-problem
2 months ago
25
2
3
2
