badges

To make badges more standard and acceptable.




npm cli 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 --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 and checkout the main branch
  2. Install dependencies by running npm i
  3. Create a logo with SVG formatted (recommended) or other formats like PNG. (The logo should be wrapped into a square, in other words, the width should be equal to the height, or it would have been horizontally squished.)
  4. Save the logo in the folder icon
  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 command npm run build to build to test and to prettify data.js
  7. If successful, the readme file will be automatically updated
  8. Finally, push the icon and modification of the data file and create a pull request for your change, the GitHub Action will build all for you, Done!!

Note that: so far haven't 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

Coder

Community

Communication

Multimedia

Inc

Social Media

Sponsors

Car

Football Clubs

Game

Designer

:fuelpump: How to contribute

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

:scroll: License

MIT © aleen42

powered by markdown-only