前言
在前端开发中，很多项目都需要显示一些状态或者数据的 badge，这些 badge 可以展示很多信息，如部署状态、代码覆盖率、版本等等。在 badge 的创建和管理方面，npm 上有很多现成的包供我们使用，其中就包括了 badgen 这个 npm 包。本文将详细介绍如何使用 badgen 包来创建漂亮的 badge。
什么是 badgen
badgen 是一款轻量级的 SVG badge 生成器，通过简单的 API，可以让你快速生成各种形式的 badge。badgen 提供了一些默认的参数，同时也支持自定义，比如颜色、图标等等。
安装 badgen 包
badgen 是一个 npm 包，可以通过 npm 或者 yarn 安装：
--- ------- ------ ------
或者
---- --- ------
使用 badgen 创建 badge
使用 badgen 创建 badge 非常简单，只需要引入 badgen 包，并使用其提供的方法即可。
基础使用
下面是一个简单的例子，使用 badgen 创建一个带有文本、颜色和图标的 badge：
----- ------ - ------------------ ----- ----- - -------- ------ ------ ------- ------- ------ -------- ------ ------- ----- ----------------------------- --- -------------------
解释一下上面代码的各个参数：
label：badge 的文本status：badge 的状态color：badge 的颜色icon：badge 的图标
活跃时间
如果在 badge 中显示活跃时间，可以使用 date 参数：
----- ----- - -------- ------ ----- --------- ------- -- ----- ----- ------ -------- ----- --- ---------------------------- ---
标签颜色
指定 badge 的文本颜色和背景颜色：
----- ----- - -------- ------ ------------ ------- ---- - ------ ------ ---------- ----------- ------- ------ ------------- ---
自定义 badge 样式
使用 style 参数可以定义 badge 的样式，支持 flat、flat-square 和 plastic 这几种样式：
----- ----- - -------- ------ ---------- ------- ------ ------ --------- ------ --------- ---
带链接的 badge
如果需要在 badge 上添加链接，可以使用 link 参数：
----- ----- - -------- ------ ------- ------- ------- ----- ------ ------- ----- ------------------------ ---
结语
badgen 是一个非常简单易用的 badge 生成器，提供了很多参数和样式，可以让我们快速地创建漂亮的 badge。希望这篇文章可以帮助大家学习和使用 badgen。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/5f27cd633b0ab45f74a8ba2d