Merge branch 'main' into font-layout

build/build-svgs.js

@@ -6,8 +6,7 @@ const fs = require('fs').promises
 const path = require('path')
 const chalk = require('chalk')
 const cheerio = require('cheerio')
-const SVGO = require('svgo')
-const yaml = require('js-yaml')
+const { loadConfig, optimize } = require('svgo')
 
 const iconsDir = path.join(__dirname, '../icons/')
 
@@ -22,19 +21,15 @@ const svgAttributes = {
   viewBox: '0 0 16 16'
 }
 
-async function getSvgoConfig() {
-  const svgoConfigFile = await fs.readFile(path.join(__dirname, '../svgo.yml'), 'utf8')
-
-  return yaml.load(svgoConfigFile)
-}
-
 async function processFile(file, config) {
   const filepath = path.join(iconsDir, file)
   const basename = path.basename(file, '.svg')
 
   const originalSvg = await fs.readFile(filepath, 'utf8')
-  const svgo = await new SVGO(config)
-  const optimizedSvg = await svgo.optimize(originalSvg)
+  const optimizedSvg = await optimize(originalSvg, {
+    path: filepath,
+    ...config
+  })
 
   const $ = await cheerio.load(optimizedSvg.data, {
     xml: {
@@ -74,7 +69,7 @@ async function processFile(file, config) {
     console.time(timeLabel)
 
     const files = await fs.readdir(iconsDir)
-    const config = await getSvgoConfig()
+    const config = await loadConfig(path.join(__dirname, '../svgo.config.js'))
 
     await Promise.all(files.map(file => processFile(file, config)))
 

docs/assets/scss/docs.scss

@@ -7,6 +7,11 @@
 @import "syntax";
 @import "ads";
 
+.bi {
+  display: inline-block;
+  vertical-align: -.125em;
+}
+
 .hero-notice {
   background-color: $teal-100;
 
@@ -101,11 +106,6 @@
   }
   // stylelint-enable  declaration-no-important
 
-  .bi {
-    display: inline-block;
-    vertical-align: -.125em;
-  }
-
   &:empty::before {
     display: block;
     width: 100%;
@@ -137,12 +137,6 @@
   }
 }
 
-.icon-examples .bi {
-  width: 1em;
-  height: 1em;
-  vertical-align: -.125em;
-}
-
 .icon-demo {
   background-color: #fdfdfd;
   background-image: radial-gradient(circle, #ddd 1px, rgba(0, 0, 0, 0) 1px);
@@ -159,8 +153,8 @@
 // stylelint-disable
 @font-face {
   font-family: bootstrap-icons;
-  src: url("../../font/fonts/bootstrap-icons.woff2?fc379976cf62029286aa7fe8a7f1477b") format("woff2"),
-       url("../../font/fonts/bootstrap-icons.woff?fc379976cf62029286aa7fe8a7f1477b") format("woff");
+  src: url("../../font/fonts/bootstrap-icons.woff2?231ce25e89ab5804f9a6c427b8d325c9") format("woff2"),
+       url("../../font/fonts/bootstrap-icons.woff?231ce25e89ab5804f9a6c427b8d325c9") format("woff");
 }
 
 [class^="bi-"]::before,

docs/content/_index.md

@@ -52,7 +52,7 @@ Embed your icons within the HTML of your page (as opposed to an external image f
 {{< /md >}}
   </div>
   <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 >}}
+    {{< example >}}<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="currentColor" class="bi bi-chevron-right" viewBox="0 0 16 16"><path fill-rule="evenodd" d="M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z"/></svg>{{< /example >}}
   </div>
 </div>
 
@@ -171,13 +171,16 @@ 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>
     </div>
 {{< highlight html >}}
-<!-- role="img" and aria-label="..." -->
-<i class="bi-github" role="img" aria-label="GitHub"></i>
 <svg class="bi" ... role="img" aria-label="Tools">
   <use xlink:href="bootstrap-icons.svg#tools"/>
 </svg>

font/bootstrap-icons.css

@@ -1,7 +1,7 @@
 @font-face {
   font-family: "bootstrap-icons";
-  src: url("./fonts/bootstrap-icons.woff2?603b01d7083270159a10b08a8ccd9f46") format("woff2"),
-url("./fonts/bootstrap-icons.woff?603b01d7083270159a10b08a8ccd9f46") format("woff");
+  src: url("./fonts/bootstrap-icons.woff2?231ce25e89ab5804f9a6c427b8d325c9") format("woff2"),
+url("./fonts/bootstrap-icons.woff?231ce25e89ab5804f9a6c427b8d325c9") format("woff");
 }
 
 [class^="bi-"]::before,