Skip to content

Commit e749607

Browse files
authored
[dev-overlay] fix: svg icon ids are not unique (#76566)
### Why? The Node.js icon's gradient was breaking when opening the preferences tab. It is because they shared the same `clipPath` id as `#a`. ### How? Modified the SVG ids unique by adding a prefix of their filename and what they're for. ### Before https://github.com/user-attachments/assets/842e8b0b-975f-424c-b867-675df57e4f4c ### After https://github.com/user-attachments/assets/03292fae-1dcd-4d1f-a8b0-8edb98f14aee
1 parent b98d8f8 commit e749607

File tree

5 files changed

+46
-40
lines changed

5 files changed

+46
-40
lines changed

packages/next/src/client/components/react-dev-overlay/ui/components/errors/dev-tools-indicator/next-logo.tsx

+6-6
Original file line numberDiff line numberDiff line change
@@ -555,24 +555,24 @@ function NextMark({
555555
className={isLoading ? 'path0' : 'paused'}
556556
d="M13.3 15.2 L2.34 1 V12.6"
557557
fill="none"
558-
stroke="url(#paint0_linear_1357_10853)"
558+
stroke="url(#next_logo_paint0_linear_1357_10853)"
559559
strokeWidth="1.86"
560-
mask="url(#mask0)"
560+
mask="url(#next_logo_mask0)"
561561
strokeDasharray="29.6"
562562
strokeDashoffset="29.6"
563563
/>
564564
<path
565565
className={isLoading ? 'path1' : 'paused'}
566566
d="M11.825 1.5 V13.1"
567567
strokeWidth="1.86"
568-
stroke="url(#paint1_linear_1357_10853)"
568+
stroke="url(#next_logo_paint1_linear_1357_10853)"
569569
strokeDasharray="11.6"
570570
strokeDashoffset="11.6"
571571
/>
572572
</g>
573573
<defs>
574574
<linearGradient
575-
id="paint0_linear_1357_10853"
575+
id="next_logo_paint0_linear_1357_10853"
576576
x1="9.95555"
577577
y1="11.1226"
578578
x2="15.4778"
@@ -584,7 +584,7 @@ function NextMark({
584584
<stop offset="1" stopColor={strokeColor} stopOpacity="0" />
585585
</linearGradient>
586586
<linearGradient
587-
id="paint1_linear_1357_10853"
587+
id="next_logo_paint1_linear_1357_10853"
588588
x1="11.8222"
589589
y1="1.40039"
590590
x2="11.791"
@@ -594,7 +594,7 @@ function NextMark({
594594
<stop stopColor={strokeColor} />
595595
<stop offset="1" stopColor={strokeColor} stopOpacity="0" />
596596
</linearGradient>
597-
<mask id="mask0">
597+
<mask id="next_logo_mask0">
598598
<rect width="100%" height="100%" fill="white" />
599599
<rect width="5" height="1.5" fill="black" />
600600
</mask>

packages/next/src/client/components/react-dev-overlay/ui/components/errors/error-overlay-nav/error-overlay-nav.tsx

+6-6
Original file line numberDiff line numberDiff line change
@@ -132,7 +132,7 @@ function Tail() {
132132
preserveAspectRatio="none"
133133
>
134134
<mask
135-
id="mask0_2667_14687"
135+
id="error_overlay_nav_mask0_2667_14687"
136136
style={{
137137
maskType: 'alpha',
138138
}}
@@ -143,7 +143,7 @@ function Tail() {
143143
height="43"
144144
>
145145
<mask
146-
id="path-1-outside-1_2667_14687"
146+
id="error_overlay_nav_path_1_outside_1_2667_14687"
147147
maskUnits="userSpaceOnUse"
148148
x="0"
149149
y="-1"
@@ -161,12 +161,12 @@ function Tail() {
161161
<path
162162
d="M1 0V-1H0V0L1 0ZM1 41H0V42H1V41ZM34.8889 29.6498L33.9873 30.0823L34.8889 29.6498ZM26.111 11.3501L27.0127 10.9177L26.111 11.3501ZM1 1H8.0783V-1H1V1ZM60 40H1V42H60V40ZM2 41V0L0 0L0 41H2ZM25.2094 11.7826L33.9873 30.0823L35.7906 29.2174L27.0127 10.9177L25.2094 11.7826ZM52.9217 42H60V40H52.9217V42ZM33.9873 30.0823C37.4811 37.3661 44.8433 42 52.9217 42V40C45.6127 40 38.9517 35.8074 35.7906 29.2174L33.9873 30.0823ZM8.0783 1C15.3873 1 22.0483 5.19257 25.2094 11.7826L27.0127 10.9177C23.5188 3.6339 16.1567 -1 8.0783 -1V1Z"
163163
fill="black"
164-
mask="url(#path-1-outside-1_2667_14687)"
164+
mask="url(#error_overlay_nav_path_1_outside_1_2667_14687)"
165165
/>
166166
</mask>
167-
<g mask="url(#mask0_2667_14687)">
167+
<g mask="url(#error_overlay_nav_mask0_2667_14687)">
168168
<mask
169-
id="path-3-outside-2_2667_14687"
169+
id="error_overlay_nav_path_3_outside_2_2667_14687"
170170
maskUnits="userSpaceOnUse"
171171
x="-1"
172172
y="0.0244141"
@@ -184,7 +184,7 @@ function Tail() {
184184
<path
185185
d="M0 1.02441L0 0.0244141H-1V1.02441H0ZM0 42.0244H-1V43.0244H0L0 42.0244ZM33.8889 30.6743L32.9873 31.1068L33.8889 30.6743ZM25.111 12.3746L26.0127 11.9421L25.111 12.3746ZM0 2.02441H7.0783V0.0244141H0L0 2.02441ZM59 41.0244H0L0 43.0244H59V41.0244ZM1 42.0244L1 1.02441H-1L-1 42.0244H1ZM24.2094 12.8071L32.9873 31.1068L34.7906 30.2418L26.0127 11.9421L24.2094 12.8071ZM51.9217 43.0244H59V41.0244H51.9217V43.0244ZM32.9873 31.1068C36.4811 38.3905 43.8433 43.0244 51.9217 43.0244V41.0244C44.6127 41.0244 37.9517 36.8318 34.7906 30.2418L32.9873 31.1068ZM7.0783 2.02441C14.3873 2.02441 21.0483 6.21699 24.2094 12.8071L26.0127 11.9421C22.5188 4.65831 15.1567 0.0244141 7.0783 0.0244141V2.02441Z"
186186
fill="var(--stroke-color)"
187-
mask="url(#path-3-outside-2_2667_14687)"
187+
mask="url(#error_overlay_nav_path_3_outside_2_2667_14687)"
188188
/>
189189
</g>
190190
</svg>

packages/next/src/client/components/react-dev-overlay/ui/components/errors/error-overlay-toolbar/nodejs-inspector-button.tsx

+30-24
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,7 @@ function NodeJsIcon(props: any) {
2727
{...props}
2828
>
2929
<mask
30-
id="a"
30+
id="nodejs_icon_mask_a"
3131
style={{ maskType: 'luminance' }}
3232
maskUnits="userSpaceOnUse"
3333
x="0"
@@ -40,14 +40,14 @@ function NodeJsIcon(props: any) {
4040
fill="#fff"
4141
/>
4242
</mask>
43-
<g mask="url(#a)">
43+
<g mask="url(#nodejs_icon_mask_a)">
4444
<path
4545
d="M18.648 2.717 3.248-4.86-4.648 11.31l15.4 7.58 7.896-16.174z"
46-
fill="url(#b)"
46+
fill="url(#nodejs_icon_linear_gradient_b)"
4747
/>
4848
</g>
4949
<mask
50-
id="c"
50+
id="nodejs_icon_mask_c"
5151
style={{ maskType: 'luminance' }}
5252
maskUnits="userSpaceOnUse"
5353
x="1"
@@ -60,15 +60,15 @@ function NodeJsIcon(props: any) {
6060
fill="#fff"
6161
/>
6262
</mask>
63-
<g mask="url(#c)">
63+
<g mask="url(#nodejs_icon_mask_c)">
6464
<path
6565
d="M-5.647 4.958 5.226 19.734l14.38-10.667L8.734-5.71-5.647 4.958z"
66-
fill="url(#d)"
66+
fill="url(#nodejs_icon_linear_gradient_d)"
6767
/>
6868
</g>
6969
<g>
7070
<mask
71-
id="e"
71+
id="nodejs_icon_mask_e"
7272
style={{ maskType: 'luminance' }}
7373
maskUnits="userSpaceOnUse"
7474
x="1"
@@ -81,13 +81,16 @@ function NodeJsIcon(props: any) {
8181
fill="#fff"
8282
/>
8383
</mask>
84-
<g mask="url(#e)">
85-
<path d="M1.22.002v13.992h11.894V.002H1.22z" fill="url(#f)" />
84+
<g mask="url(#nodejs_icon_mask_e)">
85+
<path
86+
d="M1.22.002v13.992h11.894V.002H1.22z"
87+
fill="url(#nodejs_icon_linear_gradient_f)"
88+
/>
8689
</g>
8790
</g>
8891
<defs>
8992
<linearGradient
90-
id="b"
93+
id="nodejs_icon_linear_gradient_b"
9194
x1="10.943"
9295
y1="-1.084"
9396
x2="2.997"
@@ -99,7 +102,7 @@ function NodeJsIcon(props: any) {
99102
<stop offset=".8" stopColor="#5AAD45" />
100103
</linearGradient>
101104
<linearGradient
102-
id="d"
105+
id="nodejs_icon_linear_gradient_d"
103106
x1="-.145"
104107
y1="12.431"
105108
x2="14.277"
@@ -111,7 +114,7 @@ function NodeJsIcon(props: any) {
111114
<stop offset="1" stopColor="#76AC64" />
112115
</linearGradient>
113116
<linearGradient
114-
id="f"
117+
id="nodejs_icon_linear_gradient_f"
115118
x1="1.225"
116119
y1="6.998"
117120
x2="13.116"
@@ -140,7 +143,7 @@ function NodeJsDisabledIcon(props: any) {
140143
{...props}
141144
>
142145
<mask
143-
id="a"
146+
id="nodejs_icon_mask_a"
144147
style={{ maskType: 'luminance' }}
145148
maskUnits="userSpaceOnUse"
146149
x="0"
@@ -153,14 +156,14 @@ function NodeJsDisabledIcon(props: any) {
153156
fill="#fff"
154157
/>
155158
</mask>
156-
<g mask="url(#a)">
159+
<g mask="url(#nodejs_icon_mask_a)">
157160
<path
158161
d="M18.648 2.717 3.248-4.86-4.646 11.31l15.399 7.58 7.896-16.174z"
159-
fill="url(#b)"
162+
fill="url(#nodejs_icon_linear_gradient_b)"
160163
/>
161164
</g>
162165
<mask
163-
id="c"
166+
id="nodejs_icon_mask_c"
164167
style={{ maskType: 'luminance' }}
165168
maskUnits="userSpaceOnUse"
166169
x="1"
@@ -173,15 +176,15 @@ function NodeJsDisabledIcon(props: any) {
173176
fill="#fff"
174177
/>
175178
</mask>
176-
<g mask="url(#c)">
179+
<g mask="url(#nodejs_icon_mask_c)">
177180
<path
178181
d="M-5.647 4.96 5.226 19.736 19.606 9.07 8.734-5.707-5.647 4.96z"
179-
fill="url(#d)"
182+
fill="url(#nodejs_icon_linear_gradient_d)"
180183
/>
181184
</g>
182185
<g>
183186
<mask
184-
id="e"
187+
id="nodejs_icon_mask_e"
185188
style={{ maskType: 'luminance' }}
186189
maskUnits="userSpaceOnUse"
187190
x="1"
@@ -194,13 +197,16 @@ function NodeJsDisabledIcon(props: any) {
194197
fill="#fff"
195198
/>
196199
</mask>
197-
<g mask="url(#e)">
198-
<path d="M1.222.001v13.992h11.893V0H1.222z" fill="url(#f)" />
200+
<g mask="url(#nodejs_icon_mask_e)">
201+
<path
202+
d="M1.222.001v13.992h11.893V0H1.222z"
203+
fill="url(#nodejs_icon_linear_gradient_f)"
204+
/>
199205
</g>
200206
</g>
201207
<defs>
202208
<linearGradient
203-
id="b"
209+
id="nodejs_icon_linear_gradient_b"
204210
x1="10.944"
205211
y1="-1.084"
206212
x2="2.997"
@@ -212,7 +218,7 @@ function NodeJsDisabledIcon(props: any) {
212218
<stop offset=".8" stopColor="#989A98" />
213219
</linearGradient>
214220
<linearGradient
215-
id="d"
221+
id="nodejs_icon_linear_gradient_d"
216222
x1="-.145"
217223
y1="12.433"
218224
x2="14.277"
@@ -224,7 +230,7 @@ function NodeJsDisabledIcon(props: any) {
224230
<stop offset="1" stopColor="#929292" />
225231
</linearGradient>
226232
<linearGradient
227-
id="f"
233+
id="nodejs_icon_linear_gradient_f"
228234
x1="1.226"
229235
y1="6.997"
230236
x2="13.117"

packages/next/src/client/components/react-dev-overlay/ui/icons/file.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -89,7 +89,7 @@ function File() {
8989
function React() {
9090
return (
9191
<svg height="16" strokeLinejoin="round" viewBox="0 0 16 16" width="16">
92-
<g clipPath="url(#clip0_872_3183)">
92+
<g clipPath="url(#file_react_clip0_872_3183)">
9393
<path
9494
fillRule="evenodd"
9595
clipRule="evenodd"
@@ -98,7 +98,7 @@ function React() {
9898
/>
9999
</g>
100100
<defs>
101-
<clipPath id="clip0_872_3183">
101+
<clipPath id="file_react_clip0_872_3183">
102102
<rect width="16" height="16" fill="white"></rect>
103103
</clipPath>
104104
</defs>

packages/next/src/client/components/react-dev-overlay/ui/icons/light-icon.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ export default function LightIcon() {
77
viewBox="0 0 16 16"
88
fill="none"
99
>
10-
<g clipPath="url(#a)">
10+
<g clipPath="url(#light_icon_clip_path)">
1111
<path
1212
fill="currentColor"
1313
fillRule="evenodd"
@@ -16,7 +16,7 @@ export default function LightIcon() {
1616
/>
1717
</g>
1818
<defs>
19-
<clipPath id="a">
19+
<clipPath id="light_icon_clip_path">
2020
<path fill="currentColor" d="M0 0h16v16H0z" />
2121
</clipPath>
2222
</defs>

0 commit comments

Comments
 (0)