Readme Badge

1/**
2 * shieldcn
3 * ReadmeBadge
4 * by Justin Levine
5 * shieldcn.dev
6 *
7 * Renders a shieldcn badge image with optional link wrapping.
8 * Works with any shieldcn badge URL or any image URL.
9 *
10 * Props:
11 * - src: badge image URL (shieldcn, shields.io, or any image)
12 * - alt: accessible alt text for the badge
13 * - href?: optional link URL — wraps the badge in an anchor tag
14 * - height?: image height in pixels (default 20)
15 * - className?: class name for the outer element (link or image)
16 * - imgClassName?: class name for the img element (when href is set)
17 */
18 
19import * as React from "react"
20import { cn } from "@/lib/utils"
21 
22interface ReadmeBadgeProps extends React.ComponentProps<"img"> {
23  /** Badge image URL. */
24  src: string
25  /** Accessible alt text. */
26  alt: string
27  /** Optional link — wraps badge in an anchor. */
28  href?: string
29  /** Image height in pixels. @default 20 */
30  height?: number
31  /** Class name for the outer element. */
32  className?: string
33  /** Class name for the img element when wrapped in a link. */
34  imgClassName?: string
35}
36 
37function ReadmeBadge({
38  src,
39  alt,
40  href,
41  height = 20,
42  className,
43  imgClassName,
44  ...props
45}: ReadmeBadgeProps) {
46  const img = (
47    // eslint-disable-next-line @next/next/no-img-element
48    <img
49      src={src}
50      alt={alt}
51      height={height}
52      className={cn(
53        "inline-block align-middle",
54        href ? imgClassName : className
55      )}
56      loading="lazy"
57      decoding="async"
58      {...props}
59    />
60  )
61 
62  if (href) {
63    return (
64      <a
65        href={href}
66        target="_blank"
67        rel="noopener noreferrer"
68        className={cn("inline-flex", className)}
69      >
70        {img}
71      </a>
72    )
73  }
74 
75  return img
76}
77 
78export { ReadmeBadge }
79export type { ReadmeBadgeProps }