前言
在前端开发中，很多项目都需要显示一些状态或者数据的 badge，这些 badge 可以展示很多信息，如部署状态、代码覆盖率、版本等等。在 badge 的创建和管理方面，npm 上有很多现成的包供我们使用，其中就包括了 badgen 这个 npm 包。本文将详细介绍如何使用 badgen 包来创建漂亮的 badge。
什么是 badgen
badgen 是一款轻量级的 SVG badge 生成器，通过简单的 API，可以让你快速生成各种形式的 badge。badgen 提供了一些默认的参数，同时也支持自定义，比如颜色、图标等等。
安装 badgen 包
badgen 是一个 npm 包，可以通过 npm 或者 yarn 安装：
npm install badgen --save
或者
yarn add badgen
使用 badgen 创建 badge
使用 badgen 创建 badge 非常简单，只需要引入 badgen 包，并使用其提供的方法即可。
基础使用
下面是一个简单的例子，使用 badgen 创建一个带有文本、颜色和图标的 badge：
-- -------------------- ---- ------- ----- ------ - ------------------ ----- ----- - -------- ------ ------ ------- ------- ------ -------- ------ ------- ----- ----------------------------- --- -------------------
解释一下上面代码的各个参数：
label：badge 的文本status：badge 的状态color：badge 的颜色icon：badge 的图标
活跃时间
如果在 badge 中显示活跃时间，可以使用 date 参数：
const badge = badgen({
label: 'Last updated',
status: '2 hours ago',
color: 'green',
date: new Date('2021-05-01T14:30:00Z')
});标签颜色
指定 badge 的文本颜色和背景颜色：
const badge = badgen({
label: 'Downloads',
status: '1.5 / week',
color: '#007ec6',
labelColor: '#333',
style: 'flat-square'
});自定义 badge 样式
使用 style 参数可以定义 badge 的样式，支持 flat、flat-square 和 plastic 这几种样式：
const badge = badgen({
label: 'License',
status: 'MIT',
color: 'orange',
style: 'plastic'
});带链接的 badge
如果需要在 badge 上添加链接，可以使用 link 参数：
const badge = badgen({
label: 'GitHub stars',
status: '50',
color: 'blue',
link: 'https://github.com/...'
});结语
badgen 是一个非常简单易用的 badge 生成器，提供了很多参数和样式，可以让我们快速地创建漂亮的 badge。希望这篇文章可以帮助大家学习和使用 badgen。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5f27cd633b0ab45f74a8ba2d