Hi guys, I'm trying to generate icons / favicons from external source (Storyblok). I thought I can create a icon.tsx route, then define different sizes in generateImageMetadata(), fetch the image and finally create an ImageResponse which renders an <img> element with the image as src. However, it seems that only the id is passed to the ImageResponse, but not the size. How can I do this?

My code:

export function generateImageMetadata() {
  return [
    {
      contentType: 'image/png',
      size: { width: 48, height: 48 },
      id: 'small',
    },
    {
      contentType: 'image/png',
      size: { width: 72, height: 72 },
      id: 'medium',
    },
  ];
}

export default async function Icon({
  id,
  size,
}: {
  id: string;
  size: { width: number; height: number };
}) {
  const { data: configData } = await fetchSbData('stories/config');
  const configStory: ISbStoryData<ConfigStoryblok> = configData.story;
  const configContent: ConfigStoryblok = configStory.content;

  return new ImageResponse(
    (
      <img
        style={{
          width: '100%',
          height: '100%',
        }}
        width={size.width}
        height={size.height}
        src={configContent.favicon.filename}
      />
    )
  );
}