{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"featured-icon","title":"Featured Icon","description":"A component that places an icon inside a styled square or circle frame for extra prominence. This component makes supporting visuals stand out in marketing layouts.","files":[{"path":"components/shadcncraft/pro-marketing/featured-icon.tsx","content":"import * as React from \"react\";\nimport { cva, type VariantProps } from \"class-variance-authority\";\n\nimport { cn } from \"@/lib/utils\";\n\nexport const featuredIconVariants = cva(\n  \"flex shrink-0 items-center justify-center border bg-muted [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='text-'])]:text-primary\",\n  {\n    variants: {\n      size: {\n        sm: \"size-8 rounded-sm [&_svg]:size-3\",\n        md: \"size-12 rounded-md [&_svg]:size-4\",\n        lg: \"size-16 rounded-lg [&_svg]:size-6\",\n      },\n    },\n    defaultVariants: {\n      size: \"md\",\n    },\n  }\n);\n\nexport function FeaturedIcon({\n  size = \"md\",\n  className,\n  ...props\n}: React.ComponentProps<\"div\"> & VariantProps<typeof featuredIconVariants>) {\n  return (\n    <div\n      data-slot=\"featured-icon\"\n      className={cn(featuredIconVariants({ size }), className)}\n      {...props}\n    />\n  );\n}\n","type":"registry:ui","target":"@components/shadcncraft/pro-marketing/featured-icon.tsx"}],"meta":{"tier":"free","figmaNodeId":"17897-100009","bundle":"pro-marketing"},"type":"registry:ui"}