Some simple-icons have slightly different names from their shields.io "logo"s

[tetchel]

Are you experiencing an issue with...

• shields.io
• My own instance
• gh-badges NPM package

🪲 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 to the badge

I provided a series of examples at simple-icons/simple-icons#1211
Pasting them below:

![Eclipse](https://img.shields.io/badge/eclipse-badge-blue.svg?logo=eclipse)

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.

![Broken eclipse](https://img.shields.io/badge/broken%20eclipse-badge-blue.svg?logo=eclipseide)

So I suspect there might be a similar naming issue that's preventing me from getting VS Code (visualstudiocode.svg) to work.

![VS Code](https://img.shields.io/badge/broken%20vscode-badge-blue.svg?logo=visualstudiocode)

![VS Code](https://img.shields.io/badge/broken%20vscode-badge-blue.svg?logo=vscode)

and, thanks to the maintainer of simple-icons, (see issue linked above) here's a working VS Code badge:
![VS Code](https://img.shields.io/badge/visualstudiocode-badge-blue.svg?logo=visual-studio-code)

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?

[chris48s]

Thanks for raising this. There are several slightly different issues to unpick here.

1. 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.

2. 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.

3. 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:

   shields/lib/logos.js

   Lines 11 to 18 in 6e36e52

   	const logoAliases = {
   	azuredevops: 'azure-devops',
   	eclipse: 'eclipse-ide',
   	'gitter-white': 'gitter',
   	scrutinizer: 'scrutinizer-ci',
   	stackoverflow: 'stack-overflow',
   	tfs: 'azure-devops',
   	}

   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.

[RedSparr0w]

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.

[tetchel]

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?

[RedSparr0w]

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/

[tetchel]

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.

[chris48s]

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.

[tetchel]

^ Great fix!

[RedSparr0w]

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
simple icons
simpleicons
simple%20icons
simple_icons

[paulmelnikow]

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.