Bootstrap Icons Basket 图标系列解析：SVG 源码、Codepoint 与前端用法全指南-开发者社区

前端

【免费下载链接】icons

Official open source SVG icon library for Bootstrap.

项目地址：https://gitcode.com/gh_mirrors/ic/icons

本文以 Bootstrap Icons 官方开源图标库中basket（购物篮）系列图标为切入点，深入讲解单个图标在仓库中的定义方式、SVG 路径源码结构、字体 Codepoint 映射，以及在实际项目中嵌入 SVG、引用图标字体、使用 CSS 类的完整方法。读完本文，你将掌握 basket 系列全部 6 个图标（含 fill 变体与 basket2/basket3 衍生款）的底层实现，并能在自己的前端项目中直接落地使用。

Basket 图标在仓库中的定义

在 Bootstrap Icons 仓库中，每个图标都由两部分构成：一个存放于 icons 目录的 SVG 源文件，以及一份位于 docs/content/icons 目录下的 Markdown 元数据文档。basket.md 即是 basket 图标的元数据入口：

--- title: Basket categories: - Commerce tags: - shopping - checkout - check - cart - basket - bag ---

这份 Front Matter 定义了图标页面的三类元信息：

title：图标名称，会直接渲染为文档页的 H1 标题；
categories：图标所属分类，basket 被归入Commerce（商务）分类，与购物、结算场景对应；
tags：检索标签，包括 shopping（购物）、checkout（结算）、check、cart、basket、bag，方便在图标库检索时被快速命中。

这些元数据并非摆设——站点构建时由 docs/layouts/icons/single.html 读取并渲染，页面会展示Tags:与Category:两行信息（见该模板第 22-27 行）。

basket 系列六个 SVG 源码解读

basket 图标并不是孤立存在的。仓库 icons 目录下共有 6 个与购物篮直接相关的 SVG 文件，构成一个完整系列：

文件名	说明	Unicode Codepoint	CSS 内容值
basket.svg	线框版购物篮	`U+F180`	`\f180`
basket-fill.svg	实心填充版购物篮	`U+F17F`	`\f17f`
basket2.svg	变体二（简化提手结构）	`U+F182`	`\f182`
basket2-fill.svg	变体二实心版	`U+F181`	`\f181`
basket3-fill.svg	变体三实心版	`U+F183`	`\f183`
basket3.svg	变体三	`U+F184`	`\f184`

以上 Codepoint 与 CSS 内容值分别取自 font/bootstrap-icons.json 与 font/bootstrap-icons.css（第 156-161 行），可以直接核对。

所有 SVG 源文件遵循统一的规范结构：width="16" height="16"、fill="currentColor"、viewBox="0 0 16 16"，并以class="bi bi-basket"形式携带自身类名。以 basket.svg 为例：

<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-basket" viewBox="0 0 16 16"> <path d="M5.757 1.071a.5.5 0 0 1 .172.686L3.383 6h9.234L10.07 1.757a.5.5 0 1 1 .858-.514L13.783 6H15a1 1 0 0 1 1 1v1a1 1 0 0 1-1 1v4.5a2.5 2.5 0 0 1-2.5 2.5h-9A2.5 2.5 0 0 1 1 13.5V9a1 1 0 0 1-1-1V7a1 1 0 0 1 1-1h1.217L5.07 1.243a.5.5 0 0 1 .686-.172zM2 9v4.5A1.5 1.5 0 0 0 3.5 15h9a1.5 1.5 0 0 0 1.5-1.5V9zM1 7v1h14V7zm3 3a.5.5 0 0 1 .5.5v3a.5.5 0 0 1-1 0v-3A.5.5 0 0 1 4 10m2 0a.5.5 0 0 1 .5.5v3a.5.5 0 0 1-1 0v-3A.5.5 0 0 1 6 10m2 0a.5.5 0 0 1 .5.5v3a.5.5 0 0 1-1 0v-3A.5.5 0 0 1 8 10m2 0a.5.5 0 0 1 .5.5v3a.5.5 0 0 1-1 0v-3a.5.5 0 0 1 .5-.5m2 0a.5.5 0 0 1 .5.5v3a.5.5 0 0 1-1 0v-3a.5.5 0 0 1 .5-.5"/> </svg>

从路径数据可以读出图形构成：M5.757 1.071起笔的斜向提手线段连向篮口（3.383 6h9.234绘出篮口横梁），篮身以15/1为左右边界、13.5/9为上下边界，并在底部用 5 个相同的横向小弧段（a.5.5 0 0 1 .5.5v3...）表现编织篮底的纹理。而 basket-fill.svg 则在相同轮廓基础上改用更紧凑的单路径封闭填充，篮底细节用 5 组半圆开窗（a.5.5 0 0 1-.5.5类弧段）体现镂空感，整体视觉更厚重、辨识度更高，适合做按钮、徽标等需要强调的场景。

变体方面，basket2.svg 拆分为两个<path>：第一条用 3 个圆点表示篮口悬挂标记，第二条绘制篮体与提手，篮底改为倾斜弧线开口（a.75.75 0 0 1-.722-.544的漏斗形收口）；basket3.svg 则采用更简化的双路径结构。三组变体可分别满足不同的视觉密度需求。

在项目中引用 basket 图标的三种方式

根据仓库根目录 README.md 的 Usage 说明，Bootstrap Icons 支持三种主流引用方式。

1. 直接嵌入 SVG（推荐，可深度定制）

将 basket.svg 的源码直接粘贴进 HTML，或用<img>引用文件：

