decor-icon

1import { cn } from "@/lib/utils";
2import { cva, type VariantProps } from "class-variance-authority";
3 
4const DecorIconVariants = cva(
5	"pointer-events-none absolute z-1 size-5 shrink-0 stroke-1 stroke-muted-foreground",
6	{
7		variants: {
8			position: {
9				"top-left":
10					"top-0 left-0 -translate-x-[calc(50%+0.5px)] -translate-y-[calc(50%+0.5px)]",
11				"top-right":
12					"top-0 right-0 translate-x-[calc(50%+0.5px)] -translate-y-[calc(50%+0.5px)]",
13				"bottom-right":
14					"right-0 bottom-0 translate-x-[calc(50%+0.5px)] translate-y-[calc(50%+0.5px)]",
15				"bottom-left":
16					"bottom-0 left-0 -translate-x-[calc(50%+0.5px)] translate-y-[calc(50%+0.5px)]",
17			},
18		},
19		defaultVariants: {
20			position: "top-left",
21		},
22	}
23);
24 
25type DecorIconProps = React.ComponentProps<"svg"> &
26	VariantProps<typeof DecorIconVariants>;
27 
28export function DecorIcon({ position, className, ...props }: DecorIconProps) {
29	return (
30		<svg
31			aria-hidden="true"
32			className={cn(DecorIconVariants({ position, className }))}
33			fill="none"
34			stroke="currentColor"
35			strokeLinecap="round"
36			strokeLinejoin="round"
37			viewBox="0 0 24 24"
38			xmlns="http://www.w3.org/2000/svg"
39			{...props}
40		>
41			<path d="M5 12h14" />
42			<path d="M12 5v14" />
43		</svg>
44	);
45}