Bootstrap

Bootstrap 博客

有关Bootstrap的所有内容的新闻和公告，包括新版本、Bootstrap 主题和Bootstrap 图标。

Bootstrap 图标 Alpha 5

@mdo 2020 年 6 月 26 日

今天，我们发布了Bootstrap 图标的第五个也是最后一个 Alpha 版本。在今天的 Alpha 版本发布之后，我们将继续对现有图标进行最后的润色，完成更多请求，并为稳定版 v1 的发布做好准备。敬请期待！

1,000 多个图标

此版本新增了近 300 个新字形，使我们的图标总数超过 1,000 个。我们完善了所有日历图标，添加了范围和事件，新增了一套新的电话图标，添加了大量新的设备和硬件图标、数十个徽章等等。

All Bootstrap Icons

与之前发布的 Alpha 版本一样，我们不仅添加了大量全新的图标，还对现有图标进行了数十项修复和改进。我们改进了路径以减小图标文件大小，花费更多时间使图标像素完美，并在 Figma 文件中减少了矢量黑客。此外，我们更新了图标处理脚本，以单独读取每个 SVG 的 viewBox 尺寸来设置其 width 和 height。在未来的更新中，这将使我们能够创建不同尺寸的图标，而不是默认的 16x16。

新的 SVG 雪碧图

除了数百个新图标之外，我们还添加了一个新的 bootstrap-icons.svg 雪碧图。对于那些不熟悉 SVG 雪碧图的人来说，它允许您加载单个资源并在整个项目中引用其片段，而无需插入整个 SVG 的 HTML 代码。

以下是导入后它的工作原理的简要说明

<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>

我们希望在未来对此进行一些优化，因为这是我们首次尝试使用 SVG 雪碧图系统。欢迎您在我们的问题中提出反馈和想法！

即将在 v1 稳定版中发布

v1 稳定版发布中最大的功能将是 图标 Web 字体。目前正在进行一个 PR，需要进一步清理 SVG 路径，以及一些工具改进。总的来说，感觉非常有希望！

虽然图标字体在一些实现方面非常出色，但请注意，它们本身并不是最适合访问者的选项。SVG 提供了更多控制和样式选项，并允许您从一开始就通过 aria 角色和 <title> 来实现可访问性。

如果您有其他关于如何改进我们的图标、文档或工具以使其更易于访问和使用的方法，请随时分享。

除此之外，我们将继续清理和改进现有图标，然后目标是添加一些新图标。

下载

Alpha 5 已发布到 GitHub 和 npm（包名 bootstrap-icons）。您可以从 GitHub 获取它，通过更新到 v1.0.0-alpha5，或者通过从 Figma 获取图标。

相关文章