访问官网
Github
Bootstrap图标
Bootstrap官方开源SVG图标库，包含超过2,000个图标。
探索Bootstrap图标 »
Bootstrap
·
主题
·
博客
安装
Bootstrap图标已打包并发布到npm。我们在此包中只包含了处理过的SVG文件——具体实现由您和您的团队决定。阅读我们的文档以获取使用说明。
npm i bootstrap-icons
对于使用Packagist的用户，您也可以通过Composer安装Bootstrap图标：
composer require twbs/bootstrap-icons
使用
根据您的设置，您可以通过多种方式包含Bootstrap图标。
- 以嵌入HTML的方式复制粘贴SVG
- 通过
<img>元素引用 - 使用SVG精灵图
- 通过CSS包含
开发
克隆仓库，安装依赖，并在本地启动Hugo服务器。
git clone https://github.com/twbs/icons/
cd icons
npm i
npm start
然后在浏览器中打开http://localhost:4000。
npm脚本
以下是开发过程中您将使用的一些关键脚本。请查看我们的package.json或npm run输出以获取完整的脚本列表。
| 脚本 | 描述 |
|---|---|
start | docs-serve的别名 |
docs-serve | 启动本地Hugo服务器 |
pages | 使用模板Markdown为每个图标生成永久链接页面 |
icons | 处理并优化icons目录中的SVG，生成字体和精灵图 |
添加SVG
图标通常只由@mdo添加，但可以有例外情况。新的图形首先在Figma中设计，基于16x16px的网格，然后导出为扁平化的SVG，使用fill（无描边）。一旦新的SVG图标被添加到icons目录，我们使用npm脚本来：
- 使用SVGO优化我们的SVG。
- 修改SVG源代码，删除所有属性，然后按照我们首选的顺序设置新的属性和值。
使用npm run icons运行脚本，运行npm run pages构建永久链接页面，完成这些页面，最后在新分支中提交结果以进行更新。
警告：请从您的分支中排除任何自动生成的文件，如font/**和bootstrap-icons.svg，因为它们会导致冲突，我们通常在发布前更新dist文件。
发布
当新的Git标签发布时，文档会自动发布。查看我们的GitHub Actions和package.json以获取更多信息。
