Skip to content

bhousel/svg-labels

main
Switch branches/tags

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

build npm version

svg-labels

Generate awesome GitHub-style labels in SVG.

What is it?

If you've ever tried to recreate a GitHub label in a markdown document or issue, you'll discover you can't do it! Markdown doesn't let you style text and colors.

We can get around this by styling the text and colors in an SVG "image" and embedding that instead:

bug duplicate enhancement help wanted invalid question wontfix

The code for this is hosted on labl.es.

It works just like similar badge generator sites like shields.io or badge.fury.io

What's included

makeLabel(options) - does what it says on the tin

option type default description
option.text string 'bug' Label text - will appear centered on the label.
option.fontfamily string 'Helvetica,Arial' Text font - we just pass this directly into the SVG file.
option.fontsize number 12 Font size in px - this affects the overall size of the label.
option.fontweight number 600 Font weight as a number (over 500 is considered 'bold').
option.width number calculated Label width - calculated based on fontsize, but you can override it.
option.strokeopacity number 0.12 Opacity for the shadow outline.
option.strokewidth number calculated Shadow stroke width - also calculated but you can override it.
option.bgcolor hex #ee0701 Background color of the label.
option.fgcolor hex #333026 / #ffffff Foreground color of the label - calculated for light/dark backgrounds but you can override it.
option.strokecolor hex #273135 Stroke color for the shadow outline.

All hex colors can be passed either as 3 or 6 characters, and the '#' is optional.

Server

server.js contains a simple microservice built on the koa.js framework.

npm run start will start the server on port 3000.

This is the same code that serves up labl.es.

Bugs

There may be bugs !

Report any issues here: https://github.com/bhousel/svg-labels/issues

License

svg-labels is available under the ISC License. See the LICENSE.md file for more details.

About

🏷️ Generate GitHub-style labels in SVG

Resources

License

Code of conduct

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published