引导图标Alpha 5

2020-06-27 16:03:12

今天,我们将推出第五版也是最后一版的“引导图标”(Bootstrap Icons)。在今天的alpha发布之后,我们将继续对现有图标进行最后的修饰,关闭更多的请求,并为稳定的v1版本做好准备。敬请关注!

这一版本增加了近300个新的字形,将我们带到了1000多个图标。我们充实了所有的日历图标以增加范围和事件,添加了一套新的电话图标,添加了大量的新设备和硬件图标,几十个徽章,等等。

就像我们之前的alpha版本一样,我们不仅有大量的全新图标,而且还对现有图标进行了数十次修正和改进。我们改进了我们的路径以减小图标文件的大小,花费更多的时间使其像素完美,在我们的图形文件中减少矢量黑客。此外,我们还更新了图标处理脚本,以分别读取每个SVG的ViewBox尺寸,以设置它们的宽度和高度。在未来的更新中,这将允许我们创建各种尺寸的图标,而不是默认的16x16。

除了数百个新图标之外,我们还添加了一个新的bootstrap-icons.svg精灵。对于SVG精灵的新手来说,它允许您在整个项目中加载单个资源并引用它的片段,而无需插入SVG的整个HTML。

<;SVG class=";bi";width=";32";高度=";32";Fill=";currentColor";>;<;use xlink:href=";bootstrap-icons.svg#HEAT-Fill";/>;<;/SVG>;<;SVG class=";bi&。Fill=";currentColor";>;<;use xlink:href=";bootstrap-icons.svg#toggles";/>;<;/SVG>;<;SVG class=";bi";width=";32";Height=";32";Fill=";currentColor";<;/svg>;

我们希望将来能围绕这一点进行一些优化,因为这是我们首次尝试使用SVG精灵系统。我们的问题总是欢迎反馈和想法!

在v1的稳定版本中,最大的单一功能将是图标网页字体。公关正在进行中,需要进一步的SVG路径清理,以及一些工具改进。总体而言,它感觉很有前途!

虽然图标字体出于几个实现原因是很棒的,但请注意,对于您的访问者来说,它们本身并不是最容易访问的选项。SVG提供了更多的控制和样式选项,并允许您从一开始就使用咏叹调角色和标题进行访问。

如果您有关于如何改进我们的图标、文档或工具以使其更易于访问和平易近人的其他提示,请毫不犹豫地与我们分享。

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

Alpha5已经发布到GitHub和NPM(包名为bootstrap-icons)。您可以通过更新到v1.0.0-alpha5或从Figma获取图标,从GitHub获得它。