deploy: 37a6905

archive/index.html

@@ -259,6 +259,9 @@ <h1 class="mb-1 mb-lg-2 f1 fw-600">The Bootstrap Blog</h1>
   <h3>2023</h3>
   <ul class="list mb-5">
     <li>
+      <a href="/2023/09/12/bootstrap-icons-1-11-0/">Bootstrap Icons v1.11.0</a>
+      <span title="12 Sep 23 00:01 UTC">Sep 12, 2023</span>
+    </li><li>
       <a href="/2023/07/26/bootstrap-5-3-1/">Bootstrap 5.3.1</a>
       <span title="26 Jul 23 08:05 UTC">Jul 26, 2023</span>
     </li><li>

page/10/index.html

@@ -258,7 +258,7 @@ <h1 class="mb-1 mb-lg-2 f1 fw-600">The Bootstrap Blog</h1>
   <div class="posts">
     <div class="post">
         <h1 class="post-title fw-600">
-          <a href="/2020/06/16/bootstrap-5-alpha/" class="text-decoration-none">Bootstrap 5 alpha!</a>
+          <a href="/2020/06/26/bootstrap-icons-alpha5/" class="text-decoration-none">Bootstrap Icons Alpha 5</a>
         </h1>
 
         <div class="d-flex align-items-center mb-4 text-muted author-info">
@@ -268,6 +268,59 @@ <h1 class="post-title fw-600">
                                      alt="" width="32" height="32">
     <span>@mdo</span>
   </a>
