markdown-badges icon indicating copy to clipboard operation
markdown-badges copied to clipboard

Base64 Icons are extremely lengthy

Open kohasummons opened this issue 2 years ago • 4 comments

Discussed in https://github.com/Ileriayo/markdown-badges/discussions/362

Originally posted by kohasummons May 9, 2022 Often times we get PRs that contribute to our growing stash of badges. While we appreciate these contributions - and contributors, there is a sinister issue that has been leaking into some of these contributions - base64 logos make the URL extremely long.

A little background to offer context, markdown-badges leverage the @shields.io API. The shields API utilizes the simple icons project to provide icons for badges. For quite a while these have worked quite well until there was a need for badges which simple icon has no icons in its stash for. Hence, we leverage the shields.io option to use a base64 encoding to represent the icons. Here's an example of what that should look like #342

The badge: SQL

The URL that cooked the badge:

![SQL](https://img.shields.io/badge/SQL-%23e0761f?style=for-the-badge&logo=data:image/svg+xml;base64,
PHN2ZyB3aWR0aD0iMjUyIiBoZWlnaHQ9IjMxNyIgdmlld0JveD0iMCAwIDI1MiAzMTciIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d
3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBkPSJNMTI2IDAuMzg1ND
E0QzkzLjA0NzIgMC4zODU0MTQgNjIuNzQ0NSA2LjI5ODE3IDQwLjMyNTUgMTYuMjU1N0MyOS4xNDI1IDIxLjIxMjQgMTkuNDMwMiAy
Ny40MDQ2IDEyLjM0MTUgMzQuODQ3QzUuMjM5NSA0Mi4zMDQyIDAuMTI1IDUxLjc3NjMgMC4xMjUgNjIuODk1OFYyNTMuOTEzTD
AuNDY5NSAyNTQuMTA0SDAuMTI1QzAuMTI1IDI2NS4yMjQgNS4yMzk1IDI3NC42OTYgMTIuMzQxNSAyODIuMTUzQzE5LjQzMDIgMjg5LjU5NSAyO
S4xNDI1IDI5NS43ODggNDAuMzI1NSAzMDAuNzQ0QzYyLjc0NDUgMzEwLjcwMiA5My4wNDcyIDMxNi42MTUgMTI2IDMxNi42MTVDMTU4Ljk1MyAzMTYuNjE
1IDE4OS4yNDIgMzEwLjcwMiAyMTEuNjc0IDMwMC43NDRDMjIyLjg1NyAyOTUuNzg4IDIzMi41NyAyODkuNTk1IDIzOS42NTggMjgyLjE1M0
MyNDYuNzYgMjc0LjY5NiAyNTEuODc1IDI2NS4yMjQgMjUxLjg3NSAyNTQuMTA0SDI1MS41MzFMMjUxLjg3NSAyNTMuOTEzVjYyLjg5NThDMjUxLjg3NSA1MS43NzYzI
DI0Ni43NiA0Mi4zMDQyIDIzOS42NTggMzQuODQ3QzIzMi41NyAyNy40MDQ2IDIyMi44NTcgMjEuMjEyNCAyMTEuNjc0IDE2LjI1NTdDMTg5
LjI0MiA2LjI5ODE3IDE1OC45NTMgMC4zODU0MTQgMTI2IDAuMzg1NDE0Wk0yMCA2Mi44OTU4QzIwIDU5LjgwNzEgMjEuMzc4IDU1LjczM
jkgMjYuMDAyMyA1MC44NzkxQzMwLjYzOTggNDUuOTk2IDM3LjkxNCA0MS4wODM0IDQ3LjcwNTcgMzYuNzI5N0M2Ny4yNDk1IDI4LjA1
MTggOTQuOTI4NyAyMi40NDc5IDEyNiAyMi40NDc5QzE1Ny4wNzEgMjIuNDQ3OSAxODQuNzUgMjguMDY2NSAyMDQuMjk0IDM2LjcyOTdDMj
E0LjA5OSA0MS4wODM0IDIyMS4zNDcgNDUuOTk2IDIyNS45OTggNTAuODc5MUMyMzAuNjM1IDU1LjczMjkgMjMyIDU5Ljc5MjQgMjMyID
YyLjg5NThDMjMyIDY1Ljk4NDYgMjMwLjYyMiA3MC4wNTg4IDIyNS45OTggNzQuOTEyNUMyMjEuMzYgNzkuNzk1NyAyMTQuMDg2IDg0LjcwODMgMjA0LjI5NCA4OS4w
NjJDMTg0Ljc1IDk3LjczOTkgMTU3LjA3MSAxMDMuMzQ0IDEyNiAxMDMuMzQ0Qzk0LjkyODcgMTAzLjM0NCA2Ny4yNDk1IDk3LjcyNTI
gNDcuNzA1NyA4OS4wNjJDMzcuOTAwNyA4NC43MDgzIDMwLjY1MyA3OS43OTU3IDI2LjAwMjMgNzQuOTEyNUMyMS4zNjQ4IDcwLj
A1ODggMjAgNjUuOTk5MyAyMCA2Mi44OTU4Wk0yMzIgMTU4LjVWOTcuNzY5M0MyMjUuNjM3IDEwMi41MTIgMjE4LjgyIDEwNi40NT
ggMjExLjY3NCAxMDkuNTM2QzE4OS4yNDIgMTE5LjQ5MyAxNTguOTUzIDEyNS40MDYgMTI2IDEyNS40MDZDOTMuMDQ3MiAxMjUu
NDA2IDYyLjc0NDUgMTE5LjQ5MyA0MC4zMjU1IDEwOS41MzZDMzMuMTgwMiAxMDYuNDU4IDI2LjM2MzUgMTAyLjUxMiAyMCA5Ny
43NjkzVjE1OC41QzIwIDE2MS41ODkgMjEuMzc4IDE2NS42NjMgMjYuMDAyMyAxNzAuNTE3QzMwLjYzOTggMTc1LjQgMzcuOTE0IDE4
MC4zMTIgNDcuNzA1NyAxODQuNjUxQzY3LjI0OTUgMTkzLjMyOSA5NC45Mjg3IDE5OC45NDggMTI2IDE5OC45NDhDMTU3LjA3MSAx
OTguOTQ4IDE4NC43NSAxOTMuMzI5IDIwNC4yOTQgMTg0LjY1MUMyMTQuMDk5IDE4MC4zMTIgMjIxLjM0NyAxNzUuNCAyMjUuOTk
4IDE3MC41MzFDMjMwLjYzNSAxNjUuNjc4IDIzMiAxNjEuNjAzIDIzMiAxNTguNVpNMjAgMTkzLjM3M0MyNS44Njk4IDE5Ny44NiAzMi43
NTk4IDIwMS43ODcgNDAuMzI1NSAyMDUuMTRDNjIuNzQ0NSAyMTUuMDk4IDkzLjA0NzIgMjIxLjAxIDEyNiAyMjEuMDFDMTU4Ljk1My
AyMjEuMDEgMTg5LjI0MiAyMTUuMDk4IDIxMS42NzQgMjA1LjE0QzIxOC44MiAyMDIuMDYyIDIyNS42MzcgMTk4LjExNiAyMzIgMTkzLj
M3M1YyNTMuOTEzTDIzMi4xNzIgMjU0LjEwNEgyMzJDMjMyIDI1Ny4xOTMgMjMwLjYyMiAyNjEuMjY3IDIyNS45OTggMjY2LjEyMUMyM
jEuMzYgMjcxLjAwNCAyMTQuMDg2IDI3NS45MTcgMjA0LjI5NCAyODAuMjdDMTg0Ljc1IDI4OC45NDggMTU3LjA3MSAyOTQuNTUyIDE
yNiAyOTQuNTUyQzk0LjkyODcgMjk0LjU1MiA2Ny4yNDk1IDI4OC45MzQgNDcuNzA1NyAyODAuMjdDMzcuOTAwNyAyNzUuOTE3IDM
wLjY1MyAyNzEuMDA0IDI2LjAwMjMgMjY2LjEyMUMyMS4zNjQ4IDI2MS4yNjcgMjAgMjU3LjIwOCAyMCAyNTQuMTA0SDE5LjgyNzdM
MjAgMjUzLjkxM1YxOTMuMzU5VjE5My4zNzNaIiBmaWxsPSJibGFjayIvPgo8L3N2Zz4K)                    

