search

badges / shields

Concise, consistent, and legible badges in SVG and raster format
https://shields.io
Creative Commons Zero v1.0 Universal
23.75k stars 5.5k forks source link

Delegate logos to simple-icons #2510

Closed paulmelnikow closed 5 years ago

paulmelnikow commented 5 years ago

As discussed at https://github.com/badges/shields/pull/2463#issuecomment-445571253:

I think we should try to defer all icons to simple-icons.

I agree, I don't see a real advantage to keeping our own collection of icons.

Tasks:

chris48s commented 5 years ago

I've had a quick pass over our logos dir. These ones are already in simpleicons:

The simpleicons version isn't the exact same logo in all cases, but I'm in favour of just standardizing on the simpleicons version.

These ones don't exist in simpleicons:

I'm not sure if every single one of these will definitely meet all of their guidelines, but its worth a bash submitting some PRs and seeing where we get to.

We do also carry a couple of logos relating to deprecated services:

which we should take the opportunity to remove.

RedSparr0w commented 5 years ago

Thanks for that list @chris48s, I've done a quick mock up showing the differences between each of the logos:

Icon Shields Simple-Icons
bitcoin
circleci
discord
docker
github
gitlab
gitter-white
npm
paypal
serverfault
slack
stackexchange
stackoverflow
superuser
telegram
travis
twitter
windows
paulmelnikow commented 5 years ago

Thanks for putting those together!

It's a bit of a mixed bag, isn't it?

Looks better multicolor

Icon Shields Simple-Icons
bitcoin
gitlab
npm
paypal
stackexchange

Looks better in simple-icons

Icon Shields Simple-Icons
docker
github
twitter
slack
stackoverflow
windows

Shields color looks better

Icon Shields Simple-Icons
circleci
discord

Other

Icon Shields Simple-Icons Note
gitter-white simple-icons color conflicts with shields name
serverfault don't love either of these
superuser simple-icons scale is better though I kind of like our two-color version
telegram our color looks bad on dark
travis don't love either of these
chris48s commented 5 years ago

Good work on those comparisons @RedSparr0w - that's really useful.

It's a bit of a mixed bag, isn't it?

Agreed. Having seen them all laid out next to each other I'm going to row back slightly on my "I'm in favour of just standardizing on the simpleicons version" comment. There are a few where the one we're using is a better choice in the situation where its going to be displayed really small. Equally, the number where ours is 'better' (read: more optimised for our use-case) vs the number where the one in SimpleIcons is is 'better' is about the same.

I suppose it depends a bit on the tradeoff:

What do we gain from having a slightly more optimised logo for 5 or 10 services (accepting that one of those - npm - is one of the most heavily used).

VS

What do we gain from not having to maintain/review our own icons or any of the code around using them.

As another data point to consider, I started having a go at contributing some of the icons we use to SimpleIcons. Their guidance for icon submission is more stringent than ours (not necessarily a bad thing), so there is some work involved to meet their requirements.

Refs

ericcornelissen commented 5 years ago

Hi everyone 👋 I'm a maintainer over at SimpleIcons and noticed some PRs/issues referencing this issue. First of all, I'm glad to hear you folks are considering using the icons we provide! I'm not all to familiar with this project but I'm willing to learn and help you guys with integrating SimpleIcons 😃

First of, let me say that I think it is possible to make icons available for your usage even if they do not necessarily meet our strictest requirements (which currently is based on Alexa rankings), but to be honest I don't expect any issues at all in this regard.

I think that the color of the icons is going to be the biggest issue. We try to specify the main brand color, rather then a color that looks good on a shield. My first suggestion here - although I have no clue if its feasible - is to allow your users to just use a white version of the icon if they wish to.

