badge-maker
Installation
npm install badge-maker
Usage
On the console
npm install -g badge-maker
badge build passed :brightgreen > mybadge.svg
As a library
With CommonJS in JavaScript,
const { makeBadge, ValidationError } = require('badge-maker')
With ESM or TypeScript,
import { makeBadge, ValidationError } from 'badge-maker'
const format = {
label: 'build',
message: 'passed',
color: 'brightgreen',
}
const svg = makeBadge(format)
console.log(svg) // <svg...
try {
makeBadge({})
} catch (e) {
console.log(e) // ValidationError: Field `message` is required
}
Node version support
The latest version of badge-maker supports all currently maintained Node versions. See the Node Release Schedule.
Format
The format is the following:
{
label: 'build', // (Optional) Badge label
message: 'passed', // (Required) Badge message
labelColor: '#555', // (Optional) Label color
color: '#4c1', // (Optional) Message color
logoBase64: 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI2NCIgaGVpZ2h0PSI2NCI+PHJlY3Qgd2lkdGg9IjY0IiBoZWlnaHQ9IjY0IiByeD0iOCIgZmlsbD0iI2IxY2U1NiIvPjxwYXRoIGQ9Ik04IDBoMjR2NjRIOGMtNC40MzIgMC04LTMuNTY4LTgtOFY4YzAtNC40MzIgMy41NjgtOCA4LTh6IiBmaWxsPSIjNWQ1ZDVkIi8+PC9zdmc+' // (Optional) Any custom logo can be passed in a URL parameter by base64 encoding
links: ['https://example.com', 'https://example.com'], // (Optional) Links array of maximum two links
// (Optional) One of: 'plastic', 'flat', 'flat-square', 'for-the-badge' or 'social'
// Each offers a different visual design.
style: 'flat',
}
Colors
There are three ways to specify color
and labelColor
:
One of the Shields named colors:
A three- or six-character hex color, optionally prefixed with
#
:
etc.
Any valid CSS color, e.g.
rgb(...)
,rgba(...)
hsl(...)
,hsla(...)
Raster Formats
Conversion to raster formats is no longer directly supported. In javascript code, SVG badges can be converted to raster formats using a library like gm. On the console, the output of badge
can be piped to a utility like imagemagick e.g: badge build passed :green | magick svg:- gif:-
.
Last updated