Use Suils in Next.js

With `next/image`

Allow the Suils host in next.config.js:

// next.config.js
module.exports = {
  images: {
    remotePatterns: [{ protocol: 'https', hostname: 'avatars.suils.es' }],
  },
};

tsx

import Image from 'next/image';

export function Avatar({
  seed,
  styleName = 'suils',
  size = 96,
}: {
  seed: string;
  styleName?: string;
  size?: number;
}) {
  return (
    <Image
      src={`https://avatars.suils.es/${styleName}/svg?seed=${encodeURIComponent(seed)}`}
      width={size}
      height={size}
      alt={`${seed}'s avatar`}
      unoptimized
    />
  );
}

https://avatars.suils.es/suils/svg?seed=user-8f3a2c

TIP

SVGs don't benefit from Next's image optimizer — pass unoptimized (or just use a plain <img>). For Open Graph images, request the png format with a size.

Use Suils in Next.js ​

With next/image ​

Use Suils in Next.js

With `next/image`