73 lines
1.7 KiB
TypeScript
73 lines
1.7 KiB
TypeScript
import { cn } from '@/shared/lib/cn';
|
|
|
|
type IconName =
|
|
| 'camera'
|
|
| 'check'
|
|
| 'circle'
|
|
| 'info'
|
|
| 'shield'
|
|
| 'signal'
|
|
| 'spark'
|
|
| 'warning';
|
|
|
|
type IconProps = {
|
|
name: IconName;
|
|
className?: string;
|
|
};
|
|
|
|
export function Icon({ name, className }: IconProps) {
|
|
return (
|
|
<svg
|
|
aria-hidden="true"
|
|
className={cn('h-4 w-4 shrink-0', className)}
|
|
fill="none"
|
|
viewBox="0 0 24 24"
|
|
stroke="currentColor"
|
|
strokeLinecap="round"
|
|
strokeLinejoin="round"
|
|
strokeWidth="1.8"
|
|
>
|
|
{paths[name]}
|
|
</svg>
|
|
);
|
|
}
|
|
|
|
const paths: Record<IconName, React.ReactNode> = {
|
|
camera: (
|
|
<>
|
|
<path d="M4 8.8A2.8 2.8 0 0 1 6.8 6h1.7l1.2-1.8h4.6L15.5 6h1.7A2.8 2.8 0 0 1 20 8.8v7.4a2.8 2.8 0 0 1-2.8 2.8H6.8A2.8 2.8 0 0 1 4 16.2V8.8Z" />
|
|
<path d="M9 12.5a3 3 0 1 0 6 0a3 3 0 0 0-6 0Z" />
|
|
</>
|
|
),
|
|
check: <path d="m5 12.5 4.2 4.2L19 6.8" />,
|
|
circle: <path d="M12 19.2a7.2 7.2 0 1 0 0-14.4 7.2 7.2 0 0 0 0 14.4Z" />,
|
|
info: (
|
|
<>
|
|
<path d="M12 17v-6" />
|
|
<path d="M12 7.3h.01" />
|
|
<path d="M12 21a9 9 0 1 0 0-18 9 9 0 0 0 0 18Z" />
|
|
</>
|
|
),
|
|
shield: <path d="M12 21s7-3.4 7-10.2V5.4L12 3 5 5.4v5.4C5 17.6 12 21 12 21Z" />,
|
|
signal: (
|
|
<>
|
|
<path d="M4.8 13.6a10.2 10.2 0 0 1 14.4 0" />
|
|
<path d="M8 16.8a5.7 5.7 0 0 1 8 0" />
|
|
<path d="M12 20h.01" />
|
|
</>
|
|
),
|
|
spark: (
|
|
<>
|
|
<path d="M12 3.5 13.8 9l5.7 1.8-5.7 1.9L12 18.5l-1.8-5.8-5.7-1.9L10.2 9 12 3.5Z" />
|
|
<path d="m18 4 1 2.6 2.5.9-2.5.8L18 11l-.9-2.7-2.6-.8 2.6-.9L18 4Z" />
|
|
</>
|
|
),
|
|
warning: (
|
|
<>
|
|
<path d="M12 8v5" />
|
|
<path d="M12 17h.01" />
|
|
<path d="m10.2 4.4-7 12.2A2.2 2.2 0 0 0 5.1 20h13.8a2.2 2.2 0 0 0 1.9-3.4l-7-12.2a2.1 2.1 0 0 0-3.6 0Z" />
|
|
</>
|
|
),
|
|
};
|