As for the multicolored icons, we have a related issue on that topic (https://github.com/simple-icons/simple-icons/issues/1060), but I don't see it happening anytime soon...

One last note, looking at @paulmelnikow I see for example that the Travis CI icon doesn't look very good on badges. Unless Travis CI has guidelines restricting us to change the icon, I'm totally fine with updating the Travis CI icon (and the same goes for other icons of course). Relatedly, if a brand has guidelines that say you should use a specific version of the logo, arguably you should use that even if it doesn't look as good on a badge 🤔

RedSparr0w commented 5 years ago

Thanks for chiming in @ericcornelissen 😄

First of all, I'm glad to hear you folks are considering using the icons we provide! I'm not all to familiar with this project but I'm willing to learn and help you guys with integrating SimpleIcons 😃

We are currently already using simple-icons for our badges where we do not already have an icon of our own, Glad to see simple-icons using our badges on the readme 👍

I think that the color of the icons is going to be the biggest issue. We try to specify the main brand color, rather then a color that looks good on a shield. My first suggestion here - although I have no clue if its feasible - is to allow your users to just use a white version of the icon if they wish to.

Currently we by default use the brand color when a user doesn't specify the icon color: https://img.shields.io/badge/Nintendo-Switch-E60012.svg?logo=nintendo-switch Or the user can specify any specific color using ?logoColor=whitesmoke support rgb(a), hsl(a), hex(FF0000), css color names https://img.shields.io/badge/Nintendo-Switch-E60012.svg?logo=nintendo-switch&logoColor=whitesmoke

Unless Travis CI has guidelines restricting us to change the icon, I'm totally fine with updating the Travis CI icon (and the same goes for other icons of course). Relatedly, if a brand has guidelines that say you should use a specific version of the logo, arguably you should use that even if it doesn't look as good on a badge 🤔

We try to consult any documentation we could find before merging logos to make sure we followed the brand guidelines, although some may have changed since the design was implemented.

Having seen them all laid out next to each other I'm going to row back slightly on my "I'm in favour of just standardizing on the simpleicons version" comment. There are a few where the one we're using is a better choice in the situation where its going to be displayed really small. Equally, the number where ours is 'better' (read: more optimised for our use-case) vs the number where the one in SimpleIcons is is 'better' is about the same.

I don't think we need to move all our icons over to simple icons (specifically the multi color ones which don't look as good monochrome), but any that already look very similar should probably be moved over.

We also should still accept the odd logo which wont fit simple-icons guidelines.

ericcornelissen commented 5 years ago

Thanks for the clarification @RedSparr0w 👍

Currently we by default use the brand color when a user doesn't specify the icon color

In that case my advice would be to by default use a color that is legible on the badge and add a color keyword like "brandColor" that will pull the brand color from SimpleIcons. But I guess that decision is up to the maintainers.

We try to consult any documentation we could find before merging logos to make sure we followed the brand guidelines, although some may have changed since the design was implemented.

Makes sense, just wanted to point out that our versions are also not set in stone 🙂

chris48s commented 5 years ago

I've been on a bit of a voyage of discovery attempting to upstream some of our logos to simple-icons:

https://github.com/simple-icons/simple-icons/issues?q=author%3Achris48s

and I have learned several interesting things from going through this process and getting my PRs reviewed by the Simple-Icons team :) Some of these were expected and some of them weren't:

There are a few things where I've got concrete actions to take next based on that:

There are also some areas where I've got questions or I'm unsure where we want to go next:

Finally, one interesting thing that Simple-Icons do is they have some guidance of how popular a brand has to be before they'll accept an icon for it (see discussion: https://github.com/simple-icons/simple-icons/pull/1139#issuecomment-449596013 ). I wonder if we could learn from this and establish some benchmark of how popular a service should be before we're willing to take on maintenance of a badge for it. Does anyone else think that might be a beneficial idea to steal?

chris48s commented 5 years ago

Update: simple-icons v1.9.18 now also includes a version of all our custom logos except for LGTM, which is still under review. Here's a table comparing the new icons:

