From 956f2e058461ed26c599f97f836c6002bd5a0d1d Mon Sep 17 00:00:00 2001
From: Caleb Cartwright <calebcartwright@users.noreply.github.com>
Date: Sat, 12 Jun 2021 14:51:28 -0500
Subject: [PATCH] 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                  |  6 ++++--
 frontend/components/usage.tsx | 10 +++++----
 lib/load-simple-icons.js      | 39 ++++++++++++++++++++++++++---------
 lib/load-simple-icons.spec.js | 15 +++++++++++++-
 package-lock.json             | 14 ++++++-------
 package.json                  |  2 +-
 6 files changed, 61 insertions(+), 25 deletions(-)

diff --git a/doc/logos.md b/doc/logos.md
index 8fcbffbfea..ff07f9f014 100644
--- a/doc/logos.md
+++ b/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
 
diff --git a/frontend/components/usage.tsx b/frontend/components/usage.tsx
index ed4523f1ce..e553780703 100644
--- a/frontend/components/usage.tsx
+++ b/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"
diff --git a/lib/load-simple-icons.js b/lib/load-simple-icons.js
index 976573d411..86f9b8e356 100644
--- a/lib/load-simple-icons.js
+++ b/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
 }
diff --git a/lib/load-simple-icons.spec.js b/lib/load-simple-icons.spec.js
index 8529a5add2..d32f95bb93 100644
--- a/lib/load-simple-icons.spec.js
+++ b/lib/load-simple-icons.spec.js
@@ -18,7 +18,11 @@ 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')
   })
 
@@ -26,4 +30,13 @@ describe('loadSimpleIcons', function () {
   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')
+  })
 })
diff --git a/package-lock.json b/package-lock.json
index 55efe3bf9a..1dec8d894b 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -47,7 +47,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"
@@ -26079,9 +26079,9 @@
       "dev": true
     },
     "node_modules/simple-icons": {
-      "version": "4.25.0",
-      "resolved": "https://registry.npmjs.org/simple-icons/-/simple-icons-4.25.0.tgz",
-      "integrity": "sha512-bnQccBJXKaWECSFKV4jdSDOvJb0om1yNqHf+lSXiE+hTk/R3L1Mz+EfQRgkmVjED2dSZhbZWxGzdC8+cQzSoaA=="
+      "version": "5.1.0",
+      "resolved": "https://registry.npmjs.org/simple-icons/-/simple-icons-5.1.0.tgz",
+      "integrity": "sha512-eYaG95mbAtLCLdIhlXlTsFM+AwVJEwkCDHDGJIYxv8MMgdVcbKH0EligeqKcrbtGlDg06rGtJ5rL22mj0p3wtw=="
     },
     "node_modules/simple-swizzle": {
       "version": "0.2.2",
@@ -52506,9 +52506,9 @@
       "dev": true
     },
     "simple-icons": {
-      "version": "4.25.0",
-      "resolved": "https://registry.npmjs.org/simple-icons/-/simple-icons-4.25.0.tgz",
-      "integrity": "sha512-bnQccBJXKaWECSFKV4jdSDOvJb0om1yNqHf+lSXiE+hTk/R3L1Mz+EfQRgkmVjED2dSZhbZWxGzdC8+cQzSoaA=="
+      "version": "5.1.0",
+      "resolved": "https://registry.npmjs.org/simple-icons/-/simple-icons-5.1.0.tgz",
+      "integrity": "sha512-eYaG95mbAtLCLdIhlXlTsFM+AwVJEwkCDHDGJIYxv8MMgdVcbKH0EligeqKcrbtGlDg06rGtJ5rL22mj0p3wtw=="
     },
     "simple-swizzle": {
       "version": "0.2.2",
diff --git a/package.json b/package.json
index 716644bfa3..920ae0d8b8 100644
--- a/package.json
+++ b/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"