Add support for simple-icons, colored icons with ?logoColor (#1810)

* add simple-icons

* handle undefined

* support logoColor param

* our icon > simple-icon

* dont crash ✅

* return false → undefined

* update test

* add test

* support logoColor on our logos

* cache as base64, pre-load-simple-icons, logo-helper

* add ?logoColor information

* and simple-icons reference, link to github master branch for our logos

* update simple-icons

update to 1.7.1

* Revert "and simple-icons reference, link to github master branch for our logos"

This reverts commit 5e99d5f.

* add link to simple-icons

* Add snapshot test

* support dash in place of space for logo name

frontend/components/usage.js

@@ -169,7 +169,7 @@ export default class Usage extends React.PureComponent {
                 <code>?logo=appveyor</code>
               </td>
               <td>
-                Insert one of the named logos ({this.constructor.renderNamedLogos()})
+                Insert one of the named logos from ({this.constructor.renderNamedLogos()}) or <a href="https://simpleicons.org/" target="_BLANK">simple-icons</a>
               </td>
             </tr>
             <tr>
@@ -178,6 +178,12 @@ export default class Usage extends React.PureComponent {
               </td>
               <td>Insert custom logo image (≥ 14px high)</td>
             </tr>
+            <tr>
+              <td>
+                <code>?logoColor=violet</code>
+              </td>
+              <td>Set the color of the logo (hex, rgb, rgba, hsl, hsla and css named colors supported)</td>
+            </tr>
             <tr>
               <td>
                 <code>?logoWidth=40</code>

lib/badge-data.js

@@ -2,6 +2,11 @@
 
 const isCSSColor = require('is-css-color');
 const logos = require('./load-logos')();
+const simpleIcons = require('./load-simple-icons')();
+const {
+  svg2base64,
+  isDataUri,
+} = require('./logo-helper');
 const colorschemes = require('./colorscheme.json');
 
 function toArray(val) {
@@ -14,10 +19,6 @@ function toArray(val) {
   }
 }
 
-function isDataUri(s) {
-  return s !== undefined && /^(data:)([^;]+);([^,]+),(.+)$/.test(s);
-}
-
 function prependPrefix(s, prefix) {
   if (s === undefined) {
     return undefined;
@@ -39,8 +40,12 @@ function isHexColor (s = ''){
 function makeColor(color) {
   if (isHexColor(color)) {
     return '#' + color;
-  } else {
+  } else if (colorschemes[color] !== undefined){
+    return colorschemes[color].colorB;
+  } else if (isCSSColor(color)){
     return color;
+  } else {
+    return undefined;
   }
 }
 
@@ -69,9 +74,27 @@ function makeLabel(defaultLabel, overrides) {
   return '' + (overrides.label === undefined ? defaultLabel || '' : overrides.label);
 }
 
+function getShieldsIcon(icon = '', color = ''){
+  icon = typeof icon === 'string' ? icon.toLowerCase() : '';
+  if (!logos[icon]){
+    return undefined;
+  }
+  color = makeColor(color);
+  return color ? logos[icon].svg.replace(/fill="(.+?)"/g, `fill="${color}"`) : logos[icon].base64;
+}
+
+function getSimpleIcon(icon = '', color = null){
+  icon = typeof icon === 'string' ? icon.toLowerCase().replace(/ /g, '-') : '';
+  if (!simpleIcons[icon]){
+    return undefined;
+  }
+  color = makeColor(color);
+  return color ? simpleIcons[icon].svg.replace('<svg', `<svg fill="${color}"`) : simpleIcons[icon].base64;
+}
+
 function makeLogo(defaultNamedLogo, overrides) {
   if (overrides.logo === undefined){
-    return logos[defaultNamedLogo];
+    return svg2base64(getShieldsIcon(defaultNamedLogo, overrides.logoColor) || getSimpleIcon(defaultNamedLogo, overrides.logoColor));
   }
 
   // +'s are replaced with spaces when used in query params, this returns them to +'s, then removes remaining whitespace - #1546
@@ -80,7 +103,7 @@ function makeLogo(defaultNamedLogo, overrides) {
   if (isDataUri(maybeDataUri)) {
     return maybeDataUri;
   } else {
-    return logos[overrides.logo];
+    return svg2base64(getShieldsIcon(overrides.logo, overrides.logoColor) || getSimpleIcon(overrides.logo, overrides.logoColor));
   }
 }
 
@@ -116,7 +139,6 @@ function makeBadgeData(defaultLabel, overrides) {
 module.exports = {
   toArray,
   prependPrefix,
-  isDataUri,
   isHexColor,
   makeLabel,
   makeLogo,

lib/badge-data.spec.js

@@ -3,12 +3,12 @@
 const { expect } = require('chai');
 const { test, given, forCases } = require('sazerac');
 const {
-  isDataUri,
   prependPrefix,
   isHexColor,
   makeLabel,
   makeLogo,
   makeBadgeData,
+  makeColor,
   setBadgeColor
 } = require('./badge-data');
 
@@ -19,14 +19,6 @@ describe('Badge data helpers', function() {
     given(undefined, 'data:').expect(undefined);
   });
 
-  test(isDataUri, () => {
-    given('data:image/svg+xml;base64,PHN2ZyB4bWxu').expect(true);
-    forCases([
-      given('data:foobar'),
-      given('foobar'),
-    ]).expect(false);
-  });
-
   test(isHexColor, () => {
     forCases([
       given('f00bae'),
@@ -80,11 +72,20 @@ describe('Badge data helpers', function() {
       logoPosition: 10,
       logoWidth: 25,
       links: ['https://example.com/'],
-      colorA: 'blue',
+      colorA: '#007ec6',
       colorB: '#f00bae',
     });
   });
 
+  test(makeColor, () => {
+    given('red').expect('#e05d44');
+    given('blue').expect('#007ec6');
+    given('4c1').expect('#4c1');
+    given('f00f00').expect('#f00f00');
+    given('papayawhip').expect('papayawhip');
+    given('purple').expect('purple');
+  });
+
   test(setBadgeColor, () => {
     given({}, 'red').expect({ colorscheme: 'red' });
     given({}, 'f00f00').expect({ colorB: '#f00f00' });

lib/load-logos.js

@@ -2,6 +2,7 @@
 
 const fs = require('fs');
 const path = require('path');
+const { svg2base64 } = require('./logo-helper');
 
 function loadLogos () {
   // Cache svg logos from disk in base64 string
@@ -12,11 +13,14 @@ function loadLogos () {
     if (filename[0] === '.') { return; }
     // filename is eg, github.svg
     const svg = fs.readFileSync(logoDir + '/' + filename).toString();
+    const base64 = svg2base64(svg);
 
     // eg, github
-    const name = filename.slice(0, -('.svg'.length));
-    logos[name] = 'data:image/svg+xml;base64,' +
-      Buffer.from(svg).toString('base64');
+    const name = filename.slice(0, -('.svg'.length)).toLowerCase();
+    logos[name] = {
+      svg,
+      base64
+    };
   });
   return logos;
 }

lib/load-simple-icons.js

@@ -0,0 +1,18 @@
+'use strict';
+
+const simpleIcons = require('simple-icons');
+const { svg2base64 } = require('./logo-helper');
+
+function loadSimpleIcons(){
+  Object.keys(simpleIcons).forEach(function (key) {
+    const k = key.toLowerCase().replace(/ /g, '-');
+    if (k !== key) {
+      simpleIcons[k] = simpleIcons[key];
+      delete simpleIcons[key];
+    }
+    simpleIcons[k].base64 = svg2base64(simpleIcons[k].svg.replace('<svg', `<svg fill="#${simpleIcons[k].hex}"`));
+  });
+  return (simpleIcons);
+}
+
+module.exports = loadSimpleIcons;