Generate SVG preview client side

index.html

@@ -25,6 +25,9 @@
 
       <h3 class="output-title">Markdown</h3>
       <pre class="badge-markdown"></pre>
+
+      <h3 class="output-title">SVG</h3>
+      <pre class="badge-svg"></pre>
     </div>
 
     <script src="./script.js"></script>

package.json

@@ -15,6 +15,7 @@
     "parcel-bundler": "^1.11.0"
   },
   "dependencies": {
+    "badgen": "^2.7.0",
     "escape-html": "^1.0.3",
     "modern-normalize": "^0.5.0"
   }

script.js

@@ -1,8 +1,20 @@
+const badgen = require('badgen');
 const escape = require('escape-html');
 
 const badgeLinkUrl = username => `https://tippin.me/@${username}`;
 const badgeImageUrl = username => `https://badgen.net/badge/%E2%9A%A1%EF%B8%8Ftippin.me/@${username}/F0918E`;
 
+const badgeSVG = username => badgen({
+  subject: '⚡️tippin.me',
+  status: `@${username}`,
+  color: 'F0918E',
+});
+
+const badgeHtmlPreview = username =>
+`<a href="${badgeLinkUrl(username)}" rel="noopener noreferrer" target="_blank">
+  ${badgeSVG(username)}
+</a>`;
+
 const badgeHtml = username =>
 `<a href="${badgeLinkUrl(username)}" rel="noopener noreferrer" target="_blank">
   <img src="${badgeImageUrl(username)}" alt="@${username} on tippin.me"/>
@@ -15,15 +27,16 @@ const usernameInput = document.querySelector('input[name="username"]');
 const badgePreview = document.querySelector('.badge-preview');
 const badgeHtmlSource = document.querySelector('.badge-html');
 const badgeMarkdownSource = document.querySelector('.badge-markdown');
+const badgeSvgSource = document.querySelector('.badge-svg');
 
 const generateBadge = () => {
   const username = escape(usernameInput.value) || 'username';
-  const html = badgeHtml(username);
-  const markdown = badgeMarkdown(username);
 
-  badgePreview.innerHTML = html;
-  badgeHtmlSource.innerText = html;
-  badgeMarkdownSource.innerText = markdown;
+  badgePreview.innerHTML = badgeHtmlPreview(username);
+
+  badgeHtmlSource.innerText = badgeHtml(username);
+  badgeMarkdownSource.innerText = badgeMarkdown(username);
+  badgeSvgSource.innerText = badgeSVG(username);
 };
 
 generateBadge();

yarn.lock

@@ -879,6 +879,11 @@ babylon-walk@^1.0.2:
     babel-types "^6.15.0"
     lodash.clone "^4.5.0"
 
+badgen@^2.7.0:
+  version "2.7.0"
+  resolved "https://registry.yarnpkg.com/badgen/-/badgen-2.7.0.tgz#b2cb9c247a525299557f8190032523c554a557bd"
+  integrity sha512-apgGBA8dZI4gBPt9s/RRCG660h0pteT/2ANh+wqAUSDNPsRRCNVlezEUi5znJU3Ceolno/xryDG4LD2xGzCfow==
+
 balanced-match@^0.4.2:
   version "0.4.2"
   resolved "https://registry.yarnpkg.com/balanced-match/-/balanced-match-0.4.2.tgz#cb3f3e3c732dc0f01ee70b403f302e61d7709838"