Shields: Some simple-icons have slightly different names from their shields.io "logo"s
Are you experiencing an issue with...
- [x] [shields.io](https://shields.io/#/)
- [ ] My own instance
- [ ] [gh-badges NPM package](https://www.npmjs.com/package/gh-badges)
:beetle: Description
The required logo query parameter to use the VS Code logo from simple-icons does not match the expected value. I expected visualstudiocode to work (this is what the icon is named in simple-icons, but visual-studio-code was required. Similarly, eclipse is required, not eclipse-ide.
:link: Link to the badge
I provided a series of examples at https://github.com/simple-icons/simple-icons/issues/1211
Pasting them below:
However, even though the Eclipse icon is named eclipseide.svg, I have to pass logo=eclipse (NOT eclipseide) to get the Eclipse icon to resolve.
So I suspect there might be a similar naming issue that's preventing me from getting VS Code (visualstudiocode.svg) to work.
and, thanks to the maintainer of simple-icons, (see issue linked above) here's a working VS Code badge:
Here they are in action (looks awesome, the logos are a fantastic new feature!)
To summarize, I would like to know why these two logos (and likely at least a few others) don't match their names in simple-icons. What is transforming visualstudiocode into visual-studio-code and eclipseide into eclipse, and is this documented anywhere?
tetchel
All 9 comments
Thanks for raising this. There are several slightly different issues to unpick here.
When we import the simple icons library, we slug the titles, so "Visual Studio Code" becomes "visual-studio-code". This is not clearly documented and probably should be as it is not intuitive how to derive the right slug for icons that have multi-word names.
SimpleIcons (the library ) doesn't expose anywhere the filenames which are used on SimpleIcons (the website ). e.g:
> const simpleIcons = require('simple-icons')
undefined
> simpleIcons['Visual Studio Code']
{ title: 'Visual Studio Code',
hex: '007ACC',
source: 'https://code.visualstudio.com',
svg: '<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>Visual Studio Code icon</title><path d="M24 2.5v19L18 24 0 18.5v-.561l18 1.545V0zM1 13.111L4.385 10 1 6.889l1.418-.827L5.853 8.65 12 3l3 1.456v11.088L12 17l-6.147-5.65-3.434 2.589zM7.644 10L12 13.283V6.717z"/></svg>' }
The _website_ also doesn't use a completely consistent naming scheme for the downloaded file names - AFAIK the filenames are just the filenames in: https://github.com/simple-icons/simple-icons/tree/develop/icons which mostly are just somewordsmashedtogether.svg but some of them are seperated-by-hyphens.svg, so we don't have a way to reliably match them from the library code because they aren't exposed.
- Seperately from all that, there are also 6 logos where we support an alias for legacy reasons. We used to maintain more of our own icons, but we deleted a lot of them in favour of SimpleIcons. In some cases, our logo had a different name to the SimpleIcons version, so we aliased them to avoid breaking badges for existing users: https://github.com/badges/shields/blob/6e36e520847b3ca3de3dc299427dab08e17f0f51/lib/logos.js#L11-L18 These are not documented or advertsied anywhere because they are only there for backward-compatibility for users who were using the old logos.
That's why
- https://img.shields.io/badge/eclipse-badge-blue.svg?logo=eclipse
works because it is just an alias for
- https://img.shields.io/badge/eclipse-badge-blue.svg?logo=eclipse-ide
/cc @RedSparr0w who may also have useful input on this.
chris48s
on 12 Feb 2019
I'm not sure there is a better way to handle this,
We support using - in place of the spaces or you can just use a standard space which i feel is more intuitive than removing all spacing?
https://img.shields.io/badge/eclipse%20ide-badge-blue.svg?logo=eclipse%20ide
https://img.shields.io/badge/eclipse--ide-badge-blue.svg?logo=eclipse-ide
https://img.shields.io/badge/visual%20studio%20code-badge-blue.svg?logo=visual%20studio%20code
https://img.shields.io/badge/visual--studio--code-badge-blue.svg?logo=visual-studio-code
I'm not sure if it would be worth adding aliases for all the simple icons removing all spaces & special characters, what are your thoughts on this though?
Edit:
I see on their repo that the file names are excluding spaces, and . is replaced with -dot-, so it may be worth adding support for this.
RedSparr0w
on 12 Feb 2019
OK, I see that the main issue is that the simpleicons library doesn't expose the filenames.
IMO the slugs and urlencoded spaces are both fine, so long as it is documented somewhere obvious (in the options section at the bottom of the main shields.io page?).
Is there a "full logo list" somewhere for users?
tetchel
on 12 Feb 2019
Is there a "full logo list" somewhere for users?
The shields.io full logo list is at the bottom of the website: https://shields.io
(this doesn't show aliases, as they are only there for backwards compatibility)
And the full logo list for simple-icons is on their website: https://simpleicons.org/
RedSparr0w
on 13 Feb 2019
Right, but my point is that the the second list is not quite all a shields.io user needs to use simpleicons, due to the naming differences.
A single complete list, with both the shields.io icons and the simpleicons with their shields.io names, is what I have in mind.
tetchel
on 13 Feb 2019
or you can just use a standard space
Oh yes - good point that the %20 format also works.
A single complete list, with both the shields.io icons and the simpeicons with their shields.io names, is what I have in mind
I think a verbatim list of all 500 icons in the SimpleIcons set is a bit much, but we can definitely explain more clearly that the icon _names_ should be used and give some examples.
chris48s
on 13 Feb 2019
^ Great fix!
tetchel
on 20 Feb 2019
Looking through the simple icons again, do you think it would be better if we just removed any non word characters?
_This should also still keep current logos functioning as intended_
logoName = `just a.test_name0`
logoName.toLowerCase().replace(/[^a-z\d]/ig, '') // justatestname0
This way it wouldn't matter how the user entered it.
For example any of the following would match a logo named simple icons → simpleicons:
simple icons
simpleicons
simple%20icons
simple_icons
Having multiple equivalent versions is a bit worse for downstream caching, and also creates a bit more work in the long run because we have to ensure all the variants keep working. (Basically that means it's hard to refactor; we just have to keep the code forever.)
So I'd prefer to transform the names into a slug that is optimally readable and uniform, and provide a searchable picker on our site with the name. I think that's a nicer experience for the end user than going out to the simpleicons site, anyway, and it's clearer what they're supposed to use if there's only one supported way.
paulmelnikow
on 21 Feb 2019
Related issues
rominf
·
3Comments
najeeb-ur-rehman
·
3Comments
paulmelnikow
·
3Comments
bruno-garcia
·
3Comments
salaros
·
3Comments
Most helpful comment
Oh yes - good point that the
%20format also works.I think a verbatim list of all 500 icons in the SimpleIcons set is a bit much, but we can definitely explain more clearly that the icon _names_ should be used and give some examples.