52 lines
1.4 KiB
TypeScript
52 lines
1.4 KiB
TypeScript
import * as React from "react";
|
|
import SvgIcon, { SvgIconProps } from "@mui/material/SvgIcon";
|
|
|
|
type Props = SvgIconProps & {
|
|
crossed?: boolean; // true = перечеркнуть
|
|
};
|
|
|
|
export default function GradientVisibilityToggleIcon({ crossed, sx, ...props }: Props) {
|
|
const id = React.useId();
|
|
|
|
return (
|
|
<SvgIcon
|
|
{...props}
|
|
viewBox="0 0 24 24"
|
|
sx={{
|
|
...sx,
|
|
|
|
// анимация "рисования" линии
|
|
"& .slash": {
|
|
strokeDasharray: 100,
|
|
strokeDashoffset: crossed ? 0 : 100,
|
|
transition: "stroke-dashoffset 520ms ease",
|
|
},
|
|
}}
|
|
>
|
|
<defs>
|
|
<linearGradient id={id} x1="0%" y1="0%" x2="100%" y2="100%">
|
|
<stop offset="0%" stopColor="#F27121" />
|
|
<stop offset="70%" stopColor="#E940CD" />
|
|
<stop offset="100%" stopColor="#8A2387" />
|
|
</linearGradient>
|
|
</defs>
|
|
|
|
{/* сам "глаз" */}
|
|
<path
|
|
fill={`url(#${id})`}
|
|
d="M12 4.5C7 4.5 2.73 7.61 1 12c1.73 4.39 6 7.5 11 7.5s9.27-3.11 11-7.5c-1.73-4.39-6-7.5-11-7.5M12 17c-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5m0-8c-1.66 0-3 1.34-3 3s1.34 3 3 3 3-1.34 3-3-1.34-3-3-3"
|
|
/>
|
|
|
|
{/* линия "перечёркивания" */}
|
|
<path
|
|
className="slash"
|
|
d="M4 4 L20 20"
|
|
fill="none"
|
|
stroke={`url(#${id})`}
|
|
strokeWidth="2.4"
|
|
strokeLinecap="round"
|
|
/>
|
|
</SvgIcon>
|
|
);
|
|
}
|