Fix(web-twig): SVG id must have a valid ID attribute value

lmc-eu · Jan 28, 2025 · 30b8700 · 30b8700
1 parent 2b5daa9
commit 30b8700
Show file tree

Hide file tree

Showing 31 changed files with 67 additions and 66 deletions.
diff --git a/...rc/Resources/components/Accordion/__tests__/__snapshots__/accordionDefault.twig.snap.html b/...rc/Resources/components/Accordion/__tests__/__snapshots__/accordionDefault.twig.snap.html
@@ -8,7 +8,7 @@
     <section id="accordion-example" class="Accordion">
       <article id="accordion-item-example-0" class="Accordion__item">
         <h3 id="accordion-item-example-0-header" class="Accordion__itemHeader">
-          <button type="button" class="Accordion__itemToggle" data-spirit-toggle="collapse" data-spirit-target="accordion-item-example-0-content" aria-expanded="false" aria-controls="accordion-item-example-0-content">Accordion Header</button> <span class="Accordion__itemSide"><span class="Accordion__itemSlot"><span>my HTML content</span></span> <span class="Accordion__itemIcon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewbox="0 0 24 24" fill="none" id="e4d24000792e7660bc881b0a7e9ee481" aria-hidden="true">
+          <button type="button" class="Accordion__itemToggle" data-spirit-toggle="collapse" data-spirit-target="accordion-item-example-0-content" aria-expanded="false" aria-controls="accordion-item-example-0-content">Accordion Header</button> <span class="Accordion__itemSide"><span class="Accordion__itemSlot"><span>my HTML content</span></span> <span class="Accordion__itemIcon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewbox="0 0 24 24" fill="none" id="svg_e4d24000792e7660bc881b0a7e9ee481" aria-hidden="true">
           <path d="M15.88 9.63479L12 13.5148L8.11998 9.63479C7.72998 9.24479 7.09998 9.24479 6.70998 9.63479C6.31998 10.0248 6.31998 10.6548 6.70998 11.0448L11.3 15.6348C11.69 16.0248 12.32 16.0248 12.71 15.6348L17.3 11.0448C17.69 10.6548 17.69 10.0248 17.3 9.63479C16.91 9.25479 16.27 9.24479 15.88 9.63479Z" fill="currentColor">
           </path></svg></span></span>
         </h3>
@@ -25,7 +25,7 @@ <h3 id="accordion-item-example-0-header" class="Accordion__itemHeader">
       <article id="accordion-item-example-1" class="Accordion__item">
         <h3 id="accordion-item-example-1-header" class="Accordion__itemHeader">
           <button type="button" class="Accordion__itemToggle" data-spirit-toggle="collapse" data-spirit-target="accordion-item-example-1-content" aria-expanded="true" aria-controls="accordion-item-example-1-content">Accordion Header</button> <span class="Accordion__itemSide"><span class="Accordion__itemIcon"><svg width="24" height="24" fill="none" viewbox="0 0 24 24" aria-hidden="true">
-          <use href="#e4d24000792e7660bc881b0a7e9ee481">
+          <use href="#svg_e4d24000792e7660bc881b0a7e9ee481">
           </use></svg></span></span>
         </h3>
 

diff --git a/...c/Resources/components/Accordion/__tests__/__snapshots__/accordionStayOpen.twig.snap.html b/...c/Resources/components/Accordion/__tests__/__snapshots__/accordionStayOpen.twig.snap.html
@@ -8,7 +8,7 @@
     <section class="Accordion">
       <article id="accordion-item-example-0" class="Accordion__item">
         <h3 id="accordion-item-example-0-header" class="Accordion__itemHeader">
-          <button type="button" class="Accordion__itemToggle" data-spirit-toggle="collapse" data-spirit-target="accordion-item-example-0-content" aria-expanded="false" aria-controls="accordion-item-example-0-content">Accordion Header</button> <span class="Accordion__itemSide"><span class="Accordion__itemIcon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewbox="0 0 24 24" fill="none" id="e4d24000792e7660bc881b0a7e9ee481" aria-hidden="true">
+          <button type="button" class="Accordion__itemToggle" data-spirit-toggle="collapse" data-spirit-target="accordion-item-example-0-content" aria-expanded="false" aria-controls="accordion-item-example-0-content">Accordion Header</button> <span class="Accordion__itemSide"><span class="Accordion__itemIcon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewbox="0 0 24 24" fill="none" id="svg_e4d24000792e7660bc881b0a7e9ee481" aria-hidden="true">
           <path d="M15.88 9.63479L12 13.5148L8.11998 9.63479C7.72998 9.24479 7.09998 9.24479 6.70998 9.63479C6.31998 10.0248 6.31998 10.6548 6.70998 11.0448L11.3 15.6348C11.69 16.0248 12.32 16.0248 12.71 15.6348L17.3 11.0448C17.69 10.6548 17.69 10.0248 17.3 9.63479C16.91 9.25479 16.27 9.24479 15.88 9.63479Z" fill="currentColor">
           </path></svg></span></span>
         </h3>
