add preview/index.html

6 years ago · 3281172636
2 changed files with 76 additions and 0 deletions
--- a/README.md
+++ b/README.md
@ -0,0 +1,8 @@
+# badgen-icons
+
+Icons for badgen.net
+
+## Add an icon
+
+- Optimize markup with [svgomg](https://jakearchibald.github.io/svgomg/)
+- Preview with `preview/index.html`
--- a/preview/index.html
+++ b/preview/index.html
@ -0,0 +1,68 @@
+<html>
+  <head>
+    <style>
+      body {
+        font-size: 16px;
+      }
+      #preview {
+        text-align: center;
+        padding: 15vh 0;
+      }
+      #preview svg {
+        transform: scale(2);
+      }
+      #markup {
+        border: none;
+        box-sizing: border-box;
+        background: #EEE;
+        padding: 1em 1.2em;
+        height: 30vh;
+        width: 100%;
+        font-size: 14px;
+      }
+    </style>
+  </head>
+  <body>
+    <div id="preview"></div>
+    <textarea id="markup" placeholder="paste svg markup"></textarea>
+    <script>
+      const markup = document.querySelector('#markup')
+      const preview = document.querySelector('#preview')
+
+      function createBadge (svg) {
+        const base64 = svg
+          ? `data:image/svg+xml;base64,${btoa(markup.value)}`
+          : 'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7'
+
+        return `<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="53.6" height="30" viewBox="0 0 536 200">
+          <linearGradient id="a" x2="0" y2="100%">
+            <stop offset="0" stop-opacity=".1" stop-color="#EEE"/>
+            <stop offset="1" stop-opacity=".1"/>
+          </linearGradient>
+          <mask id="m"><rect width="536" height="200" rx="30" fill="#FFF"/></mask>
+          <g mask="url(#m)">
+            <rect width="212" height="200" fill="#555"/>
+            <rect width="324" height="200" fill="#08C" x="212"/>
+            <rect width="536" height="200" fill="url(#a)"/>
+          </g>
+          <g fill="#fff" text-anchor="start" font-family="Verdana,DejaVu Sans,sans-serif" font-size="110">
+            <text x="172" y="148" textLength="0" fill="#000" opacity="0.25"/>
+            <text x="162" y="138" textLength="0"/>
+            <text x="267" y="148" textLength="224" fill="#000" opacity="0.25">icon</text>
+            <text x="257" y="138" textLength="224">icon</text>
+          </g>
+          <image x="40" y="35" width="130" height="130" xlink:href="${base64}"/>
+        </svg>`
+      }
+
+      // init badge
+      preview.innerHTML = createBadge()
+
+      // update badge on input
+      markup.oninput = function () {
+        preview.innerHTML = createBadge(markup.value)
+      }
+    </script>
+  </body>
+<body>
+</html>