Featured Icon

1import * as React from "react";
2import { cva, type VariantProps } from "class-variance-authority";
3 
4import { cn } from "@/lib/utils";
5 
6export const featuredIconVariants = cva(
7  "flex shrink-0 items-center justify-center border bg-muted [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='text-'])]:text-primary",
8  {
9    variants: {
10      size: {
11        sm: "size-8 rounded-sm [&_svg]:size-3",
12        md: "size-12 rounded-md [&_svg]:size-4",
13        lg: "size-16 rounded-lg [&_svg]:size-6",
14      },
15    },
16    defaultVariants: {
17      size: "md",
18    },
19  }
20);
21 
22export function FeaturedIcon({
23  size = "md",
24  className,
25  ...props
26}: React.ComponentProps<"div"> & VariantProps<typeof featuredIconVariants>) {
27  return (
28    <div
29      data-slot="featured-icon"
30      className={cn(featuredIconVariants({ size }), className)}
31      {...props}
32    />
33  );
34}