Loading...
Loading...
Badges that contain SVG icons alongside text, useful for feature tags, categories, and metadata.
interface BadgeIconProps {
icon: "star" | "heart" | "clock" | "tag" | "zap" | "shield";
label: string;
variant?: "default" | "outline" | "subtle";
}
const icons: Record<string, string> = {
star: "M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z",
heart: "M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z",
clock: "M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z",
tag: "M7 7h.01M7 3h5c.512 0 1.024.195 1.414.586l7 7a2 2 0 010 2.828l-7 7a2 2 0 01-2.828 0l-7-7A1.994 1.994 0 013 12V7a4 4 0 014-4z",
zap: "M13 10V3L4 14h7v7l9-11h-7z",
shield: "M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z",
};
const variantClasses = {
default: "bg-gray-900 text-white",
outline: "bg-transparent border border-gray-300 text-gray-700",
subtle: "bg-gray-100 text-gray-700",
};
export function BadgeIcon({ icon, label, variant = "default" }: BadgeIconProps) {
return (
<span className={`inline-flex items-center gap-1.5 px-3 py-1 rounded-full text-xs font-semibold ${variantClasses[variant]}`}>
<svg className="w-3.5 h-3.5" fill="currentColor" viewBox="0 0 20 20">
<path d={icons[icon]} />
</svg>
{label}
</span>
);
}