Shields Simple Icons (default) Simple Icons (white)
https://svgshare.com/s/AVu https://svgshare.com/s/AVg https://svgshare.com/s/AVA
https://svgshare.com/s/AVh https://svgshare.com/s/AXE https://svgshare.com/s/AVv
https://svgshare.com/s/AVU https://svgshare.com/s/AW3 https://svgshare.com/s/AVw
https://svgshare.com/s/AWP https://svgshare.com/s/AWi https://svgshare.com/s/AVi
https://svgshare.com/s/AXR https://svgshare.com/s/AW4 https://svgshare.com/s/AWB
https://svgshare.com/s/AXF https://svgshare.com/s/AWC https://svgshare.com/s/AXS
https://svgshare.com/s/AX5 https://svgshare.com/s/AW5 https://svgshare.com/s/AWD
https://svgshare.com/s/AXb https://svgshare.com/s/AXT https://svgshare.com/s/AWE
https://svgshare.com/s/AW6 https://svgshare.com/s/AXG https://svgshare.com/s/AWj
https://svgshare.com/s/AXU https://svgshare.com/s/AXc https://svgshare.com/s/AXd

There are a few cases where there is a naming difference. e.g: scrutinizer in our logos, scrutinizer-ci in simple-icons, eclipse in our logos, eclipse-ide in simple-icons but we can always alias those for legacy compatibility.

As we've already identified there are a lot of cases where simple-icons holds a good icon, but the default colour doesn't look good on a dark background (in many cases, our icon is basically identical apart from the default colour). It seems excessive to maintain our own icon in these situations. I think I'm becoming more convinced the ideal solution to this is https://github.com/badges/shields/issues/2431

btw, fair play for assembling that first table @RedSparr0w - having just gone through the process of generating each of those images, saving them off, uploading them and making a markdown table, I know exactly how laborious the process is!

RedSparr0w commented 5 years ago

Wow, Nice work getting all those logos merged!

It seems excessive to maintain our own icon in these situations. I think I'm becoming more convinced the ideal solution to this is #2431

I will look into implementing #2431 soon, once i get back into the flow of things :smile:

btw, fair play for assembling that first table @RedSparr0w - having just gone through the process of generating each of those images, saving them off, uploading them and making a markdown table, I know exactly how laborious the process is!

Haha yeah, i thought about trying to automate it a bit, but figured it would just be quicker & easier to just manually do it all.

chris48s commented 5 years ago

Most of our icons are deleted in #2857

2872 #2873 and #2874 are open proposing some further edits to some of the multi-coloured ones we're keeping.

There are 4 outstanding..

I also want to review the logo submission guidelines before we close this off

paulmelnikow commented 5 years ago

That looks nice. Are you thinking it would be white on a blue circle for both the light and dark badges (sort of like Bitcoin)?

chris48s commented 5 years ago

Had a go at this. This version has a lot more contrast, but it loses quite a lot of detail at small size:

not sure if that is better..

paulmelnikow commented 5 years ago

It looks good on Retina!

I guess you could try darkening the gray along the “fuselage” to preserve contrast at small sizes.

chris48s commented 5 years ago

Once simple-icons 1.9.19 is available, I'll do another PR to remove the LGTM logo in favour of the SI version. Beyond that, I think everything under this banner is done or there's a PR open for it so I'm going to close this off. If anything else is still outstanding, feel free to re-open

cactysman commented 5 years ago

I'm glad this topic is being discussed! Just today I stumbled across a few icons that did ignore the logoColor parameter, but then I realized that those are the ones that overlay the simple-icons ones.

paulmelnikow commented 5 years ago

Ah, that probably should be included in the documentation for logoColor.

Borda commented 3 years ago

Hi, do you have an example of how to use simple-icons and is there an indication of which version is used?

chris48s commented 3 years ago

@borda Logos can be included with the logo param e.g: https://img.shields.io/npm/v/npm.svg?logo=javascript We're currently using 4.25. There's a PR open to deal with the non backwards-compatible changes in v5 See https://github.com/badges/shields/discussions/5369 for more info on upgrade schedule