Replace Seat <svg> elements with <use>

For comparison [see this commit] Nothing exciting here. The ergonomics is similar to the Stimulus version. [commit]: seanpdoyle@60c9cb2
thoughtbot · Oct 8, 2023 · f35b288 · f35b288
1 parent 4bcbac1
commit f35b288
Showing 1 changed file with 18 additions and 4 deletions.
diff --git a/app/views/seats/index.js b/app/views/seats/index.js
@@ -11,10 +11,13 @@ const buildSectionElements = (sections) => {
         aria-label={seat.ariaLabel}
         key={seat.venueFloorSeatPath}
        >
-        <svg width="12px" height="12px" viewBox="0 0 24 24" x={seat.x} y={seat.y}>
-          <circle fill="#37b24d" r="12" cx="12" cy="12"></circle>
-          <circle fill="#ffffff" r="6" cx="12" cy="12"></circle>
-        </svg>
+        <use
+          width="12px"
+          height="12px"
+          xlinkHref="#seat-icon-unselected"
+          x={seat.x}
+          y={seat.y}
+        />
       </a>
     ))
 
@@ -55,6 +58,17 @@ export default (props) => {
               viewBox="0 0 1600 1600"
             >
               <rect fill="none" x="0" y="0" width="1600" height="1600"></rect>
+              <svg style={{display: "none"}}>
+                <symbol
+                  id="seat-icon-unselected"
+                  width="24"
+                  height="24"
+                  viewBox="0 0 24 24"
+                >
+                  <circle fill="#37b24d" r="12" cx="12" cy="12"></circle>
+                  <circle fill="#ffffff" r="6" cx="12" cy="12"></circle>
+                </symbol>
+              </svg>
               { sectionElements }
             </svg>
           </div>