Sprite SVG

README.md

@@ -33,6 +33,17 @@ Bootstrap Icons are packaged up and published to npm. We only include the proces
 npm i bootstrap-icons --save
 ```
 
+## Usage
+
+Depending on your setup, you can include Bootstrap Icons in a handful of ways.
+
+- Copy-paste SVGs as embedded HTML
+- Reference via `<img>` element
+- Use the SVG sprite
+- Include via CSS
+
+[See the docs for more information.](https://icons.getbootstrap.com/#usage)
+
 ## Development
 
 [![Build Status](https://github.com/twbs/icons/workflows/Tests/badge.svg)](https://github.com/twbs/icons/actions?workflow=Tests)

config.yml

@@ -31,6 +31,8 @@ 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
 
 params:
   description:          "Official open source SVG icon library for Bootstrap"

docs/content/_index.md

@@ -31,39 +31,61 @@ Our [releases](https://github.com/twbs/icons/releases/) are published to GitHub.
 Bootstrap Icons are SVGs, so you can include them into your HTML in a few ways depending on how your project is setup. Bootstrap Icons include a `width` and `height` of `1em` by default to allow for easy resizing via `font-size`.
 
 <div class="row my-4">
-  <div class="col-md-4 col-xl-3">
+  <div class="col-md-4">
 {{< md >}}
 ### Embedded
 Embed your icons within the HTML of your page (as opposed to an external image file). Here we've used a custom `width` and `height`.
 {{< /md >}}
   </div>
-  <div class="col-md-8 col-xl-9">
+  <div class="col-md-8">
     {{< example >}}<svg class="bi bi-chevron-right" width="32" height="32" viewBox="0 0 20 20" fill="currentColor" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M6.646 3.646a.5.5 0 01.708 0l6 6a.5.5 0 010 .708l-6 6a.5.5 0 01-.708-.708L12.293 10 6.646 4.354a.5.5 0 010-.708z"/></svg>{{< /example >}}
   </div>
 </div>
 
 <div class="row my-4">
-  <div class="col-md-4 col-xl-3">
+  <div class="col-md-4">
+{{< md >}}
+### Sprite
+Use the SVG sprite to insert any icon through the `<use>` element. Use the icon's filename as the fragment identifier (e.g., `toggles` is `#toggles`). SVG sprites allow you to reference an external file similar to an `<img>` element, but with the power of `currentColor` for easy theming.
+{{< /md >}}
+  </div>
+  <div class="col-md-8">
+{{< example >}}
+<svg class="bi" width="32" height="32" fill="currentColor">
+  <use xlink:href="bootstrap-icons.svg#heart-fill"/>
+</svg>
+<svg class="bi" width="32" height="32" fill="currentColor">
+  <use xlink:href="bootstrap-icons.svg#toggles"/>
+</svg>
+<svg class="bi" width="32" height="32" fill="currentColor">
+  <use xlink:href="bootstrap-icons.svg#shop"/>
+</svg>
+{{< /example >}}
+  </div>
+</div>
+
+<div class="row my-4">
+  <div class="col-md-4">
 {{< md >}}
 ### External image
 Copy the Bootstrap icons SVGs to your directory of choice and reference them like normal images with the `<img>` element.
 {{< /md >}}
   </div>
-  <div class="col-md-8 col-xl-9">
+  <div class="col-md-8">
     {{< example >}}<img src="/assets/img/bootstrap.svg" alt="" width="32" height="32" title="Bootstrap">{{< /example >}}
   </div>
 </div>
 
 <div class="row">
-  <div class="col-md-4 col-xl-3">
+  <div class="col-md-4">
 {{< md >}}
 ### CSS
 You can also use the SVG within your CSS (**be sure to escape any characters**, such as `#` to `%23` when specifying hex color values). When no dimensions are specified via `width` and `height` on the `<svg>`, the icon will fill the available space.
 
 The `viewBox` attribute is required if you wish to resize icons with `background-size`. Note that the `xmlns` attribute is required.
 {{< /md >}}
   </div>
-  <div class="col-md-8 col-xl-9">
+  <div class="col-md-8">
 {{< highlight css >}}
 .bi::before {
   display: inline-block;
@@ -78,13 +100,13 @@ The `viewBox` attribute is required if you wish to resize icons with `background
 </div>
 
 <div class="row my-4">
-  <div class="col-md-4 col-xl-3">
+  <div class="col-md-4">
 {{< md >}}
 ## Styling
 Color can be changed by setting a `.text-*` class or custom CSS:
 {{< /md >}}
   </div>
-  <div class="col-md-8 col-xl-9">
+  <div class="col-md-8">
     <div class="bd-example">
       <svg class="bi bi-alert-triangle text-success" width="32" height="32" viewBox="0 0 20 20" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
         <path fill-rule="evenodd" d="M9.938 4.016a.146.146 0 00-.054.057L3.027 15.74a.176.176 0 00-.002.183c.016.03.037.05.054.06.015.01.034.017.066.017h13.713a.12.12 0 00.066-.017.163.163 0 00.055-.06.176.176 0 00-.003-.183L10.12 4.073a.146.146 0 00-.054-.057.13.13 0 00-.063-.016.13.13 0 00-.064.016zm1.043-.45a1.13 1.13 0 00-1.96 0L2.166 15.233c-.457.778.091 1.767.98 1.767h13.713c.889 0 1.438-.99.98-1.767L10.982 3.566z"/>

docs/layouts/partials/icons.html

@@ -16,7 +16,9 @@ <h2 id="icons" class="mb-0">Icons</h2>
       <li class="col mb-4" data-tags="{{ with $.Site.GetPage "icons" $filename }}{{ with .Params.tags }}{{ delimit . " " }}{{ end }}{{ end }}">
         <a class="d-block text-dark text-decoration-none" href="/icons/{{ $filename }}/">
           <div class="p-3 py-4 mb-2 bg-light text-center rounded">
-            {{ readFile (printf "%s/%s" $dirName .Name) | chomp | safeHTML }}
+            <svg class="bi" width="1em" height="1em" fill="currentColor">
+              <use xlink:href="bootstrap-icons.svg#{{ $filename }}"/>
+            </svg>
           </div>
           <div class="name text-muted text-decoration-none text-center pt-1">
             {{ $name }}