Generate Badge

Component

About

A React hook and button for converting an SVG badge into a downloadable PNG or JPEG image with scale, quality and background options.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Generate Badge to your project and fits it to your theme.

Code

How Generate Badge is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

"use client";

import {
  GenerateBadgeButton,
  useGenerateBadge,
} from "@/components/ui/generate-badge";

export default function Default() {
  const badge = useGenerateBadge();

  return (
    <div className="flex flex-col items-center gap-4 p-6">
      <svg
        ref={badge.badgeRef}
        viewBox="0 0 320 200"
        width="320"
        height="200"
        xmlns="http://www.w3.org/2000/svg"
      >
        <rect width="320" height="200" rx="16" fill="#0a0a0a" />
        <text x="24" y="44" fill="#a1a1aa" fontFamily="monospace" fontSize="13">
          TEAM Badge
        </text>
        <text
          x="296"
          y="44"
          fill="#a1a1aa"
          fontFamily="monospace"
          fontSize="13"
          textAnchor="end"
        >
          #001
        </text>
        <text
          x="24"
          y="118"
          fill="#ffffff"
          fontFamily="sans-serif"
          fontSize="28"
          fontWeight="700"
        >
          GUILLERMO
        </text>
        <text
          x="24"
          y="150"
          fill="#ffffff"
          fontFamily="sans-serif"
          fontSize="28"
          fontWeight="700"
        >
          RAUCH
        </text>
        <text
          x="24"
          y="180"
          fill="#6366f1"
          fontFamily="monospace"
          fontSize="12"
        >
          → CEO AT VERCEL
        </text>
      </svg>
      <GenerateBadgeButton
        badge={badge}
        filename="team-badge"
        options={{ scale: 2 }}
      >
        Download Badge (PNG)
      </GenerateBadgeButton>
    </div>
  );
}