Serverless README Image (React)

ReadmeImg.tsx

import React from "react";

export const ReadmeImg = ({ width, height, children }) => {
  return (
    <svg 
      xmlns="http://www.w3.org/2000/svg"
      width={width} height={height}
      viewBox={`0 0 ${width} ${height}`}
    >
      <foreignObject width={width} height={height}>
        <div {...{ xmlns: "http://www.w3.org/1999/xhtml" }}>
          {children}
        </div>
      </foreignObject>
    </svg>
  );
};

ServerlessHandler.tsx

import { renderToString } from "react-dom/server";
import { ReadmeImg } from "@/components";

export default async function (req, res) {
  res.setHeader("Content-Type", "image/svg+xml");
  const svg = renderToString(
    <ReadmeImg>
      <style>{`/* CSS HERE */`}</style>
      <h1>Hello world!</h1>
    </ReadmeImg>
  );
  return res.status(200).send(svg);
}