Simple-icons: Include filenames in simple-icons.json as well as the human-readable title

[philwolstenholme]

Hi,

I'm trying to include simple-icon icons in a Drupal module. I'm thinking of parsing the simple-icons.json file to show all the icons available to the user to display in their footer (e.g. for social links), but then I have to guess at the filenames based on looking through scripts like simple-icons/scripts/utils.js and by duplicating the titleToFilename function in PHP.

That's all doable, but if an update to simple-icons changes how titleToFilename works, then all my icon URLs will no longer be accurate.

I could peg my local copy of social-icons to a particular version, instead of whatever is the latest version, and then that way my titleToFilename function would always match my icon filenames, but then my users wouldn't benefit from any updates to simple-icons, e.g. if a brand re-branded and their icon changed.

It would be great if it was possible to programmatically get a list of all the available icons, and see both their human readable title and their filename.

[philwolstenholme]

I was imagining a process where I would have a list of human readable titles (e.g. AT&T), with corresponding machine names (at-and-t), and I would then make requests like https://cdn.jsdelivr.net/npm/simple-icons@latest/icons/at-and-t.svg.

But it looks like an alternative option might be to install simple-icons with NPM and then copy the contents of index.js into a PHP format so I can output the SVGs without any additional network requests.

[ericcornelissen]

I'm personally not very familiar with Drupal, what process are you using to get the most up to date version of SimpleIcons?

I understand that replicating the titleToFilename is not really a viable option. However, from our point of view, it would be a bit silly to ask contributes to specify a title and a filename which should be formatted according to a given algorithm 😅

But it looks like an alternative option might be to install simple-icons with NPM and then copy the contents of index.js into a PHP format so I can output the SVGs without any additional network requests.

If at all possible, I think using the NPM package would be the easiest solution for both of us. If it would make you life easier, it would be possible for us to somehow include the filename in the icon data as well.

[philwolstenholme]

Hi @ericcornelissen, that's a very good point about the contributors!

I think using the object exported in index.js is definitely the way forward. If you could add a filename key to that object, then that would be ideal. Something like this, maybe:

{
  ".NET": {
    "title": ".NET",
    "hex": "5C2D91",
    "source": "https://docs.microsoft.com/en-us/dotnet/images/hub/net.svg",
    "svg": "<svg aria-labelledby=\"simpleicons-dot-net-icon\" role=\"img\" viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\"><title id=\"simpleicons-dot-net-icon\">.NET icon</title><path d=\"M3.1672 7.5655v8.749H4.19v-6.325a8.979 8.979 0 0 0-.0488-1.1998h.0384a2.9082 2.9082 0 0 0 .2784.5473l4.4973 6.9774h1.2569V7.5655H9.1904v6.1526a9.2574 9.2574 0 0 0 .0619 1.286h-.0234c-.0544-.1056-.173-.3002-.3553-.585L4.4964 7.5656zm9.315 0v8.749h4.65l.0048-.9599h-3.6087v-3.0331h3.1579V11.4h-3.1579V8.4916h3.3884v-.926zm5.4374 0v.926h2.5149v7.823h1.0216v-7.823H24v-.926zM.6534 15.067a.643.643 0 0 0-.4565.2062A.6719.6719 0 0 0 0 15.753a.6623.6623 0 0 0 .1968.4799.6479.6479 0 0 0 .4799.2015.6623.6623 0 0 0 .4799-.2015.6575.6575 0 0 0 .2015-.48.667.667 0 0 0-.2015-.4798.6575.6575 0 0 0-.4799-.2062.643.643 0 0 0-.0234 0z\"/></svg>\n",
    "filename": "dot-net.svg"
  }
}

[ericcornelissen]

If you could add a filename key to that object, then that would be ideal. Something like this, maybe:

Hey @philwolstenholme, it has been a while but the property you asked for is now (more or less) there, namely the slug property (you will have to add .svg yourself 😅), it will be available in the next release.

I'm closing this issue for now, if you feel like your issue has not yet been resolved, feel free to reopen 😄