badge-studio

See gh-badges for a more stable version.

Install

yarn add badge-studio

Usage

You can try it online in the browser!

const badge = require('badge-studio')

// Optional
badge.loadFont('/path/to/Verdana.ttf', err => {
  // optional error callback
})

badge({
  subject: 'build',
  status: 'passing'
})
// => <svg...

Then you will get an SVG string which renders:

Or add a logo:

badge({
  logo: 'https://vuejs.org/images/logo.png',
  subject: 'vue',
  status: {
    text: '^2.3',
    bgColor: '#ff69b4'
  }
})

And you get:

API

badge(options)

options

template

Type: string
Default: default
Possible: default square

Choose a badge template.

color

Type: string
Default: #fff

Text color for both subject and status.

shadowColor

Type: string
Default: #010101

Shadow color for both subject and status. No shadow in square template.

subject/status

Type: string Object

subject is similar to status except that we put subject on the left and status on the right.

When it's a string, it's simply a shorthand of { text: string }.

text

Type: string

The text to display.

color

Type: string

Text color for subject or status.

bgColor

Type: string
Default: #555 for subject, #4c1 for status

Background color for subject or status.

shadowColor

Type: string

Shadow color for subject or status.

logo

Type: string object

url

Type: string

URL to an image.

Related

• shields.io - SVG template is extracted from this nice service.

Contributing

1. Fork it!
2. Create your feature branch: git checkout -b my-new-feature
3. Commit your changes: git commit -am 'Add some feature'
4. Push to the branch: git push origin my-new-feature
5. Submit a pull request :D

Author

badge-studio © egoist, Released under the MIT License.
Authored and maintained by egoist with help from contributors (list).

egoistian.com · GitHub @egoist · Twitter @rem_rin_rin