Drop usage of large SVG sprite on homepage and in copy buttons, repla…

…cing them with the Icons font

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

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) {

docs/assets/scss/docs.scss

@@ -157,28 +157,3 @@
   padding-bottom: 4.5rem !important;
 }
 // stylelint-enable declaration-no-important
-
-// stylelint-disable
-@font-face {
-  font-family: bootstrap-icons;
-  src: url("../../font/fonts/bootstrap-icons.woff2?231ce25e89ab5804f9a6c427b8d325c9") format("woff2"),
-       url("../../font/fonts/bootstrap-icons.woff?231ce25e89ab5804f9a6c427b8d325c9") format("woff");
-}
-
-[class^="bi-"]::before,
-[class*=" bi-"]::before {
-  display: inline-block;
-  font-family: bootstrap-icons !important;
-  font-style: normal;
-  font-weight: 400 !important;
-  font-variant: normal;
-  line-height: 1;
-  text-transform: none;
-  vertical-align: -.125em;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-}
-
-.bi-alarm::before { content: "\f102"; }
-.bi-github::before { content: "\f3ed"; }
-// stylelint-enable

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>
 
@@ -171,14 +177,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">

docs/layouts/partials/icons.html

@@ -13,9 +13,7 @@ <h2 id="icons" class="mb-0">Icons</h2>
       <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>

docs/layouts/partials/stylesheet.html

@@ -1,4 +1,5 @@
 <link rel="stylesheet" href="/assets/css/bootstrap.min.css">
+<link rel="stylesheet" href="/font/bootstrap-icons.css">
 
 {{- $sassOptions := dict "targetPath" "assets/css/docs.css" "precision" 6 -}}
 {{- $postcssOptions := dict "use" "autoprefixer" "noMap" true -}}