+  <span class="d-flex align-items-center ms-3" title="26 Jun 20 21:30 UTC">
+    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" class="me-2" viewBox="0 0 16 16" role="img" fill="currentColor">
+  <path d="M11 6.5a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-1a.5.5 0 0 1-.5-.5v-1z"/>
+  <path d="M3.5 0a.5.5 0 0 1 .5.5V1h8V.5a.5.5 0 0 1 1 0V1h1a2 2 0 0 1 2 2v11a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V3a2 2 0 0 1 2-2h1V.5a.5.5 0 0 1 .5-.5zM1 4v10a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4H1z"/>
+</svg>
+June 26, 2020</span>
+</div>
+<div class="ratio ratio-16x9">
+  <iframe src="https://www.youtube-nocookie.com/embed/HgzGwKwLmgM?rel=0" title="YouTube Video" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" width="760" height="570" allowfullscreen></iframe>
+</div>
+
+
+
+
+        <p>Today we&rsquo;re shipping our fifth and final alpha release of <a href="https://icons.getbootstrap.com">Bootstrap Icons</a>. After today&rsquo;s alpha release, we&rsquo;ll be moving onto final touch ups of existing icons, closing out some more requests, and buttoning things up for a stable v1 release. Stay tuned!</p>
+<h2 id="1000-icons">1,000+ icons</h2>
+<p>This release adds nearly 300 new glyphs, taking us right past 1,000 icons. We&rsquo;ve fleshed out all our calendar icons to add ranges and events, added a suite of new phone icons, added tons of new devices and hardware icons, dozens of badges, and so much more.</p>
+<p><a href="https://icons.getbootstrap.com"><img src="/assets/img/2020/06/bootstrap-icons-alpha5-all.png" class="d-block img-fluid mb-2 rounded border" alt="All Bootstrap Icons" loading="lazy" width="1821" height="2050">
+</a></p>
+<p>As was the case with our previous alpha releases, not only do we have tons of brand new icons, but also dozens of fixes and refinements to existing ones. We&rsquo;ve improved our paths to reduce icon file sizes, spending more time making things pixel perfect and with fewer vector hacks in our Figma files. In addition, we&rsquo;ve updated our icon processing script to read the <code>viewBox</code> dimensions of each SVG individually to set their <code>width</code> and <code>height</code>. In future updates, this will allow us to create icons of various dimensions instead of our default 16x16.</p>
+<h2 id="new-svg-sprite">New SVG sprite</h2>
+<p>In addition to hundreds of new icons, we&rsquo;ve added a new <code>bootstrap-icons.svg</code> sprite. For those new to SVG sprites, it allows you to load a single asset and reference fragments of it across your project without inserting the entire HTML for the SVG.</p>
+<p>Here&rsquo;s a quick look at how it works once imported:</p>
+<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">svg</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;bi&#34;</span> <span class="na">width</span><span class="o">=</span><span class="s">&#34;32&#34;</span> <span class="na">height</span><span class="o">=</span><span class="s">&#34;32&#34;</span> <span class="na">fill</span><span class="o">=</span><span class="s">&#34;currentColor&#34;</span><span class="p">&gt;</span>
+</span></span><span class="line"><span class="cl">  <span class="p">&lt;</span><span class="nt">use</span> <span class="na">xlink:href</span><span class="o">=</span><span class="s">&#34;bootstrap-icons.svg#heart-fill&#34;</span><span class="p">/&gt;</span>
+</span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">svg</span><span class="p">&gt;</span>
+</span></span><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">svg</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;bi&#34;</span> <span class="na">width</span><span class="o">=</span><span class="s">&#34;32&#34;</span> <span class="na">height</span><span class="o">=</span><span class="s">&#34;32&#34;</span> <span class="na">fill</span><span class="o">=</span><span class="s">&#34;currentColor&#34;</span><span class="p">&gt;</span>
+</span></span><span class="line"><span class="cl">  <span class="p">&lt;</span><span class="nt">use</span> <span class="na">xlink:href</span><span class="o">=</span><span class="s">&#34;bootstrap-icons.svg#toggles&#34;</span><span class="p">/&gt;</span>
+</span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">svg</span><span class="p">&gt;</span>
+</span></span><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">svg</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;bi&#34;</span> <span class="na">width</span><span class="o">=</span><span class="s">&#34;32&#34;</span> <span class="na">height</span><span class="o">=</span><span class="s">&#34;32&#34;</span> <span class="na">fill</span><span class="o">=</span><span class="s">&#34;currentColor&#34;</span><span class="p">&gt;</span>
+</span></span><span class="line"><span class="cl">  <span class="p">&lt;</span><span class="nt">use</span> <span class="na">xlink:href</span><span class="o">=</span><span class="s">&#34;bootstrap-icons.svg#shop&#34;</span><span class="p">/&gt;</span>
+</span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">svg</span><span class="p">&gt;</span>
+</span></span></code></pre></div><p>We hope to include some optimizations around this in the future as it&rsquo;s our first endeavor into an SVG sprite system. Feedback and ideas are always welcome in our issues!</p>
+<h2 id="coming-in-v1-stable">Coming in v1 stable</h2>
+<p>The single biggest feature coming in v1&rsquo;s stable release will be <a href="https://github.com/twbs/icons/pull/287">icon web fonts</a>. There&rsquo;s a PR underway that requires further SVG path cleanup, as well as some tooling improvements. Overall it feels pretty promising!</p>
+<p>While icon fonts are great for a handful of implementation reasons, please be aware that they are not inherently the most accessible option for your visitors. SVGs provide more control and styling options, and allow you to be accessible from the start with <code>aria</code> roles and <code>&lt;title&gt;</code>s.</p>
+<p>If you have additional tips for how we can improve our icons, documentation, or tooling to be more accessible and approachable, don&rsquo;t hesitate to share.</p>
+<p>Beyond that, we&rsquo;ll continue to clean up and improve existing icons and then aim to add a handful of new icons.</p>
+<h2 id="download">Download</h2>
+<p>Alpha 5 has been published to GitHub and npm (package name <code>bootstrap-icons</code>). Get your hands on it <a href="https://github.com/twbs/icons/releases">from GitHub</a>, by updating to <code>v1.0.0-alpha5</code>, or by snagging the <a href="https://www.figma.com/file/hTJtQ2MrMTeNVmYrVBqNZZ/Bootstrap-Icons-v1.0.0-alpha5">icons from Figma</a>.</p>
+
+      </div><div class="post">
+        <h1 class="post-title fw-600">
+          <a href="/2020/06/16/bootstrap-5-alpha/" class="text-decoration-none">Bootstrap 5 alpha!</a>
+        </h1>
+
+        <div class="d-flex align-items-center mb-4 text-muted author-info">
+  <a class="d-flex align-items-center text-muted text-decoration-none" href="https://github.com/mdo" target="_blank" rel="noopener">
+    <img class="mb-0 me-2 rounded-2" srcset="https://github.com/mdo.png?size=32, https://github.com/mdo.png?size=64 2x"
+                                     src="https://github.com/mdo.png?size=32"
+                                     alt="" width="32" height="32" loading="lazy">
+    <span>@mdo</span>
+  </a>
   <span class="d-flex align-items-center ms-3" title="16 Jun 20 11:00 UTC">
     <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" class="me-2" viewBox="0 0 16 16" role="img" fill="currentColor">
   <path d="M11 6.5a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-1a.5.5 0 0 1-.5-.5v-1z"/>
@@ -276,7 +329,7 @@ <h1 class="post-title fw-600">
 June 16, 2020</span>
 </div>
 <div class="ratio ratio-16x9">
-  <iframe src="https://www.youtube-nocookie.com/embed/3GwjfUFyY6M?rel=0" title="YouTube Video" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" width="760" height="570" allowfullscreen></iframe>
+  <iframe class="lazy" data-src="https://www.youtube-nocookie.com/embed/3GwjfUFyY6M?rel=0" title="YouTube Video" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" width="760" height="570" allowfullscreen></iframe>
 </div>
 
 
