Keycloak

1
import styles from "@patternfly/react-styles/css/components/Avatar/avatar";
2
import { css } from "@patternfly/react-styles";
3

4
type DefaultAvatarProps = {
5
  className?: string;
6
  border?: "light" | "dark";
7
  size?: "sm" | "md" | "lg" | "xl";
8
};
9

10
export const DefaultAvatar = ({
11
  className = "",
12
  border,
13
  size = "md",
14
}: DefaultAvatarProps) => (
15
  <svg
16
    className={css(
17
      styles.avatar,
18
      styles.modifiers[size],
19
      border === "light" && styles.modifiers.light,
20
      border === "dark" && styles.modifiers.dark,
21
      className,
22
    )}
23
    enableBackground="new 0 0 36 36"
24
    version="1.1"
25
    viewBox="0 0 36 36"
26
    xmlns="http://www.w3.org/2000/svg"
27
  >
28
    <circle
29
      style={{ fillRule: "evenodd", clipRule: "evenodd", fill: "#FFFFFF" }}
30
      cx="18"
31
      cy="18.5"
32
      r="18"
33
    />
34
    <defs>
35
      <filter
36
        id="b"
37
        x="5.2"
38
        y="7.2"
39
        width="25.6"
40
        height="53.6"
41
        filterUnits="userSpaceOnUse"
42
      >
43
        <feColorMatrix values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 1 0" />
44
      </filter>
45
    </defs>
46
    <mask
47
      id="a"
48
      x="5.2"
49
      y="7.2"
50
      width="25.6"
51
      height="53.6"
52
      maskUnits="userSpaceOnUse"
53
    >
54
      <g style={{ filter: 'url("#b")' }}>
55
        <circle
56
          style={{ fillRule: "evenodd", clipRule: "evenodd", fill: "#FFFFFF" }}
57
          cx="18"
58
          cy="18.5"
59
          r="18"
60
        />
61
      </g>
62
    </mask>
63
    <g style={{ filter: 'url("#a")' }}>
64
      <g transform="translate(5.04 6.88)">
65
        <path
66
          style={{
67
            fillRule: "evenodd",
68
            clipRule: "evenodd",
69
            fill: "#BBBBBB",
70
          }}
71
          d="m22.6 18.1c-1.1-1.4-2.3-2.2-3.5-2.6s-1.8-0.6-6.3-0.6-6.1 0.7-6.1 0.7 0 0 0 0c-1.2 0.4-2.4 1.2-3.4 2.6-2.3 2.8-3.2 12.3-3.2 14.8 0 3.2 0.4 12.3 0.6 15.4 0 0-0.4 5.5 4 5.5l-0.3-6.3-0.4-3.5 0.2-0.9c0.9 0.4 3.6 1.2 8.6 1.2 5.3 0 8-0.9 8.8-1.3l0.2 1-0.2 3.6-0.3 6.3c3 0.1 3.7-3 3.8-4.4s0.6-12.6 0.6-16.5c0.1-2.6-0.8-12.1-3.1-15z"
72
        />
73
        <path
74
          style={{
75
            opacity: 0.1,
76
            fillRule: "evenodd",
77
            clipRule: "evenodd",
78
          }}
79
          d="m22.5 26c-0.1-2.1-1.5-2.8-4.8-2.8l2.2 9.6s1.8-1.7 3-1.8c0 0-0.4-4.6-0.4-5z"
80
        />
81
        <path
82
          style={{
83
            fillRule: "evenodd",
84
            clipRule: "evenodd",
85
            fill: "#BBBBBB",
86
          }}
87
          d="m12.7 13.2c-3.5 0-6.4-2.9-6.4-6.4s2.9-6.4 6.4-6.4 6.4 2.9 6.4 6.4-2.8 6.4-6.4 6.4z"
88
        />
89
        <path
90
          style={{
91
            opacity: 8.0e-2,
92
            fillRule: "evenodd",
93
            clipRule: "evenodd",
94
            fill: "#231F20",
95
          }}
96
          d="m9.4 6.8c0-3 2.1-5.5 4.9-6.3-0.5-0.1-1-0.2-1.6-0.2-3.5 0-6.4 2.9-6.4 6.4s2.9 6.4 6.4 6.4c0.6 0 1.1-0.1 1.6-0.2-2.8-0.6-4.9-3.1-4.9-6.1z"
97
        />
98
        <path
99
          style={{
100
            opacity: 0.1,
101
            fillRule: "evenodd",
102
            clipRule: "evenodd",
103
          }}
104
          d="m8.3 22.4c-2 0.4-2.9 1.4-3.1 3.5l-0.6 18.6s1.7 0.7 3.6 0.9l0.1-23z"
105
        />
106
      </g>
107
    </g>
108
  </svg>
109
);
110