hsghn / web-badge Goto Github PK

Web Badge

Web Badge will provide about 2152 amazing
Badges, SVG Logo & Hex Color Code
to use in GitHub Markdown or Any Web Pages.

This project runs slowly because of a lacking package & for that I have to use API & the API should run 2152+ times on homepage. That makes this project quite slow. To prevent this & make some optimization I use Lazy, Suspense of React. And as soon as possible I will fix & I'll make another project which can deal more better than it. However, it can still be used. You have to wait 1-2 minutes for the loading to complete.

Note: If you can't see anything in browser after run, please disable your AdBlocker for this website.

This project is aimed to simplify your GitHub Profile Badge or Web Badge creation process by providing amazing card which can be copy on double click in Markdown. Beside you can also download Brand Logo in SVG & PNG format. Moreover it will provide Hex Color code of Brand Logo.

• Brand SVG Logo
• Brand Badge
• Logo Hex Code
• Copy Badge & Hex Code
• Download Brand Logo in SVG or PNG Format
• Light Dark Theme
• More Fast

Actually because of an issue for now this project is running slow on the web. I'll try to fix it soon. However, it can still be used. You have to wait 1-2 minutes for the loading to complete. Note: If you can't see anything in browser after run, please disable your AdBlocker for this website.

• Where to Use

  • GitHub Profile
  • README.md
  • Markdown File
  • Webpage or Website

• Best Way of Use

  • Firefox Browser. (Can be use in other Browser)
  • Hover & Double click for Copy Badge & Hex Code.
  • Click download & get SVG Logo.
  • Change SVG to PNG for Download PNG Logo.

As before declared, because of an issue for now the website it running slow & it create a side effect on

• Generating Badge
• Loading Webpage
• Search Process
• SVG to PNG Conversion

• Way to Use Case of Badge

After double click on Badge, you will get a code in your clipboard like below. This code API are owned by Shield. Follow their rules for use them. I won't take responsibility for any damage.

![](https://img.shields.io/badge/About.me-00A98F?style=for-the-badge&logo=About.me&logoColor=white)

Now You can use this in 2 way

1. Paste where you want to use badge without making any changes to code.

![](https://img.shields.io/badge/About.me-00A98F?style=for-the-badge&logo=About.me&logoColor=white)

2. Take only URL & set to <img src='URL'/>

<img src='https://img.shields.io/badge/About.me-00A98F?style=for-the-badge&logo=About.me&logoColor=white)'/>

• Way to Use Case of Hex Color

After double click on Hex Code, you will get a code in your clipboard like below. Use it wherever you want.

#00B388

• Way to Use Case of Download SVG & PNG

  • By default whenever you click on Download. You will get a SVG icon. This Icon owned by Simple Icons. Follow their rules for use them. I won't take responsibility for any damage.
  • Switch to SVG > PNG for download PNG icon of any Brand.

👍🏻 If you're using this project & happy with it or you appreciate what I do and wish to support my work, you can consider by

• Support To Buy Ko-fi 🍵
• Buy Me A Coffee ☕️
• Become a Patreon 🫖

I will be open to any contribution. If you have any idea, please let me know. Please follow this steps to Contribute

All the developers who made different Libraries, Packages, Tools & APIs. Specially

• React
• Simple Icons
• Shield

This project is under GPL-3.0 License.