[dev-overlay] fix: svg icon ids are not unique (#76566)

devjiwonchoi · web-flow · commit e74960774078 · 2025-02-27T03:47:32.000+09:00
### 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
diff --git a/packages/next/src/client/components/react-dev-overlay/ui/components/errors/dev-tools-indicator/next-logo.tsx b/packages/next/src/client/components/react-dev-overlay/ui/components/errors/dev-tools-indicator/next-logo.tsx
@@ -555,24 +555,24 @@ function NextMark({
           className={isLoading ? 'path0' : 'paused'}
           d="M13.3 15.2 L2.34 1 V12.6"
           fill="none"
-          stroke="url(#paint0_linear_1357_10853)"
+          stroke="url(#next_logo_paint0_linear_1357_10853)"
           strokeWidth="1.86"
-          mask="url(#mask0)"
+          mask="url(#next_logo_mask0)"
           strokeDasharray="29.6"
           strokeDashoffset="29.6"
         />
         <path
           className={isLoading ? 'path1' : 'paused'}
           d="M11.825 1.5 V13.1"
           strokeWidth="1.86"
-          stroke="url(#paint1_linear_1357_10853)"
+          stroke="url(#next_logo_paint1_linear_1357_10853)"
           strokeDasharray="11.6"
           strokeDashoffset="11.6"
         />
       </g>
       <defs>
         <linearGradient
-          id="paint0_linear_1357_10853"
+          id="next_logo_paint0_linear_1357_10853"
           x1="9.95555"
           y1="11.1226"
           x2="15.4778"
@@ -584,7 +584,7 @@ function NextMark({
           <stop offset="1" stopColor={strokeColor} stopOpacity="0" />
         </linearGradient>
         <linearGradient
-          id="paint1_linear_1357_10853"
+          id="next_logo_paint1_linear_1357_10853"
           x1="11.8222"
           y1="1.40039"
           x2="11.791"
@@ -594,7 +594,7 @@ function NextMark({
           <stop stopColor={strokeColor} />
           <stop offset="1" stopColor={strokeColor} stopOpacity="0" />
         </linearGradient>
-        <mask id="mask0">
+        <mask id="next_logo_mask0">
           <rect width="100%" height="100%" fill="white" />
           <rect width="5" height="1.5" fill="black" />
         </mask>
diff --git a/packages/next/src/client/components/react-dev-overlay/ui/components/errors/error-overlay-nav/error-overlay-nav.tsx b/packages/next/src/client/components/react-dev-overlay/ui/components/errors/error-overlay-nav/error-overlay-nav.tsx
@@ -132,7 +132,7 @@ function Tail() {
       preserveAspectRatio="none"
     >
       <mask
-        id="mask0_2667_14687"
+        id="error_overlay_nav_mask0_2667_14687"
         style={{
           maskType: 'alpha',
         }}
@@ -143,7 +143,7 @@ function Tail() {
         height="43"
       >
         <mask
-          id="path-1-outside-1_2667_14687"
+          id="error_overlay_nav_path_1_outside_1_2667_14687"
           maskUnits="userSpaceOnUse"
           x="0"
           y="-1"
@@ -161,12 +161,12 @@ function Tail() {
         <path
           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"
           fill="black"
-          mask="url(#path-1-outside-1_2667_14687)"
+          mask="url(#error_overlay_nav_path_1_outside_1_2667_14687)"
         />
       </mask>
-      <g mask="url(#mask0_2667_14687)">
+      <g mask="url(#error_overlay_nav_mask0_2667_14687)">
         <mask
-          id="path-3-outside-2_2667_14687"
+          id="error_overlay_nav_path_3_outside_2_2667_14687"
           maskUnits="userSpaceOnUse"
           x="-1"
           y="0.0244141"
@@ -184,7 +184,7 @@ function Tail() {
         <path
           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"
           fill="var(--stroke-color)"
-          mask="url(#path-3-outside-2_2667_14687)"
+          mask="url(#error_overlay_nav_path_3_outside_2_2667_14687)"
         />
       </g>
     </svg>
diff --git a/packages/next/src/client/components/react-dev-overlay/ui/components/errors/error-overlay-toolbar/nodejs-inspector-button.tsx b/packages/next/src/client/components/react-dev-overlay/ui/components/errors/error-overlay-toolbar/nodejs-inspector-button.tsx
@@ -27,7 +27,7 @@ function NodeJsIcon(props: any) {
       {...props}
     >
       <mask
-        id="a"
+        id="nodejs_icon_mask_a"
         style={{ maskType: 'luminance' }}
         maskUnits="userSpaceOnUse"
         x="0"
@@ -40,14 +40,14 @@ function NodeJsIcon(props: any) {
           fill="#fff"
         />
       </mask>
-      <g mask="url(#a)">
+      <g mask="url(#nodejs_icon_mask_a)">
         <path
           d="M18.648 2.717 3.248-4.86-4.648 11.31l15.4 7.58 7.896-16.174z"
-          fill="url(#b)"
+          fill="url(#nodejs_icon_linear_gradient_b)"
         />
       </g>
       <mask
-        id="c"
+        id="nodejs_icon_mask_c"
         style={{ maskType: 'luminance' }}
         maskUnits="userSpaceOnUse"
         x="1"
@@ -60,15 +60,15 @@ function NodeJsIcon(props: any) {
           fill="#fff"
         />
       </mask>
-      <g mask="url(#c)">
+      <g mask="url(#nodejs_icon_mask_c)">
         <path
           d="M-5.647 4.958 5.226 19.734l14.38-10.667L8.734-5.71-5.647 4.958z"
-          fill="url(#d)"
+          fill="url(#nodejs_icon_linear_gradient_d)"
         />
       </g>
       <g>
         <mask
-          id="e"
+          id="nodejs_icon_mask_e"
           style={{ maskType: 'luminance' }}
           maskUnits="userSpaceOnUse"
           x="1"
@@ -81,13 +81,16 @@ function NodeJsIcon(props: any) {
             fill="#fff"
           />
         </mask>
-        <g mask="url(#e)">
-          <path d="M1.22.002v13.992h11.894V.002H1.22z" fill="url(#f)" />
+        <g mask="url(#nodejs_icon_mask_e)">
+          <path
+            d="M1.22.002v13.992h11.894V.002H1.22z"
+            fill="url(#nodejs_icon_linear_gradient_f)"
+          />
         </g>
       </g>
       <defs>
         <linearGradient
-          id="b"
+          id="nodejs_icon_linear_gradient_b"
           x1="10.943"
           y1="-1.084"
           x2="2.997"
@@ -99,7 +102,7 @@ function NodeJsIcon(props: any) {
           <stop offset=".8" stopColor="#5AAD45" />
         </linearGradient>
         <linearGradient
-          id="d"
+          id="nodejs_icon_linear_gradient_d"
           x1="-.145"
           y1="12.431"
           x2="14.277"
@@ -111,7 +114,7 @@ function NodeJsIcon(props: any) {
           <stop offset="1" stopColor="#76AC64" />
         </linearGradient>
         <linearGradient
-          id="f"
+          id="nodejs_icon_linear_gradient_f"
           x1="1.225"
           y1="6.998"
           x2="13.116"
@@ -140,7 +143,7 @@ function NodeJsDisabledIcon(props: any) {
       {...props}
     >
       <mask
-        id="a"
+        id="nodejs_icon_mask_a"
         style={{ maskType: 'luminance' }}
         maskUnits="userSpaceOnUse"
         x="0"
@@ -153,14 +156,14 @@ function NodeJsDisabledIcon(props: any) {
           fill="#fff"
         />
       </mask>
-      <g mask="url(#a)">
+      <g mask="url(#nodejs_icon_mask_a)">
         <path
           d="M18.648 2.717 3.248-4.86-4.646 11.31l15.399 7.58 7.896-16.174z"
-          fill="url(#b)"
+          fill="url(#nodejs_icon_linear_gradient_b)"
         />
       </g>
       <mask
-        id="c"
+        id="nodejs_icon_mask_c"
         style={{ maskType: 'luminance' }}
         maskUnits="userSpaceOnUse"
         x="1"
@@ -173,15 +176,15 @@ function NodeJsDisabledIcon(props: any) {
           fill="#fff"
         />
       </mask>
-      <g mask="url(#c)">
+      <g mask="url(#nodejs_icon_mask_c)">
         <path
           d="M-5.647 4.96 5.226 19.736 19.606 9.07 8.734-5.707-5.647 4.96z"
-          fill="url(#d)"
+          fill="url(#nodejs_icon_linear_gradient_d)"
         />
       </g>
       <g>
         <mask
-          id="e"
+          id="nodejs_icon_mask_e"
           style={{ maskType: 'luminance' }}
           maskUnits="userSpaceOnUse"
           x="1"
@@ -194,13 +197,16 @@ function NodeJsDisabledIcon(props: any) {
             fill="#fff"
           />
         </mask>
-        <g mask="url(#e)">
-          <path d="M1.222.001v13.992h11.893V0H1.222z" fill="url(#f)" />
+        <g mask="url(#nodejs_icon_mask_e)">
+          <path
+            d="M1.222.001v13.992h11.893V0H1.222z"
+            fill="url(#nodejs_icon_linear_gradient_f)"
+          />
         </g>
       </g>
       <defs>
         <linearGradient
-          id="b"
+          id="nodejs_icon_linear_gradient_b"
           x1="10.944"
           y1="-1.084"
           x2="2.997"
@@ -212,7 +218,7 @@ function NodeJsDisabledIcon(props: any) {
           <stop offset=".8" stopColor="#989A98" />
         </linearGradient>
         <linearGradient
-          id="d"
+          id="nodejs_icon_linear_gradient_d"
           x1="-.145"
           y1="12.433"
           x2="14.277"
@@ -224,7 +230,7 @@ function NodeJsDisabledIcon(props: any) {
           <stop offset="1" stopColor="#929292" />
         </linearGradient>
         <linearGradient
-          id="f"
+          id="nodejs_icon_linear_gradient_f"
           x1="1.226"
           y1="6.997"
           x2="13.117"
diff --git a/packages/next/src/client/components/react-dev-overlay/ui/icons/file.tsx b/packages/next/src/client/components/react-dev-overlay/ui/icons/file.tsx
@@ -89,7 +89,7 @@ function File() {
 function React() {
   return (
     <svg height="16" strokeLinejoin="round" viewBox="0 0 16 16" width="16">
-      <g clipPath="url(#clip0_872_3183)">
+      <g clipPath="url(#file_react_clip0_872_3183)">
         <path
           fillRule="evenodd"
           clipRule="evenodd"
@@ -98,7 +98,7 @@ function React() {
         />
       </g>
       <defs>
-        <clipPath id="clip0_872_3183">
+        <clipPath id="file_react_clip0_872_3183">
           <rect width="16" height="16" fill="white"></rect>
         </clipPath>
       </defs>
diff --git a/packages/next/src/client/components/react-dev-overlay/ui/icons/light-icon.tsx b/packages/next/src/client/components/react-dev-overlay/ui/icons/light-icon.tsx
@@ -7,7 +7,7 @@ export default function LightIcon() {
       viewBox="0 0 16 16"
       fill="none"
     >
-      <g clipPath="url(#a)">
+      <g clipPath="url(#light_icon_clip_path)">
         <path
           fill="currentColor"
           fillRule="evenodd"
@@ -16,7 +16,7 @@ export default function LightIcon() {
         />
       </g>
       <defs>
-        <clipPath id="a">
+        <clipPath id="light_icon_clip_path">
           <path fill="currentColor" d="M0 0h16v16H0z" />
         </clipPath>
       </defs>
