Mahyar Khanbolooki
71 lines
2.8 KiB
TypeScript
71 lines
2.8 KiB
TypeScript
import { motion } from "framer-motion";
|
|
import React from "react";
|
|
|
|
type EyeToggleIconProps = {
|
|
slash: boolean;
|
|
} & React.SVGProps<SVGSVGElement>;
|
|
|
|
export const EyeToggleIcon: React.FC<EyeToggleIconProps> = ({ slash, ...props }) => {
|
|
return (
|
|
<svg
|
|
width="20"
|
|
height="20"
|
|
viewBox="0 0 20 20"
|
|
fill="none"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
{...props}
|
|
>
|
|
<defs>
|
|
<filter id="whiteShadow" x="-50%" y="-50%" width="200%" height="200%" colorInterpolationFilters="sRGB" >
|
|
<feDropShadow dx="1.5" dy="0" stdDeviation="0" floodColor="white" floodOpacity="1" />
|
|
</filter>
|
|
</defs>
|
|
{/* Eye Circle */}
|
|
<path
|
|
d="M12.9833 9.99994C12.9833 11.6499 11.6499 12.9833 9.99994 12.9833C8.34993 12.9833 7.0166 11.6499 7.0166 9.99994C7.0166 8.34993 8.34993 7.0166 9.99994 7.0166C11.6499 7.0166 12.9833 8.34993 12.9833 9.99994Z"
|
|
stroke="#333"
|
|
strokeWidth="1.2"
|
|
strokeLinecap="round"
|
|
strokeLinejoin="round"
|
|
/>
|
|
|
|
{/* Eye Outline */}
|
|
<path
|
|
d="M10.0001 16.8918C12.9418 16.8918 15.6834 15.1584 17.5918 12.1584C18.3418 10.9834 18.3418 9.00843 17.5918 7.83343C15.6834 4.83343 12.9418 3.1001 10.0001 3.1001C7.05845 3.1001 4.31678 4.83343 2.40845 7.83343C1.65845 9.00843 1.65845 10.9834 2.40845 12.1584C4.31678 15.1584 7.05845 16.8918 10.0001 16.8918Z"
|
|
stroke="#333"
|
|
strokeWidth="1.2"
|
|
strokeLinecap="round"
|
|
strokeLinejoin="round"
|
|
/>
|
|
|
|
{/* Slash Line - Animate with Framer Motion */}
|
|
<motion.path
|
|
d="M19.6 1.66675L1.66699 19.6"
|
|
stroke="#FFF"
|
|
strokeWidth="1.2"
|
|
strokeLinecap="round"
|
|
strokeLinejoin="round"
|
|
initial={false}
|
|
animate={{ strokeWidth: slash ? 0 : 1.2, opacity: slash ? 0 : 1 }}
|
|
transition={{
|
|
strokeWidth: { duration: 0.2, ease: "easeInOut" },
|
|
opacity: { duration: 0.1, ease: "easeInOut", delay: slash ? 0.1 : 0 }
|
|
}}
|
|
/>
|
|
<motion.path
|
|
d="M18.3332 1.66675L1.66699 18.3334"
|
|
stroke="#333"
|
|
strokeWidth="1.2"
|
|
strokeLinecap="round"
|
|
strokeLinejoin="round"
|
|
initial={false}
|
|
animate={{ pathLength: slash ? 0 : 1, opacity: slash ? 0 : 1 }}
|
|
transition={{
|
|
pathLength: { duration: 0.3, ease: "easeInOut" },
|
|
opacity: { duration: 0.2, ease: "easeInOut", delay: slash ? 0.1 : 0 }
|
|
}}
|
|
/>
|
|
</svg>
|
|
);
|
|
};
|