-
Notifications
You must be signed in to change notification settings - Fork 3
/
IpgLogo.tsx
176 lines (171 loc) · 9.77 KB
/
IpgLogo.tsx
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
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
import * as React from "react";
import { IpgLogoProps } from "./IpgLogo.types";
import SvgIcon from "@mui/material/SvgIcon";
// IPG logo svg
function Icon(props: IpgLogoProps) {
// get textColour and sx from props
const { textColour, sx } = props;
// create a switch case based on text colour
let ipgTextColour: string;
let automotiveTextColour: string;
switch (textColour) {
case "white":
ipgTextColour = "white";
automotiveTextColour = "white";
break;
case "black":
ipgTextColour = "#1D1D1B";
automotiveTextColour = "#0060A8";
break;
default:
ipgTextColour = "#1D1D1B";
automotiveTextColour = "#0060A8";
}
// return the IPG logo svg which is different for light and dark mode
return (
<SvgIcon viewBox="0 0 300 82" sx={{ ...sx }}>
<g clipPath="url(#clip0_1392_21101)">
<path
d="M138.964 16.865H132.575V59.135H138.964V16.865Z"
fill={ipgTextColour}
/>
<path
d="M217.351 19.454C215.468 17.737 212.592 16.866 208.802 16.866H161.97V59.136H168.356V42.812L206.852 42.809C211.852 42.809 215.231 41.945 217.183 40.166C219.12 38.39 220.101 35.038 220.101 30.204V28.5C220.101 24.173 219.176 21.13 217.351 19.454ZM168.355 22.222H206.543C209.156 22.222 211.107 22.659 212.191 23.489C213.198 24.239 213.708 25.756 213.708 27.997V31.932C213.708 35.65 211.456 37.458 206.827 37.458H168.356V22.222H168.355Z"
fill={ipgTextColour}
/>
<path
d="M272.459 37.8239V43.1739H293.612V46.7229C293.612 49.4499 292.893 51.4049 291.478 52.5319C290.029 53.6629 287.718 54.2369 284.611 54.2369H254.29C250.569 54.2369 248.001 53.5099 246.662 52.0779C245.321 50.6139 244.641 48.2339 244.641 45.0019V30.4709C244.641 27.4179 245.368 25.1859 246.803 23.8369C248.26 22.4619 250.769 21.7649 254.256 21.7649H279.642C285.692 21.7649 289.571 22.2439 291.174 23.1889C292.726 24.0939 293.513 26.2979 293.513 29.7429V30.1319H299.551V28.1809C299.551 20.3709 294.14 16.4109 283.467 16.4109H253.89C248.397 16.4109 244.395 17.5839 241.993 19.8959C239.604 22.2079 238.346 26.1399 238.251 31.5869V43.8029C238.251 49.4639 239.46 53.5549 241.848 55.9629C244.239 58.3709 248.217 59.5909 253.673 59.5909H285.306C290.697 59.5909 294.538 58.4029 296.72 56.0589C298.897 53.7069 300.001 49.8529 300.001 44.6029V37.8229L272.459 37.8239Z"
fill={ipgTextColour}
/>
<path
d="M136.681 68.385H135.315L131.22 75.31H132.76L133.581 73.936H138.416L139.234 75.31H140.779L136.681 68.385ZM135.997 69.807L137.72 72.738H134.273L135.997 69.807Z"
fill={automotiveTextColour}
/>
<path
d="M156.974 68.385V73.433C156.974 73.725 156.907 73.915 156.769 74.014C156.682 74.078 156.448 74.185 155.837 74.185H152.821C152.227 74.185 151.974 74.088 151.872 74.011C151.707 73.878 151.672 73.596 151.672 73.383V68.385H150.319V73.386C150.319 74.153 150.53 74.688 150.949 74.978C151.345 75.249 151.949 75.381 152.796 75.381H155.89C156.727 75.381 157.321 75.247 157.707 74.971C158.121 74.675 158.329 74.157 158.329 73.433V68.385H156.974Z"
fill={automotiveTextColour}
/>
<path
d="M168.063 68.385V69.583H171.321V75.31H172.67V69.583H175.929V68.385H168.063Z"
fill={automotiveTextColour}
/>
<path
d="M193.67 68.9699C193.275 68.5299 192.63 68.3159 191.698 68.3159H188.053C187.144 68.3159 186.502 68.5199 186.092 68.9369C185.684 69.3469 185.478 70.0059 185.478 70.8959V72.7999C185.478 73.6889 185.684 74.3499 186.092 74.7659C186.499 75.1749 187.159 75.3809 188.053 75.3809H191.698C192.6 75.3809 193.258 75.1699 193.652 74.7559C194.049 74.3429 194.249 73.6799 194.249 72.7859V70.9219C194.249 70.0309 194.059 69.3919 193.67 68.9699ZM192.894 70.6709V73.0369C192.894 73.4339 192.801 73.7299 192.621 73.9109C192.433 74.0919 192.099 74.1839 191.629 74.1839H188.126C187.652 74.1839 187.314 74.0939 187.121 73.9149C186.931 73.7439 186.834 73.4459 186.834 73.0279V70.6599C186.834 70.2589 186.921 69.9729 187.099 69.7879C187.274 69.6069 187.63 69.5109 188.127 69.5109H191.63C192.087 69.5109 192.419 69.5989 192.612 69.7719C192.798 69.9429 192.894 70.2459 192.894 70.6709Z"
fill={automotiveTextColour}
/>
<path
d="M213.396 68.385L209.799 73.613L206.192 68.385H204.463V75.31H205.811V70.157L209.359 75.31H210.235L213.771 70.159V75.31H215.125V68.385H213.396Z"
fill={automotiveTextColour}
/>
<path
d="M233.559 68.9699C233.168 68.5369 232.505 68.3169 231.589 68.3169H227.942C227.03 68.3169 226.389 68.5209 225.98 68.9379C225.574 69.3469 225.369 70.0049 225.369 70.8969V72.7999C225.369 73.6909 225.575 74.3519 225.98 74.7659C226.386 75.1749 227.046 75.3809 227.942 75.3809H231.589C232.493 75.3809 233.15 75.1699 233.538 74.7569C233.94 74.3469 234.134 73.7019 234.134 72.7849V70.9209C234.134 70.0319 233.947 69.3929 233.559 68.9699ZM232.782 70.6709V73.0369C232.782 73.4349 232.688 73.7299 232.504 73.9129C232.325 74.0909 231.982 74.1839 231.516 74.1839H228.013C227.541 74.1839 227.201 74.0939 227.008 73.9169C226.82 73.7419 226.723 73.4429 226.723 73.0279V70.6599C226.723 70.2679 226.814 69.9739 226.996 69.7849C227.165 69.6059 227.516 69.5109 228.013 69.5109H231.516C231.978 69.5109 232.309 69.5989 232.5 69.7729C232.687 69.9409 232.782 70.2439 232.782 70.6709Z"
fill={automotiveTextColour}
/>
<path
d="M243.69 68.385V69.583H246.948V75.31H248.296V69.583H251.552V68.385H243.69Z"
fill={automotiveTextColour}
/>
<path
d="M262.666 68.385H261.313V75.31H262.666V68.385Z"
fill={automotiveTextColour}
/>
<path
d="M279.722 68.385L276.78 73.779L273.84 68.385H272.316L276.111 75.31H277.456L281.253 68.385H279.722Z"
fill={automotiveTextColour}
/>
<path
d="M292.245 74.115V72.358H297.431V71.161H292.245V69.583H297.647V68.385H290.895V75.31H297.688V74.115H292.245Z"
fill={automotiveTextColour}
/>
<path
fillRule="evenodd"
clipRule="evenodd"
d="M107.793 17.7351C108.068 18.9751 104.464 19.4801 104.464 20.8001V59.2501C104.464 71.3811 91.443 81.2241 75.509 81.2241H25.044C19.663 81.0611 17.649 80.1441 12.433 77.9831C36.775 73.7191 53.412 72.1201 58.881 64.0151C63.184 55.9551 51.633 46.6521 58.187 38.5151C66.981 27.5451 92.836 20.6801 107.793 17.7351Z"
fill="url(#paint0_linear_1392_21101)"
/>
<path
fillRule="evenodd"
clipRule="evenodd"
d="M107.912 17.696C108.226 18.938 108.344 20.219 108.344 21.532V59.982C108.344 72.12 95.355 82 79.421 82H28.96C22.794 82 17.06 80.488 12.365 77.97C37.636 76.109 57.563 73.241 63.031 65.177C67.334 57.08 56.088 46.613 62.45 39.87C72.487 29.284 99.658 20.989 107.912 17.696Z"
fill="url(#paint1_linear_1392_21101)"
/>
<path
fillRule="evenodd"
clipRule="evenodd"
d="M32.641 2.98505L83.22 0.272054C84.772 0.195054 82.524 0.236054 83.997 0.425054C82.838 7.13405 80.627 11.2811 72.64 15.9311C61.324 23.0991 56.361 25.7001 43.76 33.9571C34.266 40.7001 45.162 52.7521 42.487 59.7311C39.769 66.9411 19.693 73.6841 6.70601 74.576C2.52201 70.7391 3.72101 68.8051 3.72101 63.4911V25.0001C3.72201 12.9081 16.744 3.83905 32.641 2.98505Z"
fill="url(#paint2_linear_1392_21101)"
/>
<path
fillRule="evenodd"
clipRule="evenodd"
d="M28.96 0H79.421C80.973 0 82.525 0.117 83.998 0.312C81.558 4.264 79.078 8.293 71.092 12.946C50.318 24.576 46.594 25.506 39.966 30.198C30.468 36.939 41.44 49.807 38.803 56.783C36.052 63.994 18.998 71.553 6.708 74.575C2.523 70.738 0 65.857 0 60.503V22.053C0 9.923 13.024 0 28.96 0Z"
fill="url(#paint3_linear_1392_21101)"
/>
</g>
<defs>
<linearGradient
id="paint0_linear_1392_21101"
x1="30.534"
y1="100.22"
x2="111.187"
y2="19.5665"
gradientUnits="userSpaceOnUse"
>
<stop stopColor="#004174" />
<stop offset="0.25" stopColor="#82B5E2" />
<stop offset="0.44" stopColor="#00518E" />
<stop offset="0.54" stopColor="#AFCDEC" />
<stop offset="0.61" stopColor="#BCD4F0" />
<stop offset="1" stopColor="#549AD4" />
</linearGradient>
<linearGradient
id="paint1_linear_1392_21101"
x1="29.1238"
y1="3.53984"
x2="93.029"
y2="94.8059"
gradientUnits="userSpaceOnUse"
>
<stop stopColor="#2E91D0" />
<stop offset="0.5" stopColor="#2580C3" />
<stop offset="1" stopColor="#005495" />
</linearGradient>
<linearGradient
id="paint2_linear_1392_21101"
x1="-7.39059"
y1="64.5213"
x2="79.0665"
y2="-8.02475"
gradientUnits="userSpaceOnUse"
>
<stop stopColor="#A69700" />
<stop offset="0.33" stopColor="#EFCF00" />
<stop offset="0.4" stopColor="#DAC000" />
<stop offset="0.49" stopColor="#BFAB00" />
<stop offset="0.59" stopColor="#DBC100" />
<stop offset="0.7" stopColor="#EFCF00" />
<stop offset="0.88" stopColor="#ECD100" />
<stop offset="1" stopColor="#C8B300" />
</linearGradient>
<linearGradient
id="paint3_linear_1392_21101"
x1="3.442"
y1="-4.4502"
x2="83.4853"
y2="75.593"
gradientUnits="userSpaceOnUse"
>
<stop stopColor="#FFF381" />
<stop offset="1" stopColor="#FFE800" />
</linearGradient>
<clipPath id="clip0_1392_21101">
<rect width="300" height="82" fill="white" />
</clipPath>
</defs>
</SvgIcon>
);
}
// IPG logo component
export default function IpgLogo({ textColour, sx }: IpgLogoProps) {
return <Icon textColour={textColour} sx={sx} />;
}