Yes, it does render the badge well yet imagine a bunch of these crawling around in our repo. Would be quite messy and the risk for errors would exponentially rise. As it stands right now, this is the way to offer icons not provided by simple icons.

How best should we handle this?

kohasummons avatar May 09 '22 13:05 kohasummons

In my opinion, probably the best option is to make a pull request to the simple icons github page at https://github.com/simple-icons/simple-icons to add the logo so that it can be used using the API given by shields.io. I have tried using a image that has been hosted in another site and input the link in the logo=XXXXXXXX part and I don't think it work..

thechrisandrew avatar May 10 '22 14:05 thechrisandrew

You speak the truth, @thechrisandrew. That is probably the best and ostensibly, the most sanitary form of action to take right now. 👍🏽

😄 The way shields API works, I doubt using an arbitrary link would turn out the way we want it. Have you attempted to contribute to the Simple Icons project?

kohasummons avatar May 11 '22 23:05 kohasummons

I haven't had the chance to contribute to the simple-icons project yet, they do have a very thorough contributions.md, its almost intimidating 😂

thechrisandrew avatar May 12 '22 07:05 thechrisandrew

Yikes! 😆 Looking at it right now. We find ourselves in between the mountain and the red sea... would take a stab at contributing one of these days... sooner than later i hope.

kohasummons avatar May 14 '22 23:05 kohasummons