search

MichaelCurrin / badge-generator

Magically generate Markdown badges for your docs 🛡️ 🦡 🧙
https://michaelcurrin.github.io/badge-generator/
MIT License
370 stars 109 forks source link

Use icons in badges #39

Open MichaelCurrin opened 3 years ago

MichaelCurrin commented 3 years ago

Use binary data...

https://stackoverflow.com/questions/38985050/how-do-i-use-the-logo-option-in-shields-io-badges

encode e.g. https://b64.io/ or shell tool

And percent encode it

http://meyerweb.com/eric/tools/dencoder/

This can go in a recipe/cheatsheet guide too for the overall process and specific tools (or reference those tools in existing docs).

https://img.shields.io/badge/gadget-Raspberry%20Pi-pink.svg?logo=data%3Aimage%2Fsvg%2Bxml%3Bbase64%2CPHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI0MCIgaGVpZ2h0PSI0MCIgdmlld0JveD0iMTIgMTIgNDAgNDAiPjxwYXRoIGZpbGw9IiMzMzMzMzMiIGQ9Ik0zMiwxMy40Yy0xMC41LDAtMTksOC41LTE5LDE5YzAsOC40LDUuNSwxNS41LDEzLDE4YzEsMC4yLDEuMy0wLjQsMS4zLTAuOWMwLTAuNSwwLTEuNywwLTMuMiBjLTUuMywxLjEtNi40LTIuNi02LjQtMi42QzIwLDQxLjYsMTguOCw0MSwxOC44LDQxYy0xLjctMS4yLDAuMS0xLjEsMC4xLTEuMWMxLjksMC4xLDIuOSwyLDIuOSwyYzEuNywyLjksNC41LDIuMSw1LjUsMS42IGMwLjItMS4yLDAuNy0yLjEsMS4yLTIuNmMtNC4yLTAuNS04LjctMi4xLTguNy05LjRjMC0yLjEsMC43LTMuNywyLTUuMWMtMC4yLTAuNS0wLjgtMi40LDAuMi01YzAsMCwxLjYtMC41LDUuMiwyIGMxLjUtMC40LDMuMS0wLjcsNC44LTAuN2MxLjYsMCwzLjMsMC4yLDQuNywwLjdjMy42LTIuNCw1LjItMiw1LjItMmMxLDIuNiwwLjQsNC42LDAuMiw1YzEuMiwxLjMsMiwzLDIsNS4xYzAsNy4zLTQuNSw4LjktOC43LDkuNCBjMC43LDAuNiwxLjMsMS43LDEuMywzLjVjMCwyLjYsMCw0LjYsMCw1LjJjMCwwLjUsMC40LDEuMSwxLjMsMC45YzcuNS0yLjYsMTMtOS43LDEzLTE4LjFDNTEsMjEuOSw0Mi41LDEzLjQsMzIsMTMuNHoiLz48L3N2Zz4%3D

logo

Note some options like logo=github are available but this above proves the custom image usecase

MichaelCurrin commented 3 years ago

See also https://github.com/badges/shields/tree/master/logo

MichaelCurrin commented 3 years ago

For gitlab etc. I can't see github there

MichaelCurrin commented 3 years ago

From shields.io

https://shields.io/#your-badge

It looks like simpleicons is already supported by name! No binary use needed

?logo=appveyor

Insert one of the named logos from (bitcoin, dependabot, discord, gitlab, npm, paypal, serverfault, stackexchange, superuser, telegram, travis) or simple-icons. Simple-icons are referenced using names as they appear on the simple-icons site. If the name includes spaces, replace them with dashes (e.g: ?logo=visual-studio-code)

?logo=data:image/png;base64,…

Insert custom logo image (≥ 14px high). There is a limit on the total size of request headers we can accept (8192 bytes). From a practical perspective, this means the base64-encoded image text is limited to somewhere slightly under 8192 bytes depending on the rest of the request header.

MichaelCurrin commented 3 years ago

GenericBadge function supports this now

https://github.com/MichaelCurrin/badge-generator/blob/master/src/views/Catalogue.vue

MichaelCurrin commented 3 years ago

And on generic badge page.

The binary option would be nice though