Drop CSS icons for SVGs (#22708)

* add the svg icon as a partial so we can include it easily

* add the icon to the homepage

* drop .bd-booticon for svgs here

* rip out the import for .bd-booticon sass file

* Delete _booticon.scss

* indentation

* Update bootstrap-icon.html

* remove those

docs/_includes/bootstrap-icon.html

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 612 612" width="128" height="128"><g id="solid"><g id="bg"><path fill="#fff" d="M510,5a97.3,97.3,0,0,1,97,97V510a97.3,97.3,0,0,1-97,97H102A97.3,97.3,0,0,1,5,510V102A97.3,97.3,0,0,1,102,5H510m0-5H102C45.9,0,0,45.9,0,102V510c0,56.1,45.9,102,102,102H510c56.1,0,102-45.9,102-102V102C612,45.9,566.1,0,510,0h0Z"/></g></g><path fill="#fff" d="M196.77,471.5V154.43H320.92c54.27,0,91,31.64,91,79.1,0,33-24.17,63.72-54.71,69.21v1.76c43.07,5.49,70.75,35.82,70.75,78,0,55.81-40,89-107.45,89H196.77Zm39.55-180.4H299.6c46.8,0,72.29-18.68,72.29-53,0-31.42-21.53-48.78-60-48.78H236.32V291.1Zm78.22,145.46c47.68,0,72.73-19.34,72.73-56s-25.93-55.37-76.46-55.37H236.32v111.4h78.22Z"/></svg>

docs/about/brand.md

@@ -14,14 +14,14 @@ Have a need for Bootstrap's brand resources? Great! We have only a few guideline
 
 ## Mark and logo
 
-Use either the Bootstrap mark (a capital **B**) or the standard logo (just **Bootstrap**). It should always appear in Helvetica Neue Bold. **Do not use the Twitter bird** in association with Bootstrap.
+Use either the Bootstrap mark (a capital **B**) or the standard logo (just **Bootstrap**). It should always appear in San Francisco Display Semibold. **Do not use the Twitter bird** in association with Bootstrap.
 
 <div class="bd-brand-logos">
   <div class="bd-brand-item">
-    <div class="bd-booticon bd-booticon-lg">B</div>
+    <img class="svg" src="{{ site.baseurl }}/assets/brand/bootstrap-solid.svg" alt="Bootstrap" width="144" height="144">
   </div>
   <div class="bd-brand-item inverse">
-    <div class="bd-booticon bd-booticon-lg bd-booticon-inverse">B</div>
+    <img class="svg" src="{{ site.baseurl }}/assets/brand/bootstrap-outline.svg" alt="Bootstrap" width="144" height="144">
   </div>
 </div>
 <div class="bd-brand-logos">

docs/assets/scss/_booticon.scss

@@ -1,25 +0,0 @@
-//
-// Bootstrap "B" Booticon
-//
-
-.bd-booticon {
-  display: block;
-  width: 9rem;
-  height: 9rem;
-  font-size: 6.5rem;
-  line-height: 9rem;
-  color: #fff;
-  text-align: center;
-  cursor: default;
-  background-color: $bd-purple;
-  border-radius: 15%;
-
-  &.inverse {
-    color: $bd-purple;
-    background-color: #fff;
-  }
-  &.outline {
-    background-color: transparent;
-    border: 1px solid $bd-purple-light;
-  }
-}

docs/assets/scss/docs.scss

@@ -39,7 +39,6 @@ $bd-warning:        #f0ad4e;
 $bd-info:           #5bc0de;
 
 // Load docs components
-@import "booticon";
 @import "nav";
 @import "masthead";
 @import "featurettes";

docs/index.html

@@ -4,7 +4,7 @@ layout: home
 
 <main class="bd-masthead" id="content" role="main">
   <div class="container">
-    <span class="bd-booticon outline">B</span>
+    {% include bootstrap-icon.html %}
     <p class="lead">Bootstrap is the most popular HTML, CSS, and JS framework in the world for building responsive, mobile-first projects on the web.</p>
     <p class="lead">
       <a href="{{ site.baseurl }}/getting-started/download/" class="btn btn-lg" onclick="ga('send', 'event', 'Jumbotron actions', 'Download', 'Download {{ site.current_version }}');">Download Bootstrap</a>