minor fix marketplace + xyi ego znaet
This commit is contained in:
51
src/renderer/assets/Icons/GradientVisibilityToggleIcon.tsx
Normal file
51
src/renderer/assets/Icons/GradientVisibilityToggleIcon.tsx
Normal file
@ -0,0 +1,51 @@
|
||||
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>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user