InvokeAI/invokeai/frontend/web/src/features/controlLayers/components/Tool/GradientIcons.tsx at 69ba7432b4df7d9659bcefe4e4bd0e7a1191543b · DustyShoe/InvokeAI · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
import { Box } from '@invoke-ai/ui-library';
import { memo, useId } from 'react';

export const GradientToolIcon = memo(() => {
  const id = useId();
  const gradientId = `${id}-gradient-tool-horizontal`;
  return (
    <Box as="svg" viewBox="0 0 24 24" boxSize={6} aria-hidden focusable={false} display="block">
      <defs>
        <linearGradient id={gradientId} x1="0" y1="0.5" x2="1" y2="0.5">
          <stop offset="0%" stopColor="currentColor" stopOpacity="0.0" />
          <stop offset="100%" stopColor="currentColor" stopOpacity="0.85" />
        </linearGradient>
      </defs>
      <rect
        x="3"
        y="6"
        width="18"
        height="12"
        rx="2"
        fill={`url(#${gradientId})`}
        stroke="currentColor"
        strokeOpacity="0.9"
        strokeWidth="1"
      />
    </Box>
  );
});
GradientToolIcon.displayName = 'GradientToolIcon';

export const GradientLinearIcon = memo(() => {
  const id = useId();
  const gradientId = `${id}-gradient-linear-diagonal`;
  return (
    <Box as="svg" viewBox="0 0 20 20" aria-hidden focusable={false} display="block">
      <defs>
        <linearGradient id={gradientId} x1="0" y1="1" x2="1" y2="0">
          <stop offset="0%" stopColor="currentColor" stopOpacity="0.0" />
          <stop offset="100%" stopColor="currentColor" stopOpacity="0.85" />
        </linearGradient>
      </defs>
      <rect
        x="2"
        y="2"
        width="16"
        height="16"
        rx="2"
        fill={`url(#${gradientId})`}
        stroke="currentColor"
        strokeOpacity="0.9"
        strokeWidth="1.2"
      />
    </Box>
  );
});
GradientLinearIcon.displayName = 'GradientLinearIcon';

export const GradientRadialIcon = memo(() => {
  const id = useId();
  const gradientId = `${id}-gradient-radial`;
  return (
    <Box as="svg" viewBox="0 0 20 20" aria-hidden focusable={false} display="block">
      <defs>
        <radialGradient id={gradientId} cx="0.5" cy="0.5" r="0.5">
          <stop offset="0%" stopColor="currentColor" stopOpacity="0.0" />
          <stop offset="100%" stopColor="currentColor" stopOpacity="0.85" />
        </radialGradient>
      </defs>
      <circle
        cx="10"
        cy="10"
        r="8"
        fill={`url(#${gradientId})`}
        stroke="currentColor"
        strokeOpacity="0.9"
        strokeWidth="1.2"
      />
    </Box>
  );
});
GradientRadialIcon.displayName = 'GradientRadialIcon';