To make badges more standard and acceptable.

npm javascript html

Alternative: default, flat-square, dynamic-fore-color, dynamic-fore-color (flat_square).

A collection of badges designed for personal repositories, and I hope that all of these badges can be widely accepted and used in the document of any project so that they can become more and more standard. If you also have some new ideas about badges, just open an issue. Always remember that: More than a coder, more than a designer.

So, how to create such cute badges? It's very simple. As it's only registered on npm, you should install it by typing:

sudo npm install -g badges-cli

Then you can use this command-line tool for creating badges yourself:

Take the following command as an example, t means text content, and c means color. If you want to create a badge with SVG sources, you can specify with p to tell the tool where to find your sources. Finally, o is used to specify where to export the badge.

badge -t Alipay -c "#1CACEB" -p alipay.svg --style=flat_square --dynamic-fore-color -o output.svg

One more thing, according to the suggestion during creating badges for Jest, this tool has been extended to support skins with s to specify, which value can be "light" or "dark" temporarily at this moment.

To uninstall the tool, you can just uninstall it by typing:

sudo npm uninstall -g badges-cli

As for how to create a badge and add it to the collection? There are some steps you may need to follow:

  1. Fork the repository
  2. Install badges-cli
  3. Create a logo with SVG formatted (recommended) or other formats like PNG. (The logo should be wrapped into a square, in another word, the width should be equal to the height, or it would have been horizontally squished.)
  4. Save the logo in the folder dist
  5. Add data for your badge in the file script/data.js
     const data = {
         // ...
         'React Router': {
             fileName: 'react-router.svg',
             color: '#D0021B',
             description: 'A badge used for projects using React Router'
  6. Run the script by typing npm run build
  7. If successful, the readme file will be automatically updated
  8. Finally, push all updates and create a pull request for your change
  9. Done!!

Note that: so far haven't I thought out a perfect solution for calculating the width of text accurately yet, and it means that the text can not be aligned in some cases.

Note: if you like this project, feel free to buy me a swimming chance:

badges badges badges






Social Media



Football Clubs



:fuelpump: How to contribute

Have an idea? Found a bug? See how to contribute.

:scroll: License

MIT © aleen42