twbs/bootstrap-icons

Bootstrap官方开源SVG图标库

安装: 854 334

依赖者: 36

建议者: 5

安全性: 0

星标: 7 307

关注者: 139

分支: 1 060

公开问题: 414

语言:JavaScript

v1.11.3 2024-01-03 15:44 UTC

README

Bootstrap logo

Bootstrap Icons

Bootstrap Icons是一个包含2000多个图标的官方开源SVG图标库。
探索Bootstrap Icons

Bootstrap · 主题 · 博客

Bootstrap Icons preview

安装

Bootstrap Icons被打包并发布到npm上。我们只包含此包中的处理过的SVG,具体实现取决于你和你的团队。请阅读我们的文档了解使用说明。

npm i bootstrap-icons

对于使用Packagist的用户,您也可以通过Composer安装Bootstrap Icons

composer require twbs/bootstrap-icons

也支持Figma.

使用方法

根据您的配置,您可以通过以下几种方式将Bootstrap Icons包含在内。

  • 复制粘贴SVG作为嵌入式HTML
  • 通过<img>元素引用
  • 使用SVG精灵
  • 通过CSS包含

查看文档获取更多信息.

开发

Build Status npm version

克隆存储库,安装依赖项,并在本地启动Hugo服务器。

git clone https://github.com/twbs/icons/
cd icons
npm i
npm start

然后在浏览器中打开https://127.0.0.1:4000

npm脚本

以下是一些您在开发过程中会使用的关键脚本。请确保查看我们的package.jsonnpm run输出以获取脚本列表的完整列表。

添加SVG

图标通常只由@mdo添加,但也可以有例外。新图标首先在16x16px网格上设计在Figma中,然后以具有fill(没有描边)的扁平SVG格式导出。一旦新的SVG图标被添加到icons目录中,我们使用npm脚本来

  1. 使用SVGO优化我们的SVG。
  2. 修改SVG源代码,删除所有属性,然后以我们首选的顺序设置新的属性和值。

使用npm run icons运行脚本,运行npm run pages构建永久链接页面,完成这些页面,最后在新分支中提交结果以更新。

警告:请从您的分支中排除任何自动生成的文件,如font/**bootstrap-icons.svg,因为这些文件会导致冲突,我们通常在发布前更新dist文件。

发布

当发布新的Git标签时,文档会自动发布。有关更多信息,请参阅我们的GitHub Actionspackage.json

许可证

MIT

作者

@mdo