Drop SVG sprite for font on docs homepage

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" aria-hidden="true"></i></button></div>';
 
   [].slice.call(document.querySelectorAll('div.highlight'))
     .forEach(function (element) {
@@ -19,17 +19,15 @@
   })
 
   clipboard.on('success', function (event) {
-    var iconFirstChild = event.trigger.querySelector('.bi').firstChild
-    var namespace = 'http://www.w3.org/1999/xlink'
-    var originalXhref = iconFirstChild.getAttributeNS(namespace, 'href')
+    var icon = event.trigger.querySelector('.bi')
     var originalTitle = event.trigger.title
 
     event.clearSelection()
-    iconFirstChild.setAttributeNS(namespace, 'href', originalXhref.replace('clipboard', 'check2'))
-    event.trigger.title = "Copied!"
+    icon.classList.replace('bi-clipboard', 'bi-check2')
+    event.trigger.title = 'Copied!'
 
     setTimeout(function () {
-      iconFirstChild.setAttributeNS(namespace, 'href', originalXhref)
+      icon.classList.replace('bi-check2', 'bi-clipboard')
       event.trigger.title = originalTitle
     }, 2000)
   })

docs/content/_index.md

@@ -1,4 +1,6 @@
 ---
+aliases:
+  - /font/
 ---
 
 ## Install
@@ -69,7 +71,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>
@@ -79,7 +87,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>
 
@@ -173,14 +181,7 @@ For purely decorative icons, add `aria-hidden="true"`. Otherwise, provide an app
 {{< /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/content/sprite.md

@@ -0,0 +1,5 @@
+---
+title: Icon Sprite
+description: Use Bootstrap Icons as an SVG sprite, built from our SVGs and easily customized with CSS.
+layout: sprite
+---

docs/layouts/partials/home/hero.html

@@ -33,7 +33,7 @@ <h1 class="f0">Bootstrap Icons</h1>
           <span class="px-1">&#8226;</span>
           <a href="#icons">Icons</a>
           <span class="px-1">&#8226;</span>
-          <a href="/font/">Icon Font</a>
+          <a href="/sprite/">Icon Sprite</a>
           <span class="px-1">&#8226;</span>
           <a href="#install">Install</a>
           <span class="px-1">&#8226;</span>

docs/layouts/partials/icons.html

@@ -12,13 +12,13 @@ <h2 id="icons" class="mb-0">Icons</h2>
       {{- with .Site.GetPage .File.Path }}
       <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">
+          <div class="px-3 py-4 mb-2 bg-light text-center rounded">
             {{ if $.IsHome -}}
+            <i class="bi bi-{{ $filename }}"></i>
+            {{- else -}}
             <svg class="bi" width="1em" height="1em" fill="currentColor">
-              <use xlink:href="bootstrap-icons.svg#{{ $filename }}"/>
+              <use xlink:href="../bootstrap-icons.svg#{{ $filename }}"/>
             </svg>
-            {{- else -}}
-            <i class="bi bi-{{ $filename }}"></i>
             {{- end }}
           </div>
           <div class="name text-muted text-decoration-none text-center pt-1">{{ $filename }}</div>

docs/layouts/partials/navbar.html

@@ -7,7 +7,7 @@
     </a>
 
     <button class="navbar-toggler d-flex d-lg-none order-3 p-2" type="button" data-bs-toggle="offcanvas" data-bs-target="#bdNavbar" aria-controls="bdNavbar" aria-expanded="false" aria-label="Toggle navigation">
-      <svg class="bi" width="24" height="24" aria-hidden="true"><use xlink:href="/bootstrap-icons.svg#three-dots"></use></svg>
+      <i class="bi bi-three-dots" aria-hidden="true"></i>
     </button>
 
     <div class="offcanvas-lg offcanvas-end flex-grow-1" id="bdNavbar" aria-labelledby="bdNavbarOffcanvasLabel">

docs/layouts/partials/scripts.html

@@ -1,7 +1,7 @@
 {{ $bootstrapJs := resources.Get "/js/vendor/bootstrap.min.js" | resources.Copy "/assets/js/vendor/bootstrap.min.js" -}}
 <script async src="{{ $bootstrapJs.Permalink | relURL }}"></script>
 
-{{- if or .IsHome (eq .Page.Layout "font") -}}
+{{- if or .IsHome (eq .Page.Layout "sprite") -}}
   {{- $listVendor := resources.Get "js/vendor/list.min.js" -}}
   {{- $listJs := resources.Get "js/list.js" -}}
   {{- $listBundle := slice $listVendor $listJs | resources.Concat "assets/js/list.js" -}}