update simple-icons to v5 with by-name lookup backwards compatibility (…

…#6591)

* deps: update simple-icons to v5 in BC manner

* fix: handling of overlapping titles

Co-authored-by: repo-ranger[bot] <39074581+repo-ranger[bot]@users.noreply.github.com>

doc/logos.md

@@ -4,9 +4,11 @@
 
 ### SimpleIcons
 
-We support a wide range of logos via [SimpleIcons][]. They can be referenced by name e.g:
+We support a wide range of logos via [SimpleIcons][]. They should be referenced by the logo slug e.g:
 
-![](https://img.shields.io/npm/v/npm.svg?logo=javascript) - https://img.shields.io/npm/v/npm.svg?logo=javascript
+![](https://img.shields.io/npm/v/npm.svg?logo=nodedotjs) - https://img.shields.io/npm/v/npm.svg?logo=nodedotjs
+
+The set of Simple Icon slugs can be found in the [slugs.md](https://github.com/simple-icons/simple-icons/blob/develop/slugs.md) file in the Simple Icons repository. NB - the Simple Icons site and that slugs.md page may at times contain new icons that haven't yet been pulled into the Shields.io runtime. More information on how and when we incorporate icon updates can be found [here](https://github.com/badges/shields/discussions/5369).
 
 ### Shields logos
 

frontend/components/usage.tsx

@@ -335,10 +335,12 @@ export default function Usage({ baseUrl }: { baseUrl: string }): JSX.Element {
                 >
                   simple-icons
                 </a>
-                . Simple-icons are referenced using names as they appear on the
-                simple-icons site. If the name includes spaces, replace them
-                with dashes (e.g:{' '}
-                <StyledCode>?logo=visual-studio-code</StyledCode>)
+                . Simple-icons are referenced using icon slugs which can be
+                found on the simple-icons site or in the
+                <a href="https://github.com/simple-icons/simple-icons/blob/develop/slugs.md">
+                  slugs.md file
+                </a>{' '}
+                in the simple-icons repository.
               </span>
             }
             key="logo"

lib/load-simple-icons.js

@@ -5,18 +5,37 @@ const { svg2base64 } = require('./svg-helpers')
 
 function loadSimpleIcons() {
   const simpleIcons = {}
+  // As of v5 the exported keys are the svg slugs
+  // Historically, Shields has supported logo specification via
+  // name, name with spaces replaced by hyphens, and partially slugs
+  // albeit only in cases where the slug happened to match one of those.
+  // For backwards compatibility purposes we now support all three, but
+  // do not broadcast the support for by-title references due to our strong
+  // preference to steer users towards using the actual slugs.
+  // https://github.com/badges/shields/pull/6591
+  // https://github.com/badges/shields/issues/4273
   Object.keys(originalSimpleIcons).forEach(key => {
-    const k = key.toLowerCase().replace(/ /g, '-')
-    simpleIcons[k] = originalSimpleIcons[key]
-    simpleIcons[k].base64 = {
-      default: svg2base64(
-        simpleIcons[k].svg.replace('<svg', `<svg fill="#${simpleIcons[k].hex}"`)
-      ),
-      light: svg2base64(
-        simpleIcons[k].svg.replace('<svg', `<svg fill="whitesmoke"`)
-      ),
-      dark: svg2base64(simpleIcons[k].svg.replace('<svg', `<svg fill="#333"`)),
+    const icon = originalSimpleIcons[key]
+    const title = icon.title.toLowerCase()
+    const legacyTitle = title.replace(/ /g, '-')
+    icon.base64 = {
+      default: svg2base64(icon.svg.replace('<svg', `<svg fill="#${icon.hex}"`)),
+      light: svg2base64(icon.svg.replace('<svg', `<svg fill="whitesmoke"`)),
+      dark: svg2base64(icon.svg.replace('<svg', `<svg fill="#333"`)),
     }
+
+    // There are a few instances where multiple icons have the same title
+    // (e.g. 'Hive'). If a by-title reference we generate for
+    // backwards compatibility collides with a proper slug from Simple Icons
+    // then do nothing, so that the proper slug will always map to the correct icon.
+    if (!(title in originalSimpleIcons)) {
+      simpleIcons[title] = icon
+    }
+    if (!(legacyTitle in originalSimpleIcons)) {
+      simpleIcons[legacyTitle] = icon
+    }
+
+    simpleIcons[key] = icon
   })
   return simpleIcons
 }

lib/load-simple-icons.spec.js

@@ -18,12 +18,25 @@ describe('loadSimpleIcons', function () {
   })
 
   it('normalizes icon keys', function () {
-    // original key in the simple-icons is 'Linux Foundation'
+    // As of v5 of simple-icons the slug and exported key is `linuxfoundation`
+    // with a name of `Linux Foundation`, so ensure we support both as well
+    // as the legacy mapping of `linux-foundation` for backwards compatibility.
+    expect(simpleIcons).to.include.key('linuxfoundation')
+    expect(simpleIcons).to.include.key('linux foundation')
     expect(simpleIcons).to.include.key('linux-foundation')
   })
 
   // https://github.com/badges/shields/issues/4016
   it('excludes "get" function provided by the simple-icons', function () {
     expect(simpleIcons).to.not.have.property('get')
   })
+
+  it('maps overlapping icon titles correctly', function () {
+    // Both of these icons have the same title: 'Hive', so make sure
+    // the proper slugs are still mapped to the correct logo
+    expect(simpleIcons.hive.slug).to.equal('hive')
+    expect(simpleIcons.hive.title).to.equal('Hive')
+    expect(simpleIcons.hive_blockchain.slug).to.equal('hive_blockchain')
+    expect(simpleIcons.hive_blockchain.title).to.equal('Hive')
+  })
 })

package.json

@@ -60,7 +60,7 @@
     "query-string": "^7.0.0",
     "request": "~2.88.2",
     "semver": "~7.3.5",
-    "simple-icons": "4.25.0",
+    "simple-icons": "5.1.0",
     "webextension-store-meta": "^1.0.3",
     "xmldom": "~0.6.0",
     "xpath": "~0.0.32"