@@ -554,70 +607,6 @@ <h2 id="permalink-pages">Permalink pages</h2>
 <h2 id="download">Download</h2>
 <p>Alpha 3 has been published to GitHub and npm (package name <code>bootstrap-icons</code>). Get your hands on it <a href="https://github.com/twbs/icons/releases">from GitHub</a>, by updating to <code>v1.0.0-alpha3</code>, or by snagging the <a href="https://www.figma.com/file/NKZWcfR2T3FU0I7fNLqFvI/Bootstrap-Icons-v1.0.0-alpha3">icons from Figma</a>.</p>
 
-      </div><div class="post">
-        <h1 class="post-title fw-600">
-          <a href="/2019/12/14/bootstrap-icons-alpha2/" class="text-decoration-none">Bootstrap Icons Alpha 2</a>
-        </h1>
-
-        <div class="d-flex align-items-center mb-4 text-muted author-info">
-  <a class="d-flex align-items-center text-muted text-decoration-none" href="https://github.com/mdo" target="_blank" rel="noopener">
-    <img class="mb-0 me-2 rounded-2" srcset="https://github.com/mdo.png?size=32, https://github.com/mdo.png?size=64 2x"
-                                     src="https://github.com/mdo.png?size=32"
-                                     alt="" width="32" height="32" loading="lazy">
-    <span>@mdo</span>
-  </a>
-  <span class="d-flex align-items-center ms-3" title="14 Dec 19 00:00 UTC">
-    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" class="me-2" viewBox="0 0 16 16" role="img" fill="currentColor">
-  <path d="M11 6.5a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-1a.5.5 0 0 1-.5-.5v-1z"/>
-  <path d="M3.5 0a.5.5 0 0 1 .5.5V1h8V.5a.5.5 0 0 1 1 0V1h1a2 2 0 0 1 2 2v11a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V3a2 2 0 0 1 2-2h1V.5a.5.5 0 0 1 .5-.5zM1 4v10a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4H1z"/>
-</svg>
-December 14, 2019</span>
-</div>
-<div class="ratio ratio-16x9">
-  <iframe class="lazy" data-src="https://www.youtube-nocookie.com/embed/HgzGwKwLmgM?rel=0" title="YouTube Video" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" width="760" height="570" allowfullscreen></iframe>
-</div>
-
-
-
-
-        <p>There&rsquo;s a brand new update of Bootstrap Icons today with our second alpha release! We&rsquo;ve updated nearly 20 icons and added over 100 new icons since our last release just a few weeks ago.</p>
-<h2 id="new-icons">New icons</h2>
-<p>With over 120 new and updated icons, this is likely going to be our largest update before we our first stable release. We have some renamed icons, fixed bugs, new tools icons, new typography icons, tons of new arrows, and so much more.</p>
-<p><a href="https://icons.getbootstrap.com/"><img src="/assets/img/2019/12/bootstrap-icons-alpha2-new.png" class="d-block img-fluid mb-2 rounded border" alt="New icons in Alpha 2" loading="lazy" width="2280" height="1440">
-</a></p>
-<h2 id="highlights">Highlights</h2>
-<p>Here&rsquo;s a summary of what&rsquo;s been fixed, updated, or renamed in this release. For a full summary of what&rsquo;s new, head to the <a href="https://github.com/twbs/icons/releases/tag/v1.0.0-alpha2">GitHub release</a> or <a href="https://github.com/twbs/icons/pull/78">Alpha 2 pull request</a>.</p>
-<ul>
-<li><strong>Fixed:</strong>
-<ul>
-<li>Bootstrap icon stroke now 1px instead of 1.5px</li>
-<li>tv-fill icon no longer has graphical glitch</li>
-<li>circle-slash icon strokes now connect</li>
-<li>trash icons now use a single shape</li>
-<li>trash-fill icon no longer has a gap between lid and bin</li>
-<li>layout-split no longer has space between vertical divide</li>
-</ul>
-</li>
-<li><strong>Updated:</strong>
-<ul>
-<li>blockquote icons now feature more legible quotation marks</li>
-<li>command icon now 1px smaller, no longer sitting on half pixel</li>
-<li>gear icons now have rounded corners</li>
-<li>eye is now outline by default (use new eye-fill variant if needed)</li>
-<li>redrew sound waves on volume icons</li>
-<li>corrected (reversed) the direction of backspace icon</li>
-</ul>
-</li>
-<li><strong>Renamed:</strong>
-<ul>
-<li>changed microphone to mic</li>
-<li>existing expand/contract icons are now angle-expand and angle-contract</li>
-</ul>
-</li>
-</ul>
-<h2 id="get-em">Get &rsquo;em</h2>
-<p>Alpha 2 has been published to GitHub and npm (package name <code>bootstrap-icons</code>). Get your hands on it <a href="https://github.com/twbs/icons/releases">from GitHub</a>, by updating to <code>v1.0.0-alpha2</code>, or by snagging the <a href="https://www.figma.com/file/0xfDVFogWu6g15bVOvBzxS/Bootstrap-Icons-v1.0.0-alpha2">icons from Figma</a>.</p>
-
       </div>
   </div>