@@ -25,7 +25,7 @@ <h3 id="accordion-item-example-0-header" class="Accordion__itemHeader">
       <article id="accordion-item-example-1" class="Accordion__item">
         <h3 id="accordion-item-example-1-header" class="Accordion__itemHeader">
           <button type="button" class="Accordion__itemToggle" data-spirit-toggle="collapse" data-spirit-target="accordion-item-example-1-content" aria-expanded="true" aria-controls="accordion-item-example-1-content">Accordion Header</button> <span class="Accordion__itemSide"><span class="Accordion__itemIcon"><svg width="24" height="24" fill="none" viewbox="0 0 24 24" aria-hidden="true">
-          <use href="#e4d24000792e7660bc881b0a7e9ee481">
+          <use href="#svg_e4d24000792e7660bc881b0a7e9ee481">
           </use></svg></span></span>
         </h3>
 

diff --git a/...b-twig/src/Resources/components/Alert/__tests__/__snapshots__/alertDefault.twig.snap.html b/...b-twig/src/Resources/components/Alert/__tests__/__snapshots__/alertDefault.twig.snap.html
@@ -6,7 +6,7 @@
   </head>
   <body>
     <div class="Alert Alert--success">
-      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewbox="0 0 24 24" fill="none" id="a96377f6ad8f3c0b60d6900c98ad9534" aria-hidden="true">
+      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewbox="0 0 24 24" fill="none" id="svg_a96377f6ad8f3c0b60d6900c98ad9534" aria-hidden="true">
       <path d="M9.00012 16.5448L5.50012 13.0448C5.11012 12.6548 4.49012 12.6548 4.10012 13.0448C3.71012 13.4348 3.71012 14.0548 4.10012 14.4448L8.29012 18.6348C8.68012 19.0248 9.31012 19.0248 9.70012 18.6348L20.3001 8.04479C20.6901 7.65479 20.6901 7.03479 20.3001 6.64479C19.9101 6.25479 19.2901 6.25479 18.9001 6.64479L9.00012 16.5448Z" fill="currentColor">
       </path></svg>
       <div>
@@ -15,7 +15,7 @@
     </div>
 
     <div class="Alert Alert--danger">
-      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewbox="0 0 24 24" fill="none" id="b57548dc360a6ba49ba4a19a8d0c8ad8" aria-hidden="true">
+      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewbox="0 0 24 24" fill="none" id="svg_b57548dc360a6ba49ba4a19a8d0c8ad8" aria-hidden="true">
       <path d="M2.73004 21.0001H21.26C22.03 21.0001 22.51 20.1701 22.13 19.5001L12.86 3.50006C12.47 2.83006 11.51 2.83006 11.13 3.50006L1.86004 19.5001C1.48004 20.1701 1.96004 21.0001 2.73004 21.0001ZM13 18.0001H11V16.0001H13V18.0001ZM12 14.0001C11.45 14.0001 11 13.5501 11 13.0001V11.0001C11 10.4501 11.45 10.0001 12 10.0001C12.55 10.0001 13 10.4501 13 11.0001V13.0001C13 13.5501 12.55 14.0001 12 14.0001Z" fill="currentColor">
       </path></svg>
       <div>
@@ -24,7 +24,7 @@
     </div>
 
     <div class="Alert Alert--informative">
-      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewbox="0 0 24 24" fill="none" id="34d8b39e82bfe6914ca2f600e37c11cf" aria-hidden="true">
+      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewbox="0 0 24 24" fill="none" id="svg_34d8b39e82bfe6914ca2f600e37c11cf" aria-hidden="true">
       <path d="M12 2C6.48 2 2 6.48 2 12C2 17.52 6.48 22 12 22C17.52 22 22 17.52 22 12C22 6.48 17.52 2 12 2ZM13 17H11V11H13V17ZM13 9H11V7H13V9Z" fill="currentColor">
       </path></svg>
       <div>
