155 lines
3.4 KiB
TypeScript
155 lines
3.4 KiB
TypeScript
import type { ComponentPropsWithoutRef, ReactNode } from "react";
|
|
|
|
import { cn } from "./cn";
|
|
|
|
type IconProps = ComponentPropsWithoutRef<"svg">;
|
|
|
|
function IconFrame({
|
|
children,
|
|
className,
|
|
viewBox = "0 0 16 16",
|
|
...props
|
|
}: IconProps & {
|
|
children: ReactNode;
|
|
viewBox?: string;
|
|
}) {
|
|
return (
|
|
<svg
|
|
aria-hidden="true"
|
|
className={cn("size-4 shrink-0", className)}
|
|
fill="none"
|
|
viewBox={viewBox}
|
|
{...props}
|
|
>
|
|
{children}
|
|
</svg>
|
|
);
|
|
}
|
|
|
|
export function CheckIcon({ className, ...props }: IconProps) {
|
|
return (
|
|
<IconFrame className={className} {...props}>
|
|
<path
|
|
d="M3.5 8.5 6.5 11.5 12.5 5.5"
|
|
stroke="currentColor"
|
|
strokeLinecap="round"
|
|
strokeLinejoin="round"
|
|
strokeWidth="1.75"
|
|
/>
|
|
</IconFrame>
|
|
);
|
|
}
|
|
|
|
export function ChevronDownIcon({ className, ...props }: IconProps) {
|
|
return (
|
|
<IconFrame className={className} {...props}>
|
|
<path
|
|
d="m4.5 6.5 3.5 3 3.5-3"
|
|
stroke="currentColor"
|
|
strokeLinecap="round"
|
|
strokeLinejoin="round"
|
|
strokeWidth="1.75"
|
|
/>
|
|
</IconFrame>
|
|
);
|
|
}
|
|
|
|
export function ChevronRightIcon({ className, ...props }: IconProps) {
|
|
return (
|
|
<IconFrame className={className} {...props}>
|
|
<path
|
|
d="m6 4.5 3.5 3.5L6 11.5"
|
|
stroke="currentColor"
|
|
strokeLinecap="round"
|
|
strokeLinejoin="round"
|
|
strokeWidth="1.75"
|
|
/>
|
|
</IconFrame>
|
|
);
|
|
}
|
|
|
|
export function CloseIcon({ className, ...props }: IconProps) {
|
|
return (
|
|
<IconFrame className={className} {...props}>
|
|
<path
|
|
d="m4.5 4.5 7 7m0-7-7 7"
|
|
stroke="currentColor"
|
|
strokeLinecap="round"
|
|
strokeLinejoin="round"
|
|
strokeWidth="1.75"
|
|
/>
|
|
</IconFrame>
|
|
);
|
|
}
|
|
|
|
export function DotIcon({ className, ...props }: IconProps) {
|
|
return (
|
|
<IconFrame className={className} viewBox="0 0 8 8" {...props}>
|
|
<circle cx="4" cy="4" fill="currentColor" r="2.25" />
|
|
</IconFrame>
|
|
);
|
|
}
|
|
|
|
export function SortAscendingIcon({ className, ...props }: IconProps) {
|
|
return (
|
|
<IconFrame className={className} {...props}>
|
|
<path
|
|
d="M8 12.5v-9m0 0L5.5 6m2.5-2.5L10.5 6"
|
|
stroke="currentColor"
|
|
strokeLinecap="round"
|
|
strokeLinejoin="round"
|
|
strokeWidth="1.5"
|
|
/>
|
|
</IconFrame>
|
|
);
|
|
}
|
|
|
|
export function SortDescendingIcon({ className, ...props }: IconProps) {
|
|
return (
|
|
<IconFrame className={className} {...props}>
|
|
<path
|
|
d="M8 3.5v9m0 0-2.5-2.5M8 12.5l2.5-2.5"
|
|
stroke="currentColor"
|
|
strokeLinecap="round"
|
|
strokeLinejoin="round"
|
|
strokeWidth="1.5"
|
|
/>
|
|
</IconFrame>
|
|
);
|
|
}
|
|
|
|
export function SortUnsortedIcon({ className, ...props }: IconProps) {
|
|
return (
|
|
<IconFrame className={className} {...props}>
|
|
<path
|
|
d="m5 6 3-3 3 3M11 10l-3 3-3-3"
|
|
stroke="currentColor"
|
|
strokeLinecap="round"
|
|
strokeLinejoin="round"
|
|
strokeWidth="1.5"
|
|
/>
|
|
</IconFrame>
|
|
);
|
|
}
|
|
|
|
export function SpinnerIcon({ className, ...props }: IconProps) {
|
|
return (
|
|
<IconFrame className={className} {...props}>
|
|
<circle
|
|
cx="8"
|
|
cy="8"
|
|
opacity="0.22"
|
|
r="5.25"
|
|
stroke="currentColor"
|
|
strokeWidth="1.75"
|
|
/>
|
|
<path
|
|
d="M8 2.75A5.25 5.25 0 0 1 13.25 8"
|
|
stroke="currentColor"
|
|
strokeLinecap="round"
|
|
strokeWidth="1.75"
|
|
/>
|
|
</IconFrame>
|
|
);
|
|
}
|