Vectrum
Sign In
14 lines · 689 Bytes · TypeScript
import { encode } from "uqr";

/** A QR code as an SVG, dark on white in both themes so every camera reads it. Server-safe. */
export function QrCode({ value, size = 176, label }: { value: string; size?: number; label: string }) {
  const { data, size: modules } = encode(value, { ecc: "M", border: 2 });
  let d = "";
  data.forEach((row, y) => row.forEach((dark, x) => dark && (d += `M${x} ${y}h1v1h-1z`)));
  return (
    <svg viewBox={`0 0 ${modules} ${modules}`} width={size} height={size} role="img" aria-label={label} shapeRendering="crispEdges" className="rounded-row">
      <rect width={modules} height={modules} fill="#fff" />
      <path d={d} fill="#000" />
    </svg>
  );
}