@@ -33,7 +33,7 @@
     </div>
 
     <div class="Alert Alert--warning">
-      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewbox="0 0 24 24" fill="none" id="f0c4c080075841bbc911dd74dc9df8be" aria-hidden="true">
+      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewbox="0 0 24 24" fill="none" id="svg_f0c4c080075841bbc911dd74dc9df8be" aria-hidden="true">
       <path fill-rule="evenodd" clip-rule="evenodd" d="M12 21.9991C17.5228 21.9991 22 17.522 22 11.9991C22 6.4763 17.5228 1.99915 12 1.99915C6.47715 1.99915 2 6.4763 2 11.9991C2 17.522 6.47715 21.9991 12 21.9991ZM12 12C11.45 12 11 11.55 11 11V9C11 8.45 11.45 8 12 8C12.55 8 13 8.45 13 9V11C13 11.55 12.55 12 12 12ZM13 14V16H11V14H13Z" fill="currentColor">
       </path></svg>
       <div>
@@ -43,15 +43,15 @@
 
     <div class="Alert Alert--informative Alert--center">
       <svg width="24" height="24" fill="none" viewbox="0 0 24 24" aria-hidden="true">
-      <use href="#34d8b39e82bfe6914ca2f600e37c11cf">
+      <use href="#svg_34d8b39e82bfe6914ca2f600e37c11cf">
       </use></svg>
       <div>
         Message
       </div>
     </div>
 
     <div class="Alert Alert--informative Alert--center">
-      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewbox="0 0 24 24" fill="none" id="7d6a00dcae19dca54f8bb856d21618b6" aria-hidden="true">
+      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewbox="0 0 24 24" fill="none" id="svg_7d6a00dcae19dca54f8bb856d21618b6" aria-hidden="true">
       <path fill-rule="evenodd" clip-rule="evenodd" d="M12.0001 10.8563C13.8585 10.8563 15.3651 9.32126 15.3651 7.42772C15.3651 5.53417 13.8585 3.99915 12.0001 3.99915C10.1416 3.99915 8.63503 5.53417 8.63503 7.42772C8.63503 9.32126 10.1416 10.8563 12.0001 10.8563ZM12.0001 19.9991C14.8276 19.9991 17.354 18.6596 19 16.5707C17.354 14.4816 14.8275 13.142 11.9999 13.142C9.17242 13.142 6.64602 14.4816 5 16.5705C6.64601 18.6595 9.17247 19.9991 12.0001 19.9991Z" fill="currentColor">
       </path></svg>
       <div>
@@ -61,7 +61,7 @@
 
     <div role="alert" class="Alert Alert--informative">
       <svg width="24" height="24" fill="none" viewbox="0 0 24 24" aria-hidden="true">
-      <use href="#7d6a00dcae19dca54f8bb856d21618b6">
+      <use href="#svg_7d6a00dcae19dca54f8bb856d21618b6">
       </use></svg>
       <div>
         Message

diff --git a/...esources/components/Breadcrumbs/__tests__/__snapshots__/breadcrumbsDefault.twig.snap.html b/...esources/components/Breadcrumbs/__tests__/__snapshots__/breadcrumbsDefault.twig.snap.html
@@ -8,27 +8,27 @@
     <nav class="Breadcrumbs" aria-label="Breadcrumb">
       <ol>
         <li class="d-none d-tablet-flex">
-          <a aria-current="false" href="#rootUrl" class="link-primary link-underlined">Root</a> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewbox="0 0 24 24" fill="none" id="fa2b65b7e049d1eae33532715c70980f" aria-hidden="true">
+          <a aria-current="false" href="#rootUrl" class="link-primary link-underlined">Root</a> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewbox="0 0 24 24" fill="none" id="svg_fa2b65b7e049d1eae33532715c70980f" aria-hidden="true">
           <path d="M9.29006 7.05475C8.90006 7.44475 8.90006 8.07475 9.29006 8.46475L13.1701 12.3447L9.29006 16.2247C8.90006 16.6147 8.90006 17.2447 9.29006 17.6347C9.68006 18.0247 10.3101 18.0247 10.7001 17.6347L15.2901 13.0447C15.6801 12.6547 15.6801 12.0247 15.2901 11.6347L10.7001 7.04475C10.3201 6.66475 9.68006 6.66475 9.29006 7.05475Z" fill="currentColor">
           </path></svg>
         </li>
 
         <li class="d-none d-tablet-flex">
           <a aria-current="false" href="#categoryUrl" class="link-primary link-underlined">Category</a> <svg width="24" height="24" fill="none" viewbox="0 0 24 24" aria-hidden="true">
-          <use href="#fa2b65b7e049d1eae33532715c70980f">
+          <use href="#svg_fa2b65b7e049d1eae33532715c70980f">
           </use></svg>
         </li>
 
         <li class="d-tablet-none">
-          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewbox="0 0 24 24" fill="none" id="421fdea4d7e5f5b250c10b634f7b9366" aria-hidden="true">
+          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewbox="0 0 24 24" fill="none" id="svg_421fdea4d7e5f5b250c10b634f7b9366" aria-hidden="true">
           <path d="M14.71 7.05471C14.32 6.66471 13.69 6.66471 13.3 7.05471L8.70998 11.6447C8.31998 12.0347 8.31998 12.6647 8.70998 13.0547L13.3 17.6447C13.69 18.0347 14.32 18.0347 14.71 17.6447C15.1 17.2547 15.1 16.6247 14.71 16.2347L10.83 12.3447L14.71 8.46471C15.1 8.07471 15.09 7.43471 14.71 7.05471Z" fill="currentColor">
           </path></svg> <a aria-current="false" href="#subcategoryUrl" class="link-primary link-underlined">Back</a>
         </li>
 
         <li class="d-none d-tablet-flex">
           <a aria-current="false" href="#subcategoryUrl" class="link-primary link-underlined">Subcategory</a>
           <svg width="24" height="24" fill="none" viewbox="0 0 24 24" aria-hidden="true">
-          <use href="#fa2b65b7e049d1eae33532715c70980f">
+          <use href="#svg_fa2b65b7e049d1eae33532715c70980f">
           </use></svg>
         </li>
 

diff --git a/...ces/components/ButtonLink/__tests__/__snapshots__/buttonLinkLoadingDefault.twig.snap.html b/...ces/components/ButtonLink/__tests__/__snapshots__/buttonLinkLoadingDefault.twig.snap.html
@@ -6,10 +6,10 @@
   </head>
   <body>
     <a class="Button Button--primary Button--disabled Button--loading Button--medium" href="#">Loading button
-    link<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewbox="0 0 24 24" fill="none" id="27ec748962d19e70a6144d47dc4e2e3e" class="animation-spin-clockwise" aria-hidden="true">
+    link<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewbox="0 0 24 24" fill="none" id="svg_27ec748962d19e70a6144d47dc4e2e3e" class="animation-spin-clockwise" aria-hidden="true">
     <path d="M2.5 12.3998C2.5 11.8496 2.69599 11.3788 3.08797 10.9876C3.47995 10.5963 3.9507 10.4003 4.50022 10.3996C5.04974 10.3988 5.52049 10.5948 5.91248 10.9876C6.30446 11.3803 6.50045 11.851 6.50045 12.3998C6.50045 12.9486 6.30446 13.4193 5.91248 13.8121C5.52049 14.2048 5.04974 14.4008 4.50022 14.4C3.9507 14.3993 3.47995 14.2033 3.08797 13.8121C2.69599 13.4208 2.5 12.9501 2.5 12.3998V12.3998ZM4.69957 6.80009C4.69957 6.19159 4.91423 5.67268 5.34354 5.24336C5.77286 4.81405 6.29176 4.59939 6.90027 4.59939C7.50877 4.59939 8.02768 4.81405 8.45699 5.24336C8.88631 5.67268 9.10096 6.19159 9.10096 6.80009C9.10096 7.40859 8.88631 7.9275 8.45699 8.35681C8.02768 8.78613 7.50877 9.00078 6.90027 9.00078C6.29176 9.00078 5.77286 8.78613 5.34354 8.35681C4.91423 7.9275 4.69957 7.40859 4.69957 6.80009ZM5.09939 17.9995C5.09939 17.4993 5.27448 17.0745 5.62465 16.7251C5.97482 16.3756 6.39965 16.2005 6.89915 16.1998C7.39043 16.1998 7.8134 16.3749 8.16805 16.7251C8.5227 17.0752 8.69965 17.5001 8.6989 17.9995C8.69815 18.499 8.5212 18.9239 8.16805 19.274C7.81489 19.6242 7.39192 19.7993 6.89915 19.7993C6.39891 19.7993 5.97407 19.6242 5.62465 19.274C5.27523 18.9239 5.10014 18.499 5.09939 17.9995ZM10.1 4.40004C10.1 3.7333 10.3333 3.16661 10.7999 2.69997C11.2666 2.23332 11.8333 2 12.5 2C13.1667 2 13.7334 2.23332 14.2001 2.69997C14.6667 3.16661 14.9 3.7333 14.9 4.40004C14.9 5.06679 14.6667 5.63348 14.2001 6.10012C13.7334 6.56677 13.1667 6.80009 12.5 6.80009C11.8333 6.80009 11.2666 6.56677 10.7999 6.10012C10.3333 5.63348 10.1 5.06679 10.1 4.40004ZM10.8996 20.3996C10.8996 19.9576 11.056 19.5805 11.3689 19.2684C11.6817 18.9564 12.0587 18.7999 12.5 18.7992C12.9413 18.7984 13.3183 18.9549 13.6311 19.2684C13.944 19.582 14.1004 19.9591 14.1004 20.3996C14.1004 20.8401 13.944 21.2172 13.6311 21.5307C13.3183 21.8443 12.9413 22.0007 12.5 22C12.0587 21.9992 11.6817 21.8428 11.3689 21.5307C11.056 21.2186 10.8996 20.8416 10.8996 20.3996ZM16.6998 17.9995C16.6998 17.6165 16.8372 17.2873 17.1119 17.0118C17.3867 16.7362 17.716 16.5989 18.0997 16.5996C18.4835 16.6004 18.8128 16.7377 19.0875 17.0118C19.3623 17.2858 19.4997 17.615 19.4997 17.9995C19.4997 18.3841 19.3623 18.7133 19.0875 18.9873C18.8128 19.2614 18.4835 19.3987 18.0997 19.3995C17.716 19.4002 17.3867 19.2628 17.1119 18.9873C16.8372 18.7118 16.6998 18.3826 16.6998 17.9995ZM17.0996 6.80009C17.0996 6.52533 17.1974 6.28977 17.393 6.0934C17.5887 5.89704 17.8242 5.79923 18.0997 5.79998C18.3752 5.80072 18.6108 5.89853 18.8064 6.0934C19.002 6.28827 19.0998 6.52384 19.0998 6.80009C19.0998 7.07634 19.002 7.3119 18.8064 7.50677C18.6108 7.70164 18.3752 7.79945 18.0997 7.8002C17.8242 7.80095 17.5887 7.70314 17.393 7.50677C17.1974 7.31041 17.0996 7.07485 17.0996 6.80009ZM19.2992 12.3998C19.2992 12.0668 19.416 11.7835 19.6497 11.5498C19.8834 11.3161 20.1668 11.1992 20.4998 11.1992C20.8328 11.1992 21.1161 11.3161 21.3498 11.5498C21.5835 11.7835 21.7004 12.0668 21.7004 12.3998C21.7004 12.7328 21.5835 13.0162 21.3498 13.2499C21.1161 13.4836 20.8328 13.6004 20.4998 13.6004C20.1668 13.6004 19.8834 13.4836 19.6497 13.2499C19.416 13.0162 19.2992 12.7328 19.2992 12.3998Z" fill="currentColor">
     </path></svg></a> <a class="Button Button--primary Button--disabled Button--loading Button--medium" href="#">Loading button link should still be disabled even if isDisabled is false<svg width="24" height="24" fill="none" viewbox="0 0 24 24" class="animation-spin-clockwise" aria-hidden="true">
-    <use href="#27ec748962d19e70a6144d47dc4e2e3e">
+    <use href="#svg_27ec748962d19e70a6144d47dc4e2e3e">
     </use></svg></a>
   </body>
 </html>
diff --git a/...esources/components/Header/__tests__/__snapshots__/headerDialogCloseButton.twig.snap.html b/...esources/components/Header/__tests__/__snapshots__/headerDialogCloseButton.twig.snap.html
@@ -5,11 +5,11 @@
     </title>
   </head>
   <body>
-    <button class="HeaderDialogCloseButton" type="button" data-spirit-dismiss="offcanvas" data-spirit-target="#my-menu" aria-controls="my-menu" aria-expanded="false"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewbox="0 0 24 24" fill="none" id="a79dff7a255f69bbe6e39d594aa2275b" aria-hidden="true">
+    <button class="HeaderDialogCloseButton" type="button" data-spirit-dismiss="offcanvas" data-spirit-target="#my-menu" aria-controls="my-menu" aria-expanded="false"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewbox="0 0 24 24" fill="none" id="svg_a79dff7a255f69bbe6e39d594aa2275b" aria-hidden="true">
     <path d="M18.3 5.70997C17.91 5.31997 17.28 5.31997 16.89 5.70997L12 10.59L7.11 5.69997C6.72 5.30997 6.09 5.30997 5.7 5.69997C5.31 6.08997 5.31 6.71997 5.7 7.10997L10.59 12L5.7 16.89C5.31 17.28 5.31 17.91 5.7 18.3C6.09 18.69 6.72 18.69 7.11 18.3L12 13.41L16.89 18.3C17.28 18.69 17.91 18.69 18.3 18.3C18.69 17.91 18.69 17.28 18.3 16.89L13.41 12L18.3 7.10997C18.68 6.72997 18.68 6.08997 18.3 5.70997Z" fill="currentColor">
     </path></svg> <span class="accessibility-hidden">Close</span></button> <!-- Render with all props -->
      <button class="HeaderDialogCloseButton" type="button" data-spirit-dismiss="" data-spirit-target="" aria-controls="my-menu" aria-expanded="false"><svg width="24" height="24" fill="none" viewbox="0 0 24 24" aria-hidden="true">
-    <use href="#a79dff7a255f69bbe6e39d594aa2275b">
+    <use href="#svg_a79dff7a255f69bbe6e39d594aa2275b">
     </use></svg> <span class="accessibility-hidden">Close menu</span></button>
   </body>
 </html>
diff --git a/...rc/Resources/components/Header/__tests__/__snapshots__/headerMobileActions.twig.snap.html b/...rc/Resources/components/Header/__tests__/__snapshots__/headerMobileActions.twig.snap.html
@@ -6,15 +6,15 @@
   </head>
   <body>
     <div class="HeaderMobileActions">
-      <button aria-controls="my-menu" aria-expanded="false" data-spirit-target="#my-menu" data-spirit-toggle="offcanvas" class="Button Button--secondary Button--medium Button--symmetrical" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewbox="0 0 24 24" fill="none" id="a1fcc7134edb5d176925f0fd5ddd9d42" aria-hidden="true">
+      <button aria-controls="my-menu" aria-expanded="false" data-spirit-target="#my-menu" data-spirit-toggle="offcanvas" class="Button Button--secondary Button--medium Button--symmetrical" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewbox="0 0 24 24" fill="none" id="svg_a1fcc7134edb5d176925f0fd5ddd9d42" aria-hidden="true">
       <path d="M4 18H20C20.55 18 21 17.55 21 17C21 16.45 20.55 16 20 16H4C3.45 16 3 16.45 3 17C3 17.55 3.45 18 4 18ZM4 13H20C20.55 13 21 12.55 21 12C21 11.45 20.55 11 20 11H4C3.45 11 3 11.45 3 12C3 12.55 3.45 13 4 13ZM3 7C3 7.55 3.45 8 4 8H20C20.55 8 21 7.55 21 7C21 6.45 20.55 6 20 6H4C3.45 6 3 6.45 3 7Z" fill="currentColor">
       </path></svg> <span class="accessibility-hidden">Menu</span></button>
     </div>
     <!-- Render with all props -->
 
     <div class="HeaderMobileActions">
       <span>custom content</span> <button aria-controls="my-menu" aria-expanded="false" data-spirit-target="#my-menu" data-spirit-toggle="offcanvas" class="Button Button--secondary Button--medium Button--symmetrical" type="button"><svg width="24" height="24" fill="none" viewbox="0 0 24 24" aria-hidden="true">
-      <use href="#a1fcc7134edb5d176925f0fd5ddd9d42">
+      <use href="#svg_a1fcc7134edb5d176925f0fd5ddd9d42">
       </use></svg> <span class="accessibility-hidden">Open menu</span></button>
     </div>
   </body>