aleen42 / Badges

badges

To make badges more standard and acceptable.

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 -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 in 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 any 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: 'router.svg',
           color: '62DAFB',
           description: 'A badge used for projects using React Router'
       }
   };
   

6. Run the script by typing npm run build
7. If succeed, 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 width of text accurately yet, and it means that the text can not be aligned in some cases.

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

Coder

• A badge used for repositories which has used the framework, Angular
• A badge used for npm packages
• A badge used for projects using Gulp to build
• A badge used for repositories which has used the framework, React
• A badge used for projects using React Router
• A badge for projects using Modernizr
• A badge for projects using ReactiveX
• A badge used for projects using Jest for testing JavaScript
• A badge used for projects using Jest for testing JavaScript
• A badge used for projects using Jasmine for testing JavaScript
• A badge for the Visual Studio IDE
• A badge for the Visual Studio Code IDE
• A badge for projects using QUnit for unit tests
• A badge used for projects using React Redux
• A badge used for projects using ESLint
• A badge used for books publish by Gitbook
• A badge used for books publish by Gitbook
• A badge used for projects built with Node.js
• A badge used for repositories which has used the framework, Vue
• A badge used for books publish by Vuepress
• A badge used for projects can be discussed on Gitter
• A badge for the Atom editor
• A badge for the Sulime Text editor
• A badge use for projects using Tensorflow
• A badge used for bower packages
• A badge used for Gitlab repositories
• A badge used for projects using grunt to build
• A badge used for RSS subscribing
• A badge used for projects that coded with JavaScript
• A badge used for projects using Mocha for unit tests
• A badge used for documents written on Apiary
• A badge used for projects deployed on Docker
• A badge used for projects that coded with TypeScript
• A badge used for projects running on JSFiddle
• A badge used for projects built with Webpack
• A badge used for projects discussed on Slack
• A badge for the IDEA editor
• A badge used for projects running on CodePen
• A badge used for hacking projects (Business Using is not allowed)
• A badge used for GitHub repositories

Community

• A badge used for any articles translated by gold-miner
• A badge used for sharing communities on Facebook
• A badge used for references on Stack Exchange
• A badge used for references on Super User
• A badge used for sharing communities on Twitter
• A badge used for sharing communities on Google+
• A badge used for sharing communities on Pinterest
• A badge used for sharing communities on Sina Weibo
• A badge used for articles shared on Reddit
• A badge used for GitHub repositories
• A badge used for articles shared on Medium
• A badge used for references on Server Fault

Communication

• A badge used for sharing communication ways on Messenger
• A badge used for sharing communication ways on Telegram
• A badge used for sharing communication ways on Skype
• A badge used for sharing communication ways on WhatsApp
• A badge used for sharing communication ways on Line
• A badge used for sharing communication ways on WeChat
• A badge used for sharing communication ways on Coremail Lunkr

Multimedia

• A badge used for music shared on SoundCloud
• A badge used for music shared on Spotify

Inc

• A badge used for projects of NASA
• A badge used for any project of Codrops Inc.
• A badge used for any articles of Xitu Inc.
• A badge used for the Coremail Inc.
• A badge used for any project of Soundtooth Inc.
• A badge used for the Amazon Inc.
• A badge used for the Bitcoin Inc.
• A badge used for the Airbnb Inc.
• A badge used for the Monsoon Inc.

Sponsors

• A badge used for Paypal sponsors.
• A badge used for Alipay sponsors.
• A badge used for Patreon sponsors.
• A badge used for BuyMeACoffee sponsors.
• A badge used for IssueHunt sponsors.

Car

• A badge used for cars of Lamborghini
• A badge used for cars of Bugatti
• A badge used for cars of Porsche
• A badge used for cars of Tesla
• A badge used for cars of Ferrari
• A badge used for cars of Toyota
• A badge used for cars of Mitsubishi
• A badge used for cars of Maserati
• A badge used for cars of Marussia
• A badge used for cars of Koenigsegg
• A badge used for cars of BMW
• A badge used for cars of Land Rover
• A badge used for cars of Mercedes Benz
• A badge used for cars of Audi

Football Clubs

• A badge used for FC Liverpool
• A badge used for FC Real Madrid
• A badge used for FC Manchester United
• A badge used for FC Arsenal
• A badge used for FC AC Milan
• A badge used for FC Bayern Munchen
• A badge used for FC Barcelona
• A badge used for FC Chelsea

Game

• A badge used for any game supported on the platform Steam
• A badge used for the game Ingress published by Niantic Inc.
• A badge used for the game osu! published by ppy

Designer

• A badge used for designing projects sharing on Behance
• A badge used for designing projects using Photoshop as a tool
• A badge used for designing projects using Illustrator as a tool
• A badge used for projects using Dreamweaver as a tool
• A badge used for designing projects using After Effect as a tool
• A badge used for designing projects using Premiere as a tool
• A badge used for designing projects using Flash as a tool
• A badge used for designing projects with Zeplin

⛽️ How to contribute

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

📜 License

MIT © aleen42