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 5e99d5f8db360ed49ce08851d3ba84e35682b7c5. * add link to simple-icons * Add snapshot test * support dash in place of space for logo name

Add support for simple-icons, colored icons with ?logoColor (#1810)
317e19ea · Danial · GitHub · 8020ff00 · 317e19ea · 317e19ea
Unverified Commit 317e19ea authored 6 years ago by Danial Committed by GitHub 6 years ago
--- a/__snapshots__/make-badge.spec.js
+++ b/__snapshots__/make-badge.spec.js
@@ -8,3 +8,35 @@ exports['The badge generator JSON should always produce the same JSON (unless we
  "value": "grown"
 }
 `
+
+exports['shields GitHub logo default color (#333333) 1'] = `
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="113" height="20"><linearGradient id="b" x2="0" y2="100%"><stop offset="0" stop-color="#bbb" stop-opacity=".1"/><stop offset="1" stop-opacity=".1"/></linearGradient><clipPath id="a"><rect width="113" height="20" rx="3" fill="#fff"/></clipPath><g clip-path="url(#a)"><path fill="#555" d="M0 0h54v20H0z"/><path fill="#007ec6" d="M54 0h59v20H54z"/><path fill="url(#b)" d="M0 0h113v20H0z"/></g><g fill="#fff" text-anchor="middle" font-family="DejaVu Sans,Verdana,Geneva,sans-serif" font-size="110"><image x="5" y="3" width="14" height="14" xlink:href="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI0MCIgaGVpZ2h0PSI0MCIgdmlld0JveD0iMTIgMTIgNDAgNDAiPg0KPHBhdGggZmlsbD0iIzMzMzMzMyIgZD0iTTMyLDEzLjRjLTEwLjUsMC0xOSw4LjUtMTksMTljMCw4LjQsNS41LDE1LjUsMTMsMThjMSwwLjIsMS4zLTAuNCwxLjMtMC45YzAtMC41LDAtMS43LDAtMy4yIGMtNS4zLDEuMS02LjQtMi42LTYuNC0yLjZDMjAsNDEuNiwxOC44LDQxLDE4LjgsNDFjLTEuNy0xLjIsMC4xLTEuMSwwLjEtMS4xYzEuOSwwLjEsMi45LDIsMi45LDJjMS43LDIuOSw0LjUsMi4xLDUuNSwxLjYgYzAuMi0xLjIsMC43LTIuMSwxLjItMi42Yy00LjItMC41LTguNy0yLjEtOC43LTkuNGMwLTIuMSwwLjctMy43LDItNS4xYy0wLjItMC41LTAuOC0yLjQsMC4yLTVjMCwwLDEuNi0wLjUsNS4yLDIgYzEuNS0wLjQsMy4xLTAuNyw0LjgtMC43YzEuNiwwLDMuMywwLjIsNC43LDAuN2MzLjYtMi40LDUuMi0yLDUuMi0yYzEsMi42LDAuNCw0LjYsMC4yLDVjMS4yLDEuMywyLDMsMiw1LjFjMCw3LjMtNC41LDguOS04LjcsOS40IGMwLjcsMC42LDEuMywxLjcsMS4zLDMuNWMwLDIuNiwwLDQuNiwwLDUuMmMwLDAuNSwwLjQsMS4xLDEuMywwLjljNy41LTIuNiwxMy05LjcsMTMtMTguMUM1MSwyMS45LDQyLjUsMTMuNCwzMiwxMy40eiIvPg0KPC9zdmc+DQo="/> <text x="365" y="150" fill="#010101" fill-opacity=".3" transform="scale(.1)" textLength="270">label</text><text x="365" y="140" transform="scale(.1)" textLength="270">label</text><text x="825" y="150" fill="#010101" fill-opacity=".3" transform="scale(.1)" textLength="490">message</text><text x="825" y="140" transform="scale(.1)" textLength="490">message</text></g> </svg>
+`
+
+exports['shields GitHub logo custom color (whitesmoke) 1'] = `
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="113" height="20"><linearGradient id="b" x2="0" y2="100%"><stop offset="0" stop-color="#bbb" stop-opacity=".1"/><stop offset="1" stop-opacity=".1"/></linearGradient><clipPath id="a"><rect width="113" height="20" rx="3" fill="#fff"/></clipPath><g clip-path="url(#a)"><path fill="#555" d="M0 0h54v20H0z"/><path fill="#007ec6" d="M54 0h59v20H54z"/><path fill="url(#b)" d="M0 0h113v20H0z"/></g><g fill="#fff" text-anchor="middle" font-family="DejaVu Sans,Verdana,Geneva,sans-serif" font-size="110"><image x="5" y="3" width="14" height="14" xlink:href="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI0MCIgaGVpZ2h0PSI0MCIgdmlld0JveD0iMTIgMTIgNDAgNDAiPg0KPHBhdGggZmlsbD0id2hpdGVzbW9rZSIgZD0iTTMyLDEzLjRjLTEwLjUsMC0xOSw4LjUtMTksMTljMCw4LjQsNS41LDE1LjUsMTMsMThjMSwwLjIsMS4zLTAuNCwxLjMtMC45YzAtMC41LDAtMS43LDAtMy4yIGMtNS4zLDEuMS02LjQtMi42LTYuNC0yLjZDMjAsNDEuNiwxOC44LDQxLDE4LjgsNDFjLTEuNy0xLjIsMC4xLTEuMSwwLjEtMS4xYzEuOSwwLjEsMi45LDIsMi45LDJjMS43LDIuOSw0LjUsMi4xLDUuNSwxLjYgYzAuMi0xLjIsMC43LTIuMSwxLjItMi42Yy00LjItMC41LTguNy0yLjEtOC43LTkuNGMwLTIuMSwwLjctMy43LDItNS4xYy0wLjItMC41LTAuOC0yLjQsMC4yLTVjMCwwLDEuNi0wLjUsNS4yLDIgYzEuNS0wLjQsMy4xLTAuNyw0LjgtMC43YzEuNiwwLDMuMywwLjIsNC43LDAuN2MzLjYtMi40LDUuMi0yLDUuMi0yYzEsMi42LDAuNCw0LjYsMC4yLDVjMS4yLDEuMywyLDMsMiw1LjFjMCw3LjMtNC41LDguOS04LjcsOS40IGMwLjcsMC42LDEuMywxLjcsMS4zLDMuNWMwLDIuNiwwLDQuNiwwLDUuMmMwLDAuNSwwLjQsMS4xLDEuMywwLjljNy41LTIuNiwxMy05LjcsMTMtMTguMUM1MSwyMS45LDQyLjUsMTMuNCwzMiwxMy40eiIvPg0KPC9zdmc+DQo="/> <text x="365" y="150" fill="#010101" fill-opacity=".3" transform="scale(.1)" textLength="270">label</text><text x="365" y="140" transform="scale(.1)" textLength="270">label</text><text x="825" y="150" fill="#010101" fill-opacity=".3" transform="scale(.1)" textLength="490">message</text><text x="825" y="140" transform="scale(.1)" textLength="490">message</text></g> </svg>
+`
+
+exports['simple-icons javascript logo default color (#F7DF1E) 1'] = `
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="113" height="20"><linearGradient id="b" x2="0" y2="100%"><stop offset="0" stop-color="#bbb" stop-opacity=".1"/><stop offset="1" stop-opacity=".1"/></linearGradient><clipPath id="a"><rect width="113" height="20" rx="3" fill="#fff"/></clipPath><g clip-path="url(#a)"><path fill="#555" d="M0 0h54v20H0z"/><path fill="#007ec6" d="M54 0h59v20H54z"/><path fill="url(#b)" d="M0 0h113v20H0z"/></g><g fill="#fff" text-anchor="middle" font-family="DejaVu Sans,Verdana,Geneva,sans-serif" font-size="110"><image x="5" y="3" width="14" height="14" xlink:href="data:image/svg+xml;base64,PHN2ZyBmaWxsPSIjRjdERjFFIiBhcmlhLWxhYmVsbGVkYnk9InNpbXBsZWljb25zLWphdmFzY3JpcHQtaWNvbiIgcm9sZT0iaW1nIiB2aWV3Qm94PSIwIDAgMjQgMjQiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHRpdGxlIGlkPSJzaW1wbGVpY29ucy1qYXZhc2NyaXB0LWljb24iPkphdmFTY3JpcHQgaWNvbjwvdGl0bGU+PHBhdGggZD0iTTAgMGgyNHYyNEgwVjB6bTIyLjAzNCAxOC4yNzZjLS4xNzUtMS4wOTUtLjg4OC0yLjAxNS0zLjAwMy0yLjg3My0uNzM2LS4zNDUtMS41NTQtLjU4NS0xLjc5Ny0xLjE0LS4wOTEtLjMzLS4xMDUtLjUxLS4wNDYtLjcwNS4xNS0uNjQ2LjkxNS0uODQgMS41MTUtLjY2LjM5LjEyLjc1LjQyLjk3Ni45IDEuMDM0LS42NzYgMS4wMzQtLjY3NiAxLjc1NS0xLjEyNS0uMjctLjQyLS40MDQtLjYwMS0uNTg2LS43OC0uNjMtLjcwNS0xLjQ2OS0xLjA2NS0yLjgzNC0xLjAzNGwtLjcwNS4wODljLS42NzYuMTY1LTEuMzIuNTI1LTEuNzEgMS4wMDUtMS4xNCAxLjI5MS0uODExIDMuNTQxLjU2OSA0LjQ3MSAxLjM2NSAxLjAyIDMuMzYxIDEuMjQ0IDMuNjE2IDIuMjA1LjI0IDEuMTctLjg3IDEuNTQ1LTEuOTY2IDEuNDEtLjgxMS0uMTgtMS4yNi0uNTg2LTEuNzU1LTEuMzM2bC0xLjgzIDEuMDUxYy4yMS40OC40NS42ODkuODEgMS4xMDkgMS43NCAxLjc1NiA2LjA5IDEuNjY2IDYuODcxLTEuMDA0LjAyOS0uMDkuMjQtLjcwNS4wNzQtMS42NWwuMDQ2LjA2N3ptLTguOTgzLTcuMjQ1aC0yLjI0OGMwIDEuOTM4LS4wMDkgMy44NjQtLjAwOSA1LjgwNSAwIDEuMjMyLjA2MyAyLjM2My0uMTM4IDIuNzExLS4zMy42ODktMS4xOC42MDEtMS41NjYuNDgtLjM5Ni0uMTk2LS41OTctLjQ2Ni0uODMtLjg1NS0uMDYzLS4xMDUtLjExLS4xOTYtLjEyNy0uMTk2bC0xLjgyNSAxLjEyNWMuMzA1LjYzLjc1IDEuMTcyIDEuMzI0IDEuNTE3Ljg1NS41MSAyLjAwNC42NzUgMy4yMDcuNDA1Ljc4My0uMjI2IDEuNDU4LS42OTEgMS44MTEtMS40MTEuNTEtLjkzLjQwMi0yLjA3LjM5Ny0zLjM0Ni4wMTItMi4wNTQgMC00LjEwOSAwLTYuMTc5bC4wMDQtLjA1NnoiLz48L3N2Zz4="/> <text x="365" y="150" fill="#010101" fill-opacity=".3" transform="scale(.1)" textLength="270">label</text><text x="365" y="140" transform="scale(.1)" textLength="270">label</text><text x="825" y="150" fill="#010101" fill-opacity=".3" transform="scale(.1)" textLength="490">message</text><text x="825" y="140" transform="scale(.1)" textLength="490">message</text></g> </svg>
+`
+
+exports['simple-icons javascript logo custom color (rgba(46,204,113,0.8)) 1'] = `
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="113" height="20"><linearGradient id="b" x2="0" y2="100%"><stop offset="0" stop-color="#bbb" stop-opacity=".1"/><stop offset="1" stop-opacity=".1"/></linearGradient><clipPath id="a"><rect width="113" height="20" rx="3" fill="#fff"/></clipPath><g clip-path="url(#a)"><path fill="#555" d="M0 0h54v20H0z"/><path fill="#007ec6" d="M54 0h59v20H54z"/><path fill="url(#b)" d="M0 0h113v20H0z"/></g><g fill="#fff" text-anchor="middle" font-family="DejaVu Sans,Verdana,Geneva,sans-serif" font-size="110"><image x="5" y="3" width="14" height="14" xlink:href="data:image/svg+xml;base64,PHN2ZyBmaWxsPSJyZ2JhKDQ2LDIwNCwxMTMsMC44KSIgYXJpYS1sYWJlbGxlZGJ5PSJzaW1wbGVpY29ucy1qYXZhc2NyaXB0LWljb24iIHJvbGU9ImltZyIgdmlld0JveD0iMCAwIDI0IDI0IiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjx0aXRsZSBpZD0ic2ltcGxlaWNvbnMtamF2YXNjcmlwdC1pY29uIj5KYXZhU2NyaXB0IGljb248L3RpdGxlPjxwYXRoIGQ9Ik0wIDBoMjR2MjRIMFYwem0yMi4wMzQgMTguMjc2Yy0uMTc1LTEuMDk1LS44ODgtMi4wMTUtMy4wMDMtMi44NzMtLjczNi0uMzQ1LTEuNTU0LS41ODUtMS43OTctMS4xNC0uMDkxLS4zMy0uMTA1LS41MS0uMDQ2LS43MDUuMTUtLjY0Ni45MTUtLjg0IDEuNTE1LS42Ni4zOS4xMi43NS40Mi45NzYuOSAxLjAzNC0uNjc2IDEuMDM0LS42NzYgMS43NTUtMS4xMjUtLjI3LS40Mi0uNDA0LS42MDEtLjU4Ni0uNzgtLjYzLS43MDUtMS40NjktMS4wNjUtMi44MzQtMS4wMzRsLS43MDUuMDg5Yy0uNjc2LjE2NS0xLjMyLjUyNS0xLjcxIDEuMDA1LTEuMTQgMS4yOTEtLjgxMSAzLjU0MS41NjkgNC40NzEgMS4zNjUgMS4wMiAzLjM2MSAxLjI0NCAzLjYxNiAyLjIwNS4yNCAxLjE3LS44NyAxLjU0NS0xLjk2NiAxLjQxLS44MTEtLjE4LTEuMjYtLjU4Ni0xLjc1NS0xLjMzNmwtMS44MyAxLjA1MWMuMjEuNDguNDUuNjg5LjgxIDEuMTA5IDEuNzQgMS43NTYgNi4wOSAxLjY2NiA2Ljg3MS0xLjAwNC4wMjktLjA5LjI0LS43MDUuMDc0LTEuNjVsLjA0Ni4wNjd6bS04Ljk4My03LjI0NWgtMi4yNDhjMCAxLjkzOC0uMDA5IDMuODY0LS4wMDkgNS44MDUgMCAxLjIzMi4wNjMgMi4zNjMtLjEzOCAyLjcxMS0uMzMuNjg5LTEuMTguNjAxLTEuNTY2LjQ4LS4zOTYtLjE5Ni0uNTk3LS40NjYtLjgzLS44NTUtLjA2My0uMTA1LS4xMS0uMTk2LS4xMjctLjE5NmwtMS44MjUgMS4xMjVjLjMwNS42My43NSAxLjE3MiAxLjMyNCAxLjUxNy44NTUuNTEgMi4wMDQuNjc1IDMuMjA3LjQwNS43ODMtLjIyNiAxLjQ1OC0uNjkxIDEuODExLTEuNDExLjUxLS45My40MDItMi4wNy4zOTctMy4zNDYuMDEyLTIuMDU0IDAtNC4xMDkgMC02LjE3OWwuMDA0LS4wNTZ6Ii8+PC9zdmc+"/> <text x="365" y="150" fill="#010101" fill-opacity=".3" transform="scale(.1)" textLength="270">label</text><text x="365" y="140" transform="scale(.1)" textLength="270">label</text><text x="825" y="150" fill="#010101" fill-opacity=".3" transform="scale(.1)" textLength="490">message</text><text x="825" y="140" transform="scale(.1)" textLength="490">message</text></g> </svg>
+`
+
+exports['The badge generator badges with logos should always produce the same badge shields GitHub logo default color (#333333) 1'] = `
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="113" height="20"><linearGradient id="b" x2="0" y2="100%"><stop offset="0" stop-color="#bbb" stop-opacity=".1"/><stop offset="1" stop-opacity=".1"/></linearGradient><clipPath id="a"><rect width="113" height="20" rx="3" fill="#fff"/></clipPath><g clip-path="url(#a)"><path fill="#555" d="M0 0h54v20H0z"/><path fill="#4c1" d="M54 0h59v20H54z"/><path fill="url(#b)" d="M0 0h113v20H0z"/></g><g fill="#fff" text-anchor="middle" font-family="DejaVu Sans,Verdana,Geneva,sans-serif" font-size="110"><image x="5" y="3" width="14" height="14" xlink:href="github"/> <text x="365" y="150" fill="#010101" fill-opacity=".3" transform="scale(.1)" textLength="270">label</text><text x="365" y="140" transform="scale(.1)" textLength="270">label</text><text x="825" y="150" fill="#010101" fill-opacity=".3" transform="scale(.1)" textLength="490">message</text><text x="825" y="140" transform="scale(.1)" textLength="490">message</text></g> </svg>
+`
+
+exports['The badge generator badges with logos should always produce the same badge shields GitHub logo custom color (whitesmoke) 1'] = `
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="113" height="20"><linearGradient id="b" x2="0" y2="100%"><stop offset="0" stop-color="#bbb" stop-opacity=".1"/><stop offset="1" stop-opacity=".1"/></linearGradient><clipPath id="a"><rect width="113" height="20" rx="3" fill="#fff"/></clipPath><g clip-path="url(#a)"><path fill="#555" d="M0 0h54v20H0z"/><path fill="#4c1" d="M54 0h59v20H54z"/><path fill="url(#b)" d="M0 0h113v20H0z"/></g><g fill="#fff" text-anchor="middle" font-family="DejaVu Sans,Verdana,Geneva,sans-serif" font-size="110"><image x="5" y="3" width="14" height="14" xlink:href="github"/> <text x="365" y="150" fill="#010101" fill-opacity=".3" transform="scale(.1)" textLength="270">label</text><text x="365" y="140" transform="scale(.1)" textLength="270">label</text><text x="825" y="150" fill="#010101" fill-opacity=".3" transform="scale(.1)" textLength="490">message</text><text x="825" y="140" transform="scale(.1)" textLength="490">message</text></g> </svg>
+`
+
+exports['The badge generator badges with logos should always produce the same badge simple-icons javascript logo default color (#F7DF1E) 1'] = `
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="113" height="20"><linearGradient id="b" x2="0" y2="100%"><stop offset="0" stop-color="#bbb" stop-opacity=".1"/><stop offset="1" stop-opacity=".1"/></linearGradient><clipPath id="a"><rect width="113" height="20" rx="3" fill="#fff"/></clipPath><g clip-path="url(#a)"><path fill="#555" d="M0 0h54v20H0z"/><path fill="#4c1" d="M54 0h59v20H54z"/><path fill="url(#b)" d="M0 0h113v20H0z"/></g><g fill="#fff" text-anchor="middle" font-family="DejaVu Sans,Verdana,Geneva,sans-serif" font-size="110"><image x="5" y="3" width="14" height="14" xlink:href="javascript"/> <text x="365" y="150" fill="#010101" fill-opacity=".3" transform="scale(.1)" textLength="270">label</text><text x="365" y="140" transform="scale(.1)" textLength="270">label</text><text x="825" y="150" fill="#010101" fill-opacity=".3" transform="scale(.1)" textLength="490">message</text><text x="825" y="140" transform="scale(.1)" textLength="490">message</text></g> </svg>
+`
+
+exports['The badge generator badges with logos should always produce the same badge simple-icons javascript logo custom color (rgba(46,204,113,0.8)) 1'] = `
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="113" height="20"><linearGradient id="b" x2="0" y2="100%"><stop offset="0" stop-color="#bbb" stop-opacity=".1"/><stop offset="1" stop-opacity=".1"/></linearGradient><clipPath id="a"><rect width="113" height="20" rx="3" fill="#fff"/></clipPath><g clip-path="url(#a)"><path fill="#555" d="M0 0h54v20H0z"/><path fill="#4c1" d="M54 0h59v20H54z"/><path fill="url(#b)" d="M0 0h113v20H0z"/></g><g fill="#fff" text-anchor="middle" font-family="DejaVu Sans,Verdana,Geneva,sans-serif" font-size="110"><image x="5" y="3" width="14" height="14" xlink:href="javascript"/> <text x="365" y="150" fill="#010101" fill-opacity=".3" transform="scale(.1)" textLength="270">label</text><text x="365" y="140" transform="scale(.1)" textLength="270">label</text><text x="825" y="150" fill="#010101" fill-opacity=".3" transform="scale(.1)" textLength="490">message</text><text x="825" y="140" transform="scale(.1)" textLength="490">message</text></g> </svg>
+`
--- a/frontend/components/usage.js
+++ b/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>

--- a/lib/badge-data.js
+++ b/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,

--- a/lib/badge-data.spec.js
+++ b/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' });

--- a/lib/load-logos.js
+++ b/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;
 }

--- a/lib/load-simple-icons.js
+++ b/lib/load-simple-icons.js
+'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;
--- a/lib/logo-helper.js
+++ b/lib/logo-helper.js
+'use strict';
+
+function isDataUri(s) {
+  return s !== undefined && /^(data:)([^;]+);([^,]+),(.+)$/.test(s);
+}
+
+function svg2base64(svg){
+  if (typeof svg !== 'string'){
+    return undefined;
+  }
+  // Check if logo is already base64
+  return isDataUri(svg) ? svg : 'data:image/svg+xml;base64,' + Buffer.from(svg).toString('base64');
+}
+
+module.exports = {
+  svg2base64,
+  isDataUri,
+}
--- a/lib/logo-helper.spec.js
+++ b/lib/logo-helper.spec.js
+'use strict';
+
+const {
+  test,
+  given,
+  forCases,
+} = require('sazerac');
+const {
+  svg2base64,
+  isDataUri,
+} = require('./logo-helper');
+
+describe('Logo helpers', function() {
+  test(svg2base64, () => {
+    given('data:image/svg+xml;base64,PHN2ZyB4bWxu').expect('data:image/svg+xml;base64,PHN2ZyB4bWxu');
+    given('<svg xmlns="http://www.w3.org/2000/svg"/>').expect('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciLz4=');
+    given(undefined).expect(undefined);
+  });
+
+  test(isDataUri, () => {
+    given('data:image/svg+xml;base64,PHN2ZyB4bWxu').expect(true);
+    forCases([
+      given('data:foobar'),
+      given('foobar'),
+    ]).expect(false);
+  });
+});
--- a/lib/make-badge.spec.js
+++ b/lib/make-badge.spec.js
@@ -127,4 +127,25 @@ describe('The badge generator', () => {
      expect(svg).to.include('""').and.to.include('some-value');
    });
  });
+  describe('badges with logos should always produce the same badge', () => {
+    it('shields GitHub logo default color (#333333)', () => {
+      const svg = makeBadge({ text: ['label', 'message'], format: 'svg', logo: 'github' });
+      snapshot(svg);
+    });
+
+    it('shields GitHub logo custom color (whitesmoke)', () => {
+      const svg = makeBadge({ text: ['label', 'message'], format: 'svg', logo: 'github', logoColor: 'whitesmoke' });
+      snapshot(svg);
+    });
+
+    it('simple-icons javascript logo default color (#F7DF1E)', () => {
+      const svg = makeBadge({ text: ['label', 'message'], format: 'svg', logo: 'javascript' });
+      snapshot(svg);
+    });
+
+    it('simple-icons javascript logo custom color (rgba(46,204,113,0.8))', () => {
+      const svg = makeBadge({ text: ['label', 'message'], format: 'svg', logo: 'javascript', logoColor: 'rgba(46,204,113,0.8)' });
+      snapshot(svg);
+    });
+  });
 });
--- a/lib/request-handler.js
+++ b/lib/request-handler.js
@@ -40,6 +40,7 @@ const globalQueryParams = new Set([
  'style',
  'link',
  'logo',
+  'logoColor',
  'logoPosition',
  'logoWidth',
  'link',

--- a/package-lock.json
+++ b/package-lock.json
@@ -5369,6 +5369,7 @@
          "resolved": "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.5.tgz",
          "integrity": "sha1-k4NwpXtKUd6ix3wV1cX9+JUWQAk=",
          "dev": true,
+          "optional": true,
          "requires": {
            "delayed-stream": "~1.0.0"
          }
@@ -5440,7 +5441,8 @@
          "version": "1.0.0",
          "resolved": "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz",
          "integrity": "sha1-3zrhmayt+31ECqrgsp4icrJOxhk=",
-          "dev": true
+          "dev": true,
+          "optional": true
        },
        "delegates": {
          "version": "1.0.0",
@@ -5765,13 +5767,15 @@
          "version": "1.27.0",
          "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.27.0.tgz",
          "integrity": "sha1-gg9XIpa70g7CXtVeW13oaeVDbrE=",
-          "dev": true
+          "dev": true,
+          "optional": true
        },
        "mime-types": {
          "version": "2.1.15",
          "resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.15.tgz",
          "integrity": "sha1-pOv1BkCUVpI3uM9wBGd20J/JKu0=",
          "dev": true,
+          "optional": true,
          "requires": {
            "mime-db": "~1.27.0"
          }
@@ -5855,7 +5859,8 @@
          "version": "1.0.1",
          "resolved": "https://registry.npmjs.org/number-is-nan/-/number-is-nan-1.0.1.tgz",
          "integrity": "sha1-CXtgK1NCKlIsGvuHkDGDNpQaAR0=",
-          "dev": true
+          "dev": true,
+          "optional": true
        },
        "oauth-sign": {
          "version": "0.8.2",
@@ -13130,6 +13135,11 @@
      "integrity": "sha1-tf3AjxKH6hF4Yo5BXiUTK3NkbG0=",
      "dev": true
    },
+    "simple-icons": {
+      "version": "1.7.1",
+      "resolved": "https://registry.npmjs.org/simple-icons/-/simple-icons-1.7.1.tgz",
+      "integrity": "sha1-xoVlvjKsRsq4N7IZrnGuu6T9JVM="
+    },
    "sinon": {
      "version": "6.0.0",
      "resolved": "https://registry.npmjs.org/sinon/-/sinon-6.0.0.tgz",

--- a/package.json
+++ b/package.json
@@ -48,6 +48,7 @@
    "redis": "~2.6.2",
    "request": "~2.87.0",
    "semver": "~5.5.0",
+    "simple-icons": "^1.7.1",
    "svgo": "~1.0.5",
    "xml2js": "~0.4.16",
    "xmldom": "~0.1.27",