chore(examples): better management of SVGs in examples (#1730)

site/content/docs/5.2/examples/form/index.html

@@ -5,6 +5,12 @@
  - src: "form.js"
 ---
 
+<svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
+ <symbol fill="currentColor" viewBox="0 0 1000 1000" id="user">
+ <path fill-rule="evenodd" d="M656.7,422.409a229.959,229.959,0,0,1-315.39.008A224.95,224.95,0,0,0,224.064,615H224V825A100,100,0,0,0,324,925H774V620A224.944,224.944,0,0,0,656.7,422.409ZM679,255A180,180,0,1,1,499,75,180,180,0,0,1,679,255Z"></path>
+ </symbol>
+</svg>
+
 <header class="sticky-top">
  <nav class="navbar navbar-dark navbar-expand-lg bg-dark supra" aria-label="Supra navigation">
  <div class="container-xxl">
@@ -50,7 +56,7 @@ <h1 class="title">Travel</h1>
  <li class="nav-item">
  <a href="#" class="nav-link nav-icon">
  <svg width="1.5rem" height="1.5rem" fill="currentColor" aria-hidden="true" focusable="false" class="overflow-visible">
- <use xlink:href="/docs/{{< param docs_version >}}/assets/img/boosted-sprite.svg#user"></use>
+ <use xlink:href="#user"></use>
  </svg>
  <span class="visually-hidden">My account</span>
  </a>

site/content/docs/5.2/examples/stickers/index.html

@@ -6,6 +6,15 @@
  - "/docs/examples/stickers"
 ---
 
+<svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
+ <symbol fill="currentColor" viewBox="0 0 1000 1000" id="fiveG">
+ <path fill-rule="evenodd" d="M211.433,340.61L191.64,453l1.414,1.414q20.495-20.493,43.828-29.334t53.019-8.835q36.748,0,65.036,13.43a143.063,143.063,0,0,1,47.716,36.048q19.435,22.629,29.69,53.366a205.643,205.643,0,0,1,10.251,65.382q0,38.168-14.845,71.035a181.15,181.15,0,0,1-39.941,56.9,177.216,177.216,0,0,1-58.32,37.109,182.009,182.009,0,0,1-70.691,12.37,245.986,245.986,0,0,1-68.924-9.543A172.033,172.033,0,0,1,131.553,723,146.982,146.982,0,0,1,90.905,673.88Q75.7,644.557,75,605.671H175.381q3.53,33.928,25.449,54.072,21.9,20.146,55.846,20.145,19.782,0,35.7-8.128a85.013,85.013,0,0,0,26.863-21.205A95.631,95.631,0,0,0,336.2,620.161a108.262,108.262,0,0,0,6.009-35.694,113.362,113.362,0,0,0-5.655-36.049,84.412,84.412,0,0,0-16.966-29.686,79.781,79.781,0,0,0-26.863-19.792q-15.556-7.057-36.052-7.068-26.874,0-43.829,9.542t-31.811,30.04H90.552l48.777-273.543h276.4v82.7h-204.3ZM776.256,748.8Q740.2,763.995,703.444,764q-57.974,0-104.269-20.144T521.061,688.37q-31.812-35.337-48.777-83.052T455.318,502.474q0-56.541,16.966-104.964,16.967-48.407,48.777-84.466T599.175,256.5q46.29-20.493,104.269-20.5a245.328,245.328,0,0,1,75.285,11.662,213.452,213.452,0,0,1,65.743,34.282A187.977,187.977,0,0,1,892.9,337.783q19.088,33.231,23.328,76.338H810.187q-9.908-42.411-38.173-63.615-28.283-21.205-68.57-21.2-37.477,0-63.622,14.49a120.089,120.089,0,0,0-42.414,38.876q-16.272,24.386-23.682,55.485a276.177,276.177,0,0,0-7.423,64.322,256.827,256.827,0,0,0,7.423,61.848,166.787,166.787,0,0,0,23.682,54.072,121.187,121.187,0,0,0,42.414,38.522q26.144,14.494,63.622,14.49,55.139,0,85.183-27.92t34.991-80.931H711.926v-82.7H924V752.691H853.309L842,695.439Q812.307,733.607,776.256,748.8Z"/>
+ </symbol>
+ <symbol fill="currentColor" viewBox="0 0 1000 1000" id="delivery">
+ <path fill-rule="evenodd" d="M825,461H750L600.749,212.249C592.017,196.593,574.2,186,555,186H175a50,50,0,0,0-50,50V701h0.032a112.5,112.5,0,0,0,224.936,0H550.031a112.5,112.5,0,0,0,224.938,0H875V511A50,50,0,0,0,825,461Zm-344.865-2.557L387.5,611h-0.054L294.511,458.443C283.24,437.467,275,421.88,275,398.5A112.339,112.339,0,0,1,387.5,286C449.1,286,500,336.692,500,398.5,500,421.87,491.408,437.467,480.135,458.443ZM430,403.5A42.5,42.5,0,1,1,387.5,361,42.5,42.5,0,0,1,430,403.5Z"/>
+ </symbol>
+</svg>
+
 <main>
  <h1 class="visually-hidden">Stickers Boosted example</h1>
 
@@ -20,7 +29,7 @@ <h1 class="visually-hidden">Stickers Boosted example</h1>
  <p class="mb-0">
  <svg width="80" height="80" role="img" focusable="false" aria-labelledby="title">
  <title id="title">5G icon</title>
- <use xlink:href="/docs/{{< param docs_version >}}/assets/img/boosted-sprite.svg#5G"></use>
+ <use xlink:href="#fiveG"></use>
  </svg>
  </p>
  </div>
@@ -33,7 +42,7 @@ <h1 class="visually-hidden">Stickers Boosted example</h1>
 
  <div class="sticker sticker-sm">
  <svg width="35" height="35" aria-hidden="true" focusable="false">
- <use xlink:href="/docs/{{< param docs_version >}}/assets/img/boosted-sprite.svg#delivery"></use>
+ <use xlink:href="#delivery"></use>
  </svg>
  <p class="mb-2">
  <span class="h4">Free delivery</span>
@@ -99,7 +108,7 @@ <h1 class="visually-hidden">Stickers Boosted example</h1>
  <p class="mb-0">
  <svg width="100" height="100" role="img" focusable="false" aria-labelledby="title2">
  <title id="title2">5G icon</title>
- <use xlink:href="/docs/{{< param docs_version >}}/assets/img/boosted-sprite.svg#5G"></use>
+ <use xlink:href="#5G"></use>
  </svg>
  </p>
  </div>
@@ -112,7 +121,7 @@ <h1 class="visually-hidden">Stickers Boosted example</h1>
 
  <div class="sticker">
  <svg width="40" height="40" aria-hidden="true" focusable="false">
- <use xlink:href="/docs/{{< param docs_version >}}/assets/img/boosted-sprite.svg#delivery"></use>
+ <use xlink:href="#delivery"></use>
  </svg>
  <p class="mb-3">
  <span class="h3">Free delivery</span>
@@ -178,7 +187,7 @@ <h1 class="visually-hidden">Stickers Boosted example</h1>
  <p class="mb-0">
  <svg width="160" height="160" role="img" focusable="false" aria-labelledby="title3">
  <title id="title3">5G icon</title>
- <use xlink:href="/docs/{{< param docs_version >}}/assets/img/boosted-sprite.svg#5G"></use>
+ <use xlink:href="#5G"></use>
  </svg>
  </p>
  </div>
@@ -191,7 +200,7 @@ <h1 class="visually-hidden">Stickers Boosted example</h1>
 
  <div class="sticker sticker-lg">
  <svg width="62" height="62" aria-hidden="true" focusable="false">
- <use xlink:href="/docs/{{< param docs_version >}}/assets/img/boosted-sprite.svg#delivery"></use>
+ <use xlink:href="#delivery"></use>
  </svg>
  <p class="mb-4">
  <span class="display-3">Free delivery</span>