Drop usage of large SVG sprite on homepage and in copy buttons, replacing them with the Icons font

4 files changed, 11 insertions, 16 deletions

diff --git a/config.yml b/config.yml
index d5a613fc0..d3462954d 100644
--- a/config.yml
+++ b/config.yml
@@ -31,8 +31,6 @@ module:
       target:           static/apple-touch-icon.png
     - source:           docs/static/assets/img/favicons/favicon.ico
       target:           static/favicon.ico
-    - source:           bootstrap-icons.svg
-      target:           static/bootstrap-icons.svg
     - source:           icons
       target:           static/assets/icons
     - source:           font
diff --git a/docs/assets/js/application.js b/docs/assets/js/application.js
index 00e068428..128b0b2d6 100644
--- a/docs/assets/js/application.js
+++ b/docs/assets/js/application.js
@@ -5,7 +5,7 @@
 (function () {
   'use strict'
 
-  var btnHtml = '<div class="bd-clipboard"><button type="button" class="btn-clipboard" title="Copy to clipboard"><svg class="bi" width="1em" height="1em" fill="currentColor"><use xlink:href="/bootstrap-icons.svg#clipboard"/></svg></button></div>';
+  var btnHtml = '<div class="bd-clipboard"><button type="button" class="btn-clipboard" title="Copy to clipboard"><i class="bi bi-clipboard"></i></button></div>';
 
   [].slice.call(document.querySelectorAll('div.highlight'))
     .forEach(function (element) {
diff --git a/docs/content/_index.md b/docs/content/_index.md
index 7391faffc..f8a2d450c 100644
--- a/docs/content/_index.md
+++ b/docs/content/_index.md
@@ -66,7 +66,13 @@ Use the SVG sprite to insert any icon through the `<use>` element. Use the icon'
 {{< /md >}}
   </div>
   <div class="col-md-8">
-{{< example >}}
+
+<div class="bd-example" style="font-size: 32px;">
+  <i class="bi bi-heart-fill"></i>
+  <i class="bi bi-toggles"></i>
+  <i class="bi bi-shop"></i>
+</div>
+{{< highlight html >}}
 <svg class="bi" width="32" height="32" fill="currentColor">
   <use xlink:href="bootstrap-icons.svg#heart-fill"/>
 </svg>
@@ -76,7 +82,7 @@ Use the SVG sprite to insert any icon through the `<use>` element. Use the icon'
 <svg class="bi" width="32" height="32" fill="currentColor">
   <use xlink:href="bootstrap-icons.svg#shop"/>
 </svg>
-{{< /example >}}
+{{< /highlight >}}
   </div>
 </div>
 
@@ -170,14 +176,7 @@ If the icons are not purely decorative, make sure you provide an appropriate tex
 {{< /highlight >}}
     <div class="bd-example">
       <i class="bi-github" role="img" style="font-size: 2em" aria-label="GitHub"></i>
-    </div>
-{{< highlight html >}}
-<i class="bi-github" role="img" aria-label="GitHub"></i>
-{{< /highlight >}}
-    <div class="bd-example">
-      <svg class="bi" width="32" height="32" fill="currentColor" role="img" aria-label="Tools">
-        <use xlink:href="bootstrap-icons.svg#tools"/>
-      </svg>
+      <i class="bi-tools" role="img" style="font-size: 2em" aria-label="Tools"></i>
     </div>
 {{< highlight html >}}
 <svg class="bi" ... role="img" aria-label="Tools">
diff --git a/docs/layouts/partials/icons.html b/docs/layouts/partials/icons.html
index 3e9ef278d..c81e7eb1c 100644
--- a/docs/layouts/partials/icons.html
+++ b/docs/layouts/partials/icons.html
@@ -13,9 +13,7 @@
       <li class="col mb-4"{{ with .Params.tags }} data-tags="{{ delimit . " " }}"{{ end }}{{ with .Params.categories }} data-categories="{{ delimit . " " | lower }}"{{ end }}>
         <a class="d-block text-dark text-decoration-none" href="{{ .RelPermalink }}">
           <div class="p-3 py-4 mb-2 bg-light text-center rounded">
-            <svg class="bi" width="1em" height="1em" fill="currentColor">
-              <use xlink:href="bootstrap-icons.svg#{{ $filename }}"/>
-            </svg>
+            <i class="bi bi-{{ $filename }}"></i>
           </div>
           <div class="name text-muted text-decoration-none text-center pt-1">{{ $filename }}</div>
         </a>