<!-- 内联嵌入 --> <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-basket" viewBox="0 0 16 16"> <path d="M5.757 1.071a.5.5 0 0 1 .172.686L3.383 6h9.234L10.07 1.757a.5.5 0 1 1 .858-.514L13.783 6H15a1 1 0 0 1 1 1v1a1 1 0 0 1-1 1v4.5a2.5 2.5 0 0 1-2.5 2.5h-9A2.5 2.5 0 0 1 1 13.5V9a1 1 0 0 1-1-1V7a1 1 0 0 1 1-1h1.217L5.07 1.243a.5.5 0 0 1 .686-.172zM2 9v4.5A1.5 1.5 0 0 0 3.5 15h9a1.5 1.5 0 0 0 1.5-1.5V9zM1 7v1h14V7zm3 3a.5.5 0 0 1 .5.5v3a.5.5 0 0 1-1 0v-3A.5.5 0 0 1 4 10m2 0a.5.5 0 0 1 .5.5v3a.5.5 0 0 1-1 0v-3A.5.5 0 0 1 6 10m2 0a.5.5 0 0 1 .5.5v3a.5.5 0 0 1-1 0v-3A.5.5 0 0 1 8 10m2 0a.5.5 0 0 1 .5.5v3a.5.5 0 0 1-1 0v-3a.5.5 0 0 1 .5-.5m2 0a.5.5 0 0 1 .5.5v3a.5.5 0 0 1-1 0v-3a.5.5 0 0 1 .5-.5"/> </svg> <!-- 或引用文件 --> <img src="/path/to/bootstrap-icons/icons/basket.svg" alt="Basket" width="16" height="16">

由于图标使用fill="currentColor"，颜色会自动跟随父元素的color，只需修改width/height即可缩放，无需处理多尺寸位图。

2. 图标字体（Font）与 Codepoint

若通过 npm 安装完整字体包，可直接使用字体类。对应 CSS 定义见 font/bootstrap-icons.css 第 156-161 行：

.bi-basket-fill::before { content: "\f17f"; } .bi-basket::before { content: "\f180"; } .bi-basket2-fill::before { content: "\f181"; } .bi-basket2::before { content: "\f182"; } .bi-basket3-fill::before { content: "\f183"; } .bi-basket3::before { content: "\f184"; }

页面中只需写<i class="bi bi-basket"></i>即可。如果你想脱离 CSS 类、直接用 Codepoint 手工控制，font/bootstrap-icons.json 提供了每个图标的 Unicode 映射（如"basket": 61824），可以在不同宿主环境中使用：

CSS：content: "\f180"；
JS：\uf180；
HTML：；
Unicode 记法：U+F180。

这正是图标文档页 docs/layouts/icons/single.html 第 121-139 行的逻辑：模板读取font/bootstrap-icons.json后，将十进制码点格式化为U+、CSS 反斜杠、JS\u与 HTML 实体四种形式展示给访问者。

3. 图标精灵（SVG Sprite）

仓库根目录提供了合并后的 bootstrap-icons.svg 精灵文件，所有图标以<symbol>形式内聚在一个 SVG 中，可用<use>引用，减少请求数量、提升缓存效率。basket 系列同样包含在精灵文件内。

安装与在文档页中的实际渲染

安装方式

按根目录 README.md 与 docs/content/_index.md 的说明，basket 图标随整个图标库一起分发：

# npm 安装（包含 SVG、精灵与字体） npm i bootstrap-icons # 或通过 Composer / Packagist 安装 composer require twbs/bootstrap-icons

仓库根目录的 composer.json 与 package.json 分别对应两种分发渠道；hugo.yml 中的version: "1.13.1"则标明了当前文档站点对应的图标库版本。

图标文档页的生成原理

单个图标的文档页（例如 basket 页面）由 docs/layouts/icons/single.html 模板驱动生成，其核心流程值得前端工程师了解：

通过.File.TranslationBaseName取得图标名（如basket）；
拼接出本地 SVG 路径/icons/basket.svg，并用readFile读取源码；
将 SVG 直接注入页面，分别渲染"大图预览"（font-size: 10em的展示区）与"Examples"示例区——示例区覆盖了标题场景、行内文本、链接、按钮组、输入组等多种真实使用形态（模板第 40-106 行）；
从 font/bootstrap-icons.json 读取 Codepoint，生成"Icon font""Code point""Copy HTML"侧栏，并提供 SVG 源码高亮块，方便开发者直接复制使用（模板第 108-148 行）。

也就是说，你在图标库官网看到 basket 页面的"字体片段 + 码点 + 可复制 SVG"三件套，全部由这份模板与仓库数据文件自动生成，保证了 2000+ 图标页面之间的高度一致。

适用场景与选型建议

basket 系列图标适合电商与购物场景，具体建议如下：

购物车/结算按钮：推荐 basket-fill.svg，实心造型在按钮、Badge 上对比度更好；
购物篮入口、商品列表操作：线框版 basket.svg 更轻盈，适合导航栏与正文混排；
需要细分语义（如"已入篮""去结算"）：可同时使用 basket、basket2、basket3 三组变体区分层级，配合text-primary、text-success等 Bootstrap 文本颜色类即可实现状态着色；
强调响应式缩放：所有图标均基于 16×16 viewBox 的矢量路径，任意尺寸下保持锐利，无需位图多倍图。

若需修改图标形状或颜色，直接编辑内联 SVG 的<path>或添加style即可；若需保持全站统一，优先通过 CSS 类与currentColor机制控制。仓库中 docs/layouts/icons/single.html 展示的"按钮 + 图标""输入组前置图标"等组合模式，是电商界面中复用 basket 图标的高频模板，可直接参考其 DOM 结构落地。