3.2.3

Bumps [json5](https://github.com/json5/json5) from 2.2.1 to 2.2.3.
- [Release notes](https://github.com/json5/json5/releases)
- [Changelog](https://github.com/json5/json5/blob/main/CHANGELOG.md)
- [Commits](https://github.com/json5/json5/compare/v2.2.1...v2.2.3)

---
updated-dependencies:
- dependency-name: json5
  dependency-type: indirect
...

Signed-off-by: dependabot[bot] <support@github.com>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>

.github/workflows/nodejs.yml

@@ -7,7 +7,7 @@ jobs:
 
     strategy:
       matrix:
-        node: [8, 10, 12]
+        node: [12, 14, 16, 18]
         os: [ubuntu-latest]
 
     runs-on: ${{ matrix.os }}

README.md

@@ -49,7 +49,7 @@ Available color names:
 ```html
 <script src="https://unpkg.com/badgen"></script>
 <script>
-  var svgString = badgen.badgen({ /*...*/ })
+  var svgString = badgen({ /*...*/ })
 </script>
 ```
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "badgen",
-  "version": "3.2.2",
+  "version": "3.2.3",
   "description": "Fast svg badge generator.",
   "repository": "amio/badgen",
   "author": "Amio <amio.cn@gmail.com>",
@@ -13,7 +13,7 @@
     "preview": "node preview/serve.js",
     "snaptests": "TAP_SNAPSHOT=1 npm test",
     "pretest": "npm run build",
-    "test": "tap test/*.spec.ts",
+    "test": "tap --no-check-coverage",
     "prebuild": "rm -rf dist",
     "esbuild": "esbuild src/index.ts --bundle --minify --sourcemap",
     "build:types": "tsc --emitDeclarationOnly",
@@ -26,9 +26,9 @@
   "devDependencies": {
     "@types/node": "^14.0.14",
     "benchmark": "^2.1.4",
-    "esbuild": "^0.8.17",
+    "esbuild": "^0.14.38",
     "serve-marked": "^3.1.0",
-    "tap": "^14.10.7",
+    "tap": "^16.1.0",
     "typescript": "^4.1.2"
   }
 }

src/calc-text-width.ts

@@ -1,8 +1,8 @@
 // import widthsVerdana110 from './widths-verdana-110.json'
 // @ts-ignore
-const widthsVerdana110 = require('./widths-verdana-110.json')
+const widthsVerdana110: number[] = require('./widths-verdana-110.json')
 
-const calcWidth = (charWidthTable) => {
+const calcWidth = (charWidthTable: number[]) => {
   const fallbackWidth = charWidthTable[64] // Width as "@" for overflows
 
   return ([...text]) => {

src/color-presets.ts

@@ -10,4 +10,4 @@ export default {
   gray: '999',
   cyan: '1BC',
   black: '2A2A2A'
-}
+} as Record<string, string>

src/index.ts

@@ -2,12 +2,13 @@ export { Verdana110 as calcWidth } from './calc-text-width'
 import { Verdana110 as calcWidth } from './calc-text-width'
 import colorPresets from './color-presets'
 
-type StyleOption = 'flat' | 'classic'
+export type StyleOption = 'flat' | 'classic'
+export type ColorPreset = keyof typeof colorPresets
 
-interface BadgenOptions {
+export interface BadgenOptions {
   status: string;
   subject?: string;
-  color?: string;
+  color?: ColorPreset;
   label?: string;
   labelColor?: string
   style?: StyleOption;
@@ -38,17 +39,23 @@ export function badgen ({
   labelColor = colorPresets[labelColor] || labelColor
   iconWidth = iconWidth * 10
 
-  const iconSpanWidth = icon ? (label.length ? iconWidth + 30 : iconWidth - 18) : 0
+  const iconSpanWidth = icon ? (label?.length ? iconWidth + 30 : iconWidth - 18) : 0
   const sbTextStart = icon ? (iconSpanWidth + 50) : 50
-  const sbTextWidth = calcWidth(label)
+  const sbTextWidth = label ? calcWidth(label) : 0
   const stTextWidth = calcWidth(status)
   const sbRectWidth = sbTextWidth + 100 + iconSpanWidth
   const stRectWidth = stTextWidth + 100
   const width = sbRectWidth + stRectWidth
   const xlink = icon ? ' xmlns:xlink="http://www.w3.org/1999/xlink"' : ''
 
-  label = sanitize(label)
+  const gradientId = generateRandomID(5)
+  const maskId = generateRandomID(5)
+
+  label = label ? sanitize(label) : ''
   status = sanitize(status)
+  color = sanitize(color)
+  labelColor = sanitize(labelColor)
+  icon = icon ? sanitize(icon) : icon
   const accessibleText = createAccessibleText({label, status})
 
   if (style === 'flat') {
@@ -70,15 +77,15 @@ export function badgen ({
 
   return `<svg width="${scale * width / 10}" height="${scale * 20}" viewBox="0 0 ${width} 200" xmlns="http://www.w3.org/2000/svg"${xlink} role="img" aria-label="${accessibleText}">
   <title>${accessibleText}</title>
-  <linearGradient id="a" x2="0" y2="100%">
+  <linearGradient id="${gradientId}" 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="${width}" height="200" rx="30" fill="#FFF"/></mask>
+  <mask id="${maskId}"><rect width="${width}" height="200" rx="30" fill="#FFF"/></mask>
-  <g mask="url(#m)">
+  <g mask="url(#${maskId})">
     <rect width="${sbRectWidth}" height="200" fill="#${labelColor}"/>
     <rect width="${stRectWidth}" height="200" fill="#${color}" x="${sbRectWidth}"/>
-    <rect width="${width}" height="200" fill="url(#a)"/>
+    <rect width="${width}" height="200" fill="url(#${gradientId})"/>
   </g>
   <g aria-hidden="true" fill="#fff" text-anchor="start" font-family="Verdana,DejaVu Sans,sans-serif" font-size="110">
     <text x="${sbTextStart + 10}" y="148" textLength="${sbTextWidth}" fill="#000" opacity="0.25">${label}</text>
@@ -90,14 +97,18 @@ export function badgen ({
 </svg>`
 }
 
-function bare ({ status, color, style, scale }) {
+function bare ({ status, color = 'blue', style, scale = 1 }: BadgenOptions) {
   typeAssert(typeof status === 'string', '<status> must be string')
   color = colorPresets[color] || color || colorPresets.blue
 
   const stTextWidth = calcWidth(status)
   const stRectWidth = stTextWidth + 115
 
+  const gradientId = generateRandomID(5)
+  const maskId = generateRandomID(5)
+
   status = sanitize(status)
+  color = sanitize(color)
 
   if (style === 'flat') {
     return `<svg width="${scale * stRectWidth / 10}" height="${scale * 20}" viewBox="0 0 ${stRectWidth} 200" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="${status}">
@@ -114,14 +125,14 @@ function bare ({ status, color, style, scale }) {
 
   return `<svg width="${scale * stRectWidth / 10}" height="${scale * 20}" viewBox="0 0 ${stRectWidth} 200" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="${status}">
   <title>${status}</title>
-  <linearGradient id="a" x2="0" y2="100%">
+  <linearGradient id="${gradientId}" 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="${stRectWidth}" height="200" rx="30" fill="#FFF"/></mask>
+  <mask id="${maskId}"><rect width="${stRectWidth}" height="200" rx="30" fill="#FFF"/></mask>
-  <g mask="url(#m)">
+  <g mask="url(#${maskId})">
     <rect width="${stRectWidth}" height="200" fill="#${color}" x="0"/>
-    <rect width="${stRectWidth}" height="200" fill="url(#a)"/>
+    <rect width="${stRectWidth}" height="200" fill="url(#${gradientId})"/>
   </g>
   <g aria-hidden="true" fill="#fff" text-anchor="start" font-family="Verdana,DejaVu Sans,sans-serif" font-size="110">
     <text x="65" y="148" textLength="${stTextWidth}" fill="#000" opacity="0.25">${status}</text>
@@ -144,6 +155,17 @@ interface AccessibleTextProps {
   label?: string;
 }
 
+function generateRandomID(length: number): string {
+  const characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz';
+  let result = '';
+
+  for (let i = 0; i < length; i++) {
+    result += characters.charAt(Math.floor(Math.random() * characters.length));
+  }
+
+  return result;
+}
+
 function createAccessibleText({label, status}: AccessibleTextProps): string {
   const labelPrefix = label ? `${label}: ` : '';
   return labelPrefix + status;

tap-snapshots/test-badgen.spec.ts-TAP.test.js

@@ -5,6 +5,48 @@
  * Make sure to inspect the output below.  Do not ignore changes!
  */
 'use strict'
+exports[`test/badgen.spec.ts TAP ensure badgen() correctly escapes string inputs > snapshot 1`] = `
+<svg width="191.2" height="20" viewBox="0 0 1912 200" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" role="img" aria-label="&lt;escape me&gt;: &lt;escape me&gt;">
+  <title>&lt;escape me&gt;: &lt;escape me&gt;</title>
+  <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="1912" height="200" rx="30" fill="#FFF"/></mask>
+  <g mask="url(#m)">
+    <rect width="1036" height="200" fill="#&lt;escape me&gt;"/>
+    <rect width="876" height="200" fill="#&lt;escape me&gt;" x="1036"/>
+    <rect width="1912" height="200" fill="url(#a)"/>
+  </g>
+  <g aria-hidden="true" fill="#fff" text-anchor="start" font-family="Verdana,DejaVu Sans,sans-serif" font-size="110">
+    <text x="220" y="148" textLength="776" fill="#000" opacity="0.25">&lt;escape me&gt;</text>
+    <text x="210" y="138" textLength="776">&lt;escape me&gt;</text>
+    <text x="1091" y="148" textLength="776" fill="#000" opacity="0.25">&lt;escape me&gt;</text>
+    <text x="1081" y="138" textLength="776">&lt;escape me&gt;</text>
+  </g>
+  <image x="40" y="35" width="130" height="130" xlink:href="&lt;escape me&gt;"/>
+</svg>
+`
+
+exports[`test/badgen.spec.ts TAP ensure bare() correctly escapes string inputs > snapshot 1`] = `
+<svg width="89.1" height="20" viewBox="0 0 891 200" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="&lt;escape me&gt;">
+  <title>&lt;escape me&gt;</title>
+  <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="891" height="200" rx="30" fill="#FFF"/></mask>
+  <g mask="url(#m)">
+    <rect width="891" height="200" fill="#&lt;escape me&gt;" x="0"/>
+    <rect width="891" height="200" fill="url(#a)"/>
+  </g>
+  <g aria-hidden="true" fill="#fff" text-anchor="start" font-family="Verdana,DejaVu Sans,sans-serif" font-size="110">
+    <text x="65" y="148" textLength="776" fill="#000" opacity="0.25">&lt;escape me&gt;</text>
+    <text x="55" y="138" textLength="776">&lt;escape me&gt;</text>
+  </g>
+</svg>
+`
+
 exports[`test/badgen.spec.ts TAP generate badge with { label, status } > snapshot 1`] = `
 <svg width="80.4" height="20" viewBox="0 0 804 200" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="npm: v1.0.0">
   <title>npm: v1.0.0</title>

tap-snapshots/test-calc-width.spec.js-TAP.test.js

@@ -5,18 +5,18 @@
  * Make sure to inspect the output below.  Do not ignore changes!
  */
 'use strict'
-exports[`test/calc-width.spec.js TAP calc width for "npm" > result is correct 1`] = `
+exports[`test/calc-width.spec.ts TAP calc width for "npm" > result is correct 1`] = `
 249
 `
 
-exports[`test/calc-width.spec.js TAP calc width for emojis > result is correct 1`] = `
+exports[`test/calc-width.spec.ts TAP calc width for emojis > result is correct 1`] = `
 330
 `
 
-exports[`test/calc-width.spec.js TAP calc width for special chars > result is correct 1`] = `
+exports[`test/calc-width.spec.ts TAP calc width for special chars > result is correct 1`] = `
 600
 `
 
-exports[`test/calc-width.spec.js TAP calc width for unicode > result is correct 1`] = `
+exports[`test/calc-width.spec.ts TAP calc width for unicode > result is correct 1`] = `
 550
 `

tap-snapshots/test/badgen.spec.js.test.cjs

@@ -0,0 +1,265 @@
+/* IMPORTANT
+ * This snapshot file is auto-generated, but designed for humans.
+ * It should be checked into source control and tracked carefully.
+ * Re-generate by setting TAP_SNAPSHOT=1 and running tests.
+ * Make sure to inspect the output below.  Do not ignore changes!
+ */
+'use strict'
+exports[`test/badgen.spec.js TAP ensure badgen() correctly escapes string inputs > snapshot 1`] = `
+<svg width="191.2" height="20" viewBox="0 0 1912 200" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" role="img" aria-label="&lt;escape me&gt;: &lt;escape me&gt;">
+  <title>&lt;escape me&gt;: &lt;escape me&gt;</title>
+  <linearGradient id="aaaaa" x2="0" y2="100%">
+    <stop offset="0" stop-opacity=".1" stop-color="#EEE"/>
+    <stop offset="1" stop-opacity=".1"/>
+  </linearGradient>
+  <mask id="aaaaa"><rect width="1912" height="200" rx="30" fill="#FFF"/></mask>
+  <g mask="url(#aaaaa)">
+    <rect width="1036" height="200" fill="#&lt;escape me&gt;"/>
+    <rect width="876" height="200" fill="#&lt;escape me&gt;" x="1036"/>
+    <rect width="1912" height="200" fill="url(#aaaaa)"/>
+  </g>
+  <g aria-hidden="true" fill="#fff" text-anchor="start" font-family="Verdana,DejaVu Sans,sans-serif" font-size="110">
+    <text x="220" y="148" textLength="776" fill="#000" opacity="0.25">&lt;escape me&gt;</text>
+    <text x="210" y="138" textLength="776">&lt;escape me&gt;</text>
+    <text x="1091" y="148" textLength="776" fill="#000" opacity="0.25">&lt;escape me&gt;</text>
+    <text x="1081" y="138" textLength="776">&lt;escape me&gt;</text>
+  </g>
+  <image x="40" y="35" width="130" height="130" xlink:href="&lt;escape me&gt;"/>
+</svg>
+`
+
+exports[`test/badgen.spec.js TAP ensure bare() correctly escapes string inputs > snapshot 1`] = `
+<svg width="89.1" height="20" viewBox="0 0 891 200" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="&lt;escape me&gt;">
+  <title>&lt;escape me&gt;</title>
+  <linearGradient id="aaaaa" x2="0" y2="100%">
+    <stop offset="0" stop-opacity=".1" stop-color="#EEE"/>
+    <stop offset="1" stop-opacity=".1"/>
+  </linearGradient>
+  <mask id="aaaaa"><rect width="891" height="200" rx="30" fill="#FFF"/></mask>
+  <g mask="url(#aaaaa)">
+    <rect width="891" height="200" fill="#&lt;escape me&gt;" x="0"/>
+    <rect width="891" height="200" fill="url(#aaaaa)"/>
+  </g>
+  <g aria-hidden="true" fill="#fff" text-anchor="start" font-family="Verdana,DejaVu Sans,sans-serif" font-size="110">
+    <text x="65" y="148" textLength="776" fill="#000" opacity="0.25">&lt;escape me&gt;</text>
+    <text x="55" y="138" textLength="776">&lt;escape me&gt;</text>
+  </g>
+</svg>
+`
+
+exports[`test/badgen.spec.js TAP generate badge with { label, status } > snapshot 1`] = `
+<svg width="80.4" height="20" viewBox="0 0 804 200" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="npm: v1.0.0">
+  <title>npm: v1.0.0</title>
+  <linearGradient id="aaaaa" x2="0" y2="100%">
+    <stop offset="0" stop-opacity=".1" stop-color="#EEE"/>
+    <stop offset="1" stop-opacity=".1"/>
+  </linearGradient>
+  <mask id="aaaaa"><rect width="804" height="200" rx="30" fill="#FFF"/></mask>
+  <g mask="url(#aaaaa)">
+    <rect width="349" height="200" fill="#555"/>
+    <rect width="455" height="200" fill="#08C" x="349"/>
+    <rect width="804" height="200" fill="url(#aaaaa)"/>
+  </g>
+  <g aria-hidden="true" fill="#fff" text-anchor="start" font-family="Verdana,DejaVu Sans,sans-serif" font-size="110">
+    <text x="60" y="148" textLength="249" fill="#000" opacity="0.25">npm</text>
+    <text x="50" y="138" textLength="249">npm</text>
+    <text x="404" y="148" textLength="355" fill="#000" opacity="0.25">v1.0.0</text>
+    <text x="394" y="138" textLength="355">v1.0.0</text>
+  </g>
+  
+</svg>
+`
+
+exports[`test/badgen.spec.js TAP generate badge with { label, status, color } > snapshot 1`] = `
+<svg width="80.4" height="20" viewBox="0 0 804 200" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="npm: v1.0.0">
+  <title>npm: v1.0.0</title>
+  <linearGradient id="aaaaa" x2="0" y2="100%">
+    <stop offset="0" stop-opacity=".1" stop-color="#EEE"/>
+    <stop offset="1" stop-opacity=".1"/>
+  </linearGradient>
+  <mask id="aaaaa"><rect width="804" height="200" rx="30" fill="#FFF"/></mask>
+  <g mask="url(#aaaaa)">
+    <rect width="349" height="200" fill="#555"/>
+    <rect width="455" height="200" fill="#ADF" x="349"/>
+    <rect width="804" height="200" fill="url(#aaaaa)"/>
+  </g>
+  <g aria-hidden="true" fill="#fff" text-anchor="start" font-family="Verdana,DejaVu Sans,sans-serif" font-size="110">
+    <text x="60" y="148" textLength="249" fill="#000" opacity="0.25">npm</text>
+    <text x="50" y="138" textLength="249">npm</text>
+    <text x="404" y="148" textLength="355" fill="#000" opacity="0.25">v1.0.0</text>
+    <text x="394" y="138" textLength="355">v1.0.0</text>
+  </g>
+  
+</svg>
+`
+
+exports[`test/badgen.spec.js TAP generate badge with { label, status, color, style } > snapshot 1`] = `
+<svg width="80.4" height="20" viewBox="0 0 804 200" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="npm: v1.0.0">
+  <title>npm: v1.0.0</title>
+  <g>
+    <rect fill="#555" width="349" height="200"/>
+    <rect fill="#ADF" x="349" width="455" height="200"/>
+  </g>
+  <g aria-hidden="true" fill="#fff" text-anchor="start" font-family="Verdana,DejaVu Sans,sans-serif" font-size="110">
+    <text x="60" y="148" textLength="249" fill="#000" opacity="0.1">npm</text>
+    <text x="50" y="138" textLength="249">npm</text>
+    <text x="404" y="148" textLength="355" fill="#000" opacity="0.1">v1.0.0</text>
+    <text x="394" y="138" textLength="355">v1.0.0</text>
+  </g>
+  
+</svg>
+`
+
+exports[`test/badgen.spec.js TAP generate badge with { label, status, icon } > snapshot 1`] = `
+<svg width="95.5" height="20" viewBox="0 0 955 200" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" role="img" aria-label="docker: icon">
+  <title>docker: icon</title>
+  <linearGradient id="aaaaa" x2="0" y2="100%">
+    <stop offset="0" stop-opacity=".1" stop-color="#EEE"/>
+    <stop offset="1" stop-opacity=".1"/>
+  </linearGradient>
+  <mask id="aaaaa"><rect width="955" height="200" rx="30" fill="#FFF"/></mask>
+  <g mask="url(#aaaaa)">
+    <rect width="631" height="200" fill="#555"/>
+    <rect width="324" height="200" fill="#08C" x="631"/>
+    <rect width="955" height="200" fill="url(#aaaaa)"/>
+  </g>
+  <g aria-hidden="true" fill="#fff" text-anchor="start" font-family="Verdana,DejaVu Sans,sans-serif" font-size="110">
+    <text x="220" y="148" textLength="371" fill="#000" opacity="0.25">docker</text>
+    <text x="210" y="138" textLength="371">docker</text>
+    <text x="686" y="148" textLength="224" fill="#000" opacity="0.25">icon</text>
+    <text x="676" y="138" textLength="224">icon</text>
+  </g>
+  <image x="40" y="35" width="130" height="130" xlink:href="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGZpbGw9IiNGRkYiIHZpZXdCb3g9IjAgMCAyNCAyNCI+CiAgPHBhdGggZD0iTTE2LjIxIDguNjlsNi43Mi0xLjY4QTEyLjAzIDEyLjAzIDAgMCAxIDI0IDExLjk3YTEyLjA5IDEyLjA5IDAgMCAxLTEyLjk0IDEybDQuOS04LjM1Yy4zNi0uMzguNjYtLjguODktMS4yN2E1LjQ1IDUuNDUgMCAwIDAtLjA1LTQuNzUgNS4xNiA1LjE2IDAgMCAwLS41OS0uOTF6bS0zLjI0IDguNTdsLTIuMTIgNi42OUExMi4wMiAxMi4wMiAwIDAgMSAyLjA0IDUuMjhsNC44MyA4LjM4Yy4xOC41NCAxLjEyIDIuNTggMy4wNyAzLjMyIDEgLjM5IDIuMDQuNDggMy4wMy4yOXptLTEtOS42NGE0LjUyIDQuNTIgMCAwIDAtNC4yOCAzLjUxIDQuNDggNC40OCAwIDAgMCAxLjI0IDQuMDMgNC40OSA0LjQ5IDAgMCAwIDQuNzMuOTMgNC40OSA0LjQ5IDAgMCAwIDIuNy0zLjQzIDQuNTMgNC41MyAwIDAgMC0yLjUtNC42MyA0LjQxIDQuNDEgMCAwIDAtMS44OS0uNDF6TTcuMDUgOS45NmwtNC44LTVBMTIuMDQgMTIuMDQgMCAwIDEgMTIgMGM0LjU2IDAgOC43NCAyLjYgMTAuNzcgNi42N0gxMi41NmE1LjU0IDUuNTQgMCAwIDAtNC4yNyAxLjQ2IDUuMzQgNS4zNCAwIDAgMC0xLjI0IDEuODN6Ii8+Cjwvc3ZnPgo="/>
+</svg>
+`
+
+exports[`test/badgen.spec.js TAP generate badge with { label, status, icon, style } > snapshot 1`] = `
+<svg width="95.5" height="20" viewBox="0 0 955 200" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" role="img" aria-label="docker: icon">
+  <title>docker: icon</title>
+  <g>
+    <rect fill="#555" width="631" height="200"/>
+    <rect fill="#08C" x="631" width="324" height="200"/>
+  </g>
+  <g aria-hidden="true" fill="#fff" text-anchor="start" font-family="Verdana,DejaVu Sans,sans-serif" font-size="110">
+    <text x="220" y="148" textLength="371" fill="#000" opacity="0.1">docker</text>
+    <text x="210" y="138" textLength="371">docker</text>
+    <text x="686" y="148" textLength="224" fill="#000" opacity="0.1">icon</text>
+    <text x="676" y="138" textLength="224">icon</text>
+  </g>
+  <image x="40" y="35" width="130" height="132" xlink:href="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzNDAuOTI1IiBoZWlnaHQ9IjIwMi42NzYiIHZpZXdCb3g9IjAgMCA5MC4yMDMgNTMuNjI1Ij48ZyBmaWxsPSIjZmZmIj48cGF0aCBvcGFjaXR5PSIuNDU2IiBkPSJNNDUuMjE2IDMuODI2Yy0xMi44MzYgMC0yMi4yOCAzLjYzNC0yNi44ODQgMTAuNTMxLS4wOTEtLjEwNi0uMTcxLS4xNzItLjI2Ni0uMzAyLS40NTktLjYyOS0uOTQ1LTEuNDg2LTEuNDI4LTIuMzg0LS40ODQtLjg5OC0uOTY3LTEuODM1LTEuNDg1LTIuNjctLjUxOC0uODM1LTEuMDI1LTEuNTkzLTEuODc0LTIuMTE2LS45MjctLjU3My0xLjczMy0uODI4LTIuMzQ3LS45MTZhMy42ODMgMy42ODMgMCAwIDAtLjg2Mi0uMDE1Yy0xLjUzNS4wMDYtMi43MTQgMS4wMTgtMy42MiAyLjI1NS0uOTEgMS4yNDEtMS42MDkgMi44MzUtMi4wNDIgNC41ODYtLjg2NiAzLjQ5OS0uNzAzIDcuNzU4IDIuMDU2IDEwLjU2IDEuNDYgMS40OTMgMy40MDQgMi4zNSA1LjI2NSAyLjg1IDEuMzIuMzU1IDIuNTMuNDc4IDMuNjI5LjUwOS42MDggNy4xMzMgNC43OTcgMTMuNDA2IDEwLjM5IDE2LjU1OWguMDAxYzIuOTg1IDEuNjc3IDYuMDg0IDIuNTM4IDguNzk5IDMuNTc3IDMuNDY4IDEuMzQgNi44MzQgMi42NDMgMTAuMzY2IDIuOTUybC4wNTguMDA2aC40MDVjMy43MDUgMCA3LjA3Ni0xLjY1NiAxMC40NzgtMi45NTYgMi43MS0xLjAzNyA1LjgxMi0xLjg3NiA4LjgwMi0zLjU1NiA1LjYyMy0zLjE1MiA5LjgxLTkuNDQgMTAuNDItMTYuNTcyIDIuNjc4LS4wNTIgNi4zNTYtLjgyOCA4Ljg0MS0zLjM2NyAyLjc2MS0yLjgwMiAyLjkyNS03LjA2MiAyLjA1OC0xMC41NjItLjQzMy0xLjc1LTEuMTMxLTMuMzQ1LTIuMDQxLTQuNTg2LS45MDctMS4yMzctMi4wODYtMi4yNS0zLjYyMS0yLjI1NWEzLjY4NCAzLjY4NCAwIDAgMC0uODYyLjAxNWMtLjYxNC4wODgtMS40Mi4zNDMtMi4zNDguOTE2LS44NDQuNTItMS4zNSAxLjI3My0xLjg2NSAyLjEwMi0uNTE2LjgzLS45OTcgMS43Ni0xLjQ3OCAyLjY1NS0uNDguODk0LS45NjQgMS43NS0xLjQyIDIuMzgyLS4wOTQuMTMtLjE3NC4xOTctLjI2NC4zMDMtNC42MTEtNi44Ny0xNC4wNDUtMTAuNS0yNi44Ni0xMC41eiIvPjxwYXRoIGQ9Ik00NS4xMyAwQzM0LjE3OCAwIDI0LjkyMiAyLjU1MSAxOC44NCA3LjkyOGMtLjE4NC0uMzI3LS4zMTktLjYxLS41My0uOTQ5LS42MzYtMS4wMjUtMS4yMzEtMi4xODktMy4xMS0zLjM0Ny0xLjMzMS0uODIzLTIuNjU3LTEuMjgyLTMuODEtMS40NS0uNTc0LS4wODItMS4yNDItLjA1NS0xLjc2OC0uMDA3bC4zNzEtLjA0N2MtMy40MTcgMC01LjQyMSAyLjA1LTYuNzE4IDMuODE4QzEuOTggNy43MTUgMS4xNDUgOS43LjYwNyAxMS44NzJjLTEuMDc1IDQuMzQzLTEuMDg4IDkuOTY1IDMuMDQgMTQuMTYgMi4xNjQgMi4yMDggNC43MDYgMy4yNDQgNy4wMDUgMy44Ni40NDMuMTE4LjgzNy4xNDggMS4yNjIuMjM2IDEuNDk5IDcuMTEgNS45MzYgMTMuMTIzIDExLjg3IDE2LjQ2N2wuMDAyLjAwMy4wMDQuMDAxYzMuNDkxIDEuOTYyIDYuODA2IDIuODYgOS4yOSAzLjgxIDMuNDc2IDEuMzQgNy4xNCAyLjgyMyAxMS40MTMgMy4xOTdsLjIyNC4wMmguNTY3YzQuOTA1IDAgOC42MjctMS45ODIgMTEuODQ2LTMuMjEyaC4wMDJjMi40Ni0uOTQyIDUuNzg4LTEuODE0IDkuMzA1LTMuNzlhMjMuMTM5IDIzLjEzOSAwIDAgMCA0LjQ5OC0zLjMwOSAyNS40MDMgMjUuNDAzIDAgMCAwIDcuMzkyLTEyLjk2MmMyLjcyNy0uNDY2IDUuNjItMS42NiA4LjIzLTQuMzIzIDQuMTI2LTQuMTk0IDQuMTE0LTkuODE2IDMuMDQtMTQuMTU4LS41MzktMi4xNzItMS4zNzMtNC4xNTctMi42Ny01LjkyNi0xLjI5Ni0xLjc2OS0zLjMtMy44MTgtNi43MTctMy44MThsLjM3OC4wNDhjLS41My0uMDQ4LTEuMi0uMDc2LTEuNzc1LjAwNy0xLjE1Mi4xNjgtMi40NzMuNjI4LTMuOCAxLjQ0OC0xLjg3MyAxLjE1NC0yLjQ3IDIuMzE1LTMuMTA1IDMuMzM2LS4yMDguMzM0LS4zNC42MTMtLjUyMi45MzZDNjUuMzA2IDIuNTQ2IDU2LjA2NSAwIDQ1LjEzIDB6bS4wODcgNS4xNWMxMy4zNjkgMCAyMi42MDIgNC4wMDMgMjYuNTI2IDExLjE2NSAyLjM2NC0uOTE3IDQuMTA3LTcuMTA1IDYuMDU2LTguMzA0IDEuNTc4LS45NzYgMi41MDEtLjczNSAyLjUwMS0uNzM1IDMuNTcxIDAgNy4yNSAxMC41MTMgMi42NzUgMTUuMTU0LTIuNDE4IDIuNDcxLTYuODgxIDMuMTY1LTkuMTA0IDIuOTg4LS4xNjggNy4xNjMtNC4zNDEgMTMuNjMtOS44NjIgMTYuNzI0LTIuODA5IDEuNTc4LTUuODMyIDIuNDA0LTguNjI3IDMuNDc0LTMuNDY0IDEuMzI1LTYuNzE1IDIuODY4LTEwLjAwNiAyLjg2OGgtLjM0N2MtMy4yNzctLjI4Ni02LjU0LTEuNTMtMTAuMDA1LTIuODY4LTIuNzk2LTEuMDctNS44MTgtMS45MTgtOC42MjctMy40OTYtNS40OS0zLjA5NS05LjY2Ni05LjU0Mi05LjgzNC0xNi43MDQtMi4yMDYuMTktNi43MTktLjQ5Ny05LjE1NS0yLjk4Ni00LjU3NC00LjY0LS44OTUtMTUuMTU0IDIuNjc2LTE1LjE1NCAwIDAgLjkyMy0uMjQxIDIuNTAxLjczNSAxLjk2IDEuMjA1IDMuNzEgNy40NTQgNi4wOTQgOC4zMTlDMjIuNTk3IDkuMTUgMzEuODM2IDUuMTUgNDUuMjE3IDUuMTV6Ii8+PHBhdGggZD0iTTQ3LjE0IDQwLjk5Yy45MDIgMCAxLjQyMy0uNTg0IDEuNDIzLTEuMzczIDAtMS4yMzktLjUyMi0xLjcxNC0xLjQxOC0xLjc4Ni0uMzItLjAyNi0uNTg0LjA2NS0uNjc0LjM0Ny0uMDkuMjgyLjA1NC42MzMuMzQ3LjY3NC42ODYuMDk3LjY4NS4yMTYuNjg1LjU2NiAwIC4zNDgtLjQwMi40OTQtLjQ4NS41MTNhLjUzNi41MzYgMCAwIDAgLjEyMSAxLjA1OG0tMy44MzMuMDAxYy0uOTAyIDAtMS40MjMtLjU4NC0xLjQyMy0xLjM3MyAwLTEuMjM5LjUyMS0xLjcxNCAxLjQxNy0xLjc4Ni4zMjEtLjAyNi41ODQuMDY1LjY3NS4zNDcuMDkuMjgyLS4wNTQuNjMzLS4zNDcuNjc0LS42ODYuMDk3LS42ODYuMjE2LS42ODYuNTY2IDAgLjM0OC40MDMuNDk0LjQ4Ni41MTNhLjUzNi41MzYgMCAwIDEtLjEyMiAxLjA1OG0xNi40NzYtMjcuMDgxYy02LjMzNiAwLTExLjQ3MiA1LjEzNy0xMS40NzIgMTEuNDczIDAgNi4zMzYgNS4xMzYgMTEuNDczIDExLjQ3MiAxMS40NzMgNi4zMzYgMCAxMS40NzMtNS4xMzcgMTEuNDczLTExLjQ3MyAwLTYuMzM2LTUuMTM3LTExLjQ3My0xMS40NzMtMTEuNDczem0tMS42MDYgNi40NGE1LjEgNS4xIDAgMCAxIDAgMTAuMTk3IDUuMDk4IDUuMDk4IDAgMCAxLTQuOTM4LTYuMzY3IDIuMTQ0IDIuMTQ0IDAgMSAwIDIuMDc0LTIuOTUgNS4wNzIgNS4wNzIgMCAwIDEgMi44NjQtLjg4em0tMjcuNTI1LTYuNDRjLTYuMzM2IDAtMTEuNDcyIDUuMTM3LTExLjQ3MiAxMS40NzMgMCA2LjMzNiA1LjEzNiAxMS40NzMgMTEuNDcyIDExLjQ3MyA2LjMzNiAwIDExLjQ3My01LjEzNyAxMS40NzMtMTEuNDczIDAtNi4zMzYtNS4xMzctMTEuNDczLTExLjQ3My0xMS40NzN6bTEuNjQgNi40NGE1LjEgNS4xIDAgMCAxIDAgMTAuMTk3IDUuMDk4IDUuMDk4IDAgMCAxLTQuOTM4LTYuMzY3IDIuMTQ0IDIuMTQ0IDAgMCAwIDQuMTI3LS44MSAyLjE0MiAyLjE0MiAwIDAgMC0yLjA1NC0yLjE0IDUuMDc0IDUuMDc0IDAgMCAxIDIuODY0LS44OHoiLz48L2c+PC9zdmc+"/>
+</svg>
+`
+
+exports[`test/badgen.spec.js TAP generate badge with { label, status, style } > snapshot 1`] = `
+<svg width="80.4" height="20" viewBox="0 0 804 200" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="npm: v1.0.0">
+  <title>npm: v1.0.0</title>
+  <g>
+    <rect fill="#555" width="349" height="200"/>
+    <rect fill="#08C" x="349" width="455" height="200"/>
+  </g>
+  <g aria-hidden="true" fill="#fff" text-anchor="start" font-family="Verdana,DejaVu Sans,sans-serif" font-size="110">
+    <text x="60" y="148" textLength="249" fill="#000" opacity="0.1">npm</text>
+    <text x="50" y="138" textLength="249">npm</text>
+    <text x="404" y="148" textLength="355" fill="#000" opacity="0.1">v1.0.0</text>
+    <text x="394" y="138" textLength="355">v1.0.0</text>
+  </g>
+  
+</svg>
+`
+
+exports[`test/badgen.spec.js TAP generate badge with { status, icon } > snapshot 1`] = `
+<svg width="53.6" height="20" viewBox="0 0 536 200" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" role="img" aria-label="icon">
+  <title>icon</title>
+  <linearGradient id="aaaaa" x2="0" y2="100%">
+    <stop offset="0" stop-opacity=".1" stop-color="#EEE"/>
+    <stop offset="1" stop-opacity=".1"/>
+  </linearGradient>
+  <mask id="aaaaa"><rect width="536" height="200" rx="30" fill="#FFF"/></mask>
+  <g mask="url(#aaaaa)">
+    <rect width="212" height="200" fill="#555"/>
+    <rect width="324" height="200" fill="#08C" x="212"/>
+    <rect width="536" height="200" fill="url(#aaaaa)"/>
+  </g>
+  <g aria-hidden="true" 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>
+    <text x="162" y="138" textLength="0"></text>
+    <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="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGZpbGw9IiNGRkYiIHZpZXdCb3g9IjAgMCAyNCAyNCI+CiAgPHBhdGggZD0iTTE2LjIxIDguNjlsNi43Mi0xLjY4QTEyLjAzIDEyLjAzIDAgMCAxIDI0IDExLjk3YTEyLjA5IDEyLjA5IDAgMCAxLTEyLjk0IDEybDQuOS04LjM1Yy4zNi0uMzguNjYtLjguODktMS4yN2E1LjQ1IDUuNDUgMCAwIDAtLjA1LTQuNzUgNS4xNiA1LjE2IDAgMCAwLS41OS0uOTF6bS0zLjI0IDguNTdsLTIuMTIgNi42OUExMi4wMiAxMi4wMiAwIDAgMSAyLjA0IDUuMjhsNC44MyA4LjM4Yy4xOC41NCAxLjEyIDIuNTggMy4wNyAzLjMyIDEgLjM5IDIuMDQuNDggMy4wMy4yOXptLTEtOS42NGE0LjUyIDQuNTIgMCAwIDAtNC4yOCAzLjUxIDQuNDggNC40OCAwIDAgMCAxLjI0IDQuMDMgNC40OSA0LjQ5IDAgMCAwIDQuNzMuOTMgNC40OSA0LjQ5IDAgMCAwIDIuNy0zLjQzIDQuNTMgNC41MyAwIDAgMC0yLjUtNC42MyA0LjQxIDQuNDEgMCAwIDAtMS44OS0uNDF6TTcuMDUgOS45NmwtNC44LTVBMTIuMDQgMTIuMDQgMCAwIDEgMTIgMGM0LjU2IDAgOC43NCAyLjYgMTAuNzcgNi42N0gxMi41NmE1LjU0IDUuNTQgMCAwIDAtNC4yNyAxLjQ2IDUuMzQgNS4zNCAwIDAgMC0xLjI0IDEuODN6Ii8+Cjwvc3ZnPgo="/>
+</svg>
+`
+
+exports[`test/badgen.spec.js TAP generate badge with { status, icon, iconWidth } > snapshot 1`] = `
+<svg width="59.6" height="20" viewBox="0 0 596 200" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" role="img" aria-label="icon">
+  <title>icon</title>
+  <linearGradient id="aaaaa" x2="0" y2="100%">
+    <stop offset="0" stop-opacity=".1" stop-color="#EEE"/>
+    <stop offset="1" stop-opacity=".1"/>
+  </linearGradient>
+  <mask id="aaaaa"><rect width="596" height="200" rx="30" fill="#FFF"/></mask>
+  <g mask="url(#aaaaa)">
+    <rect width="272" height="200" fill="#555"/>
+    <rect width="324" height="200" fill="#08C" x="272"/>
+    <rect width="596" height="200" fill="url(#aaaaa)"/>
+  </g>
+  <g aria-hidden="true" fill="#fff" text-anchor="start" font-family="Verdana,DejaVu Sans,sans-serif" font-size="110">
+    <text x="232" y="148" textLength="0" fill="#000" opacity="0.25"></text>
+    <text x="222" y="138" textLength="0"></text>
+    <text x="327" y="148" textLength="224" fill="#000" opacity="0.25">icon</text>
+    <text x="317" y="138" textLength="224">icon</text>
+  </g>
+  <image x="40" y="35" width="190" height="130" xlink:href="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzNDAuOTI1IiBoZWlnaHQ9IjIwMi42NzYiIHZpZXdCb3g9IjAgMCA5MC4yMDMgNTMuNjI1Ij48ZyBmaWxsPSIjZmZmIj48cGF0aCBvcGFjaXR5PSIuNDU2IiBkPSJNNDUuMjE2IDMuODI2Yy0xMi44MzYgMC0yMi4yOCAzLjYzNC0yNi44ODQgMTAuNTMxLS4wOTEtLjEwNi0uMTcxLS4xNzItLjI2Ni0uMzAyLS40NTktLjYyOS0uOTQ1LTEuNDg2LTEuNDI4LTIuMzg0LS40ODQtLjg5OC0uOTY3LTEuODM1LTEuNDg1LTIuNjctLjUxOC0uODM1LTEuMDI1LTEuNTkzLTEuODc0LTIuMTE2LS45MjctLjU3My0xLjczMy0uODI4LTIuMzQ3LS45MTZhMy42ODMgMy42ODMgMCAwIDAtLjg2Mi0uMDE1Yy0xLjUzNS4wMDYtMi43MTQgMS4wMTgtMy42MiAyLjI1NS0uOTEgMS4yNDEtMS42MDkgMi44MzUtMi4wNDIgNC41ODYtLjg2NiAzLjQ5OS0uNzAzIDcuNzU4IDIuMDU2IDEwLjU2IDEuNDYgMS40OTMgMy40MDQgMi4zNSA1LjI2NSAyLjg1IDEuMzIuMzU1IDIuNTMuNDc4IDMuNjI5LjUwOS42MDggNy4xMzMgNC43OTcgMTMuNDA2IDEwLjM5IDE2LjU1OWguMDAxYzIuOTg1IDEuNjc3IDYuMDg0IDIuNTM4IDguNzk5IDMuNTc3IDMuNDY4IDEuMzQgNi44MzQgMi42NDMgMTAuMzY2IDIuOTUybC4wNTguMDA2aC40MDVjMy43MDUgMCA3LjA3Ni0xLjY1NiAxMC40NzgtMi45NTYgMi43MS0xLjAzNyA1LjgxMi0xLjg3NiA4LjgwMi0zLjU1NiA1LjYyMy0zLjE1MiA5LjgxLTkuNDQgMTAuNDItMTYuNTcyIDIuNjc4LS4wNTIgNi4zNTYtLjgyOCA4Ljg0MS0zLjM2NyAyLjc2MS0yLjgwMiAyLjkyNS03LjA2MiAyLjA1OC0xMC41NjItLjQzMy0xLjc1LTEuMTMxLTMuMzQ1LTIuMDQxLTQuNTg2LS45MDctMS4yMzctMi4wODYtMi4yNS0zLjYyMS0yLjI1NWEzLjY4NCAzLjY4NCAwIDAgMC0uODYyLjAxNWMtLjYxNC4wODgtMS40Mi4zNDMtMi4zNDguOTE2LS44NDQuNTItMS4zNSAxLjI3My0xLjg2NSAyLjEwMi0uNTE2LjgzLS45OTcgMS43Ni0xLjQ3OCAyLjY1NS0uNDguODk0LS45NjQgMS43NS0xLjQyIDIuMzgyLS4wOTQuMTMtLjE3NC4xOTctLjI2NC4zMDMtNC42MTEtNi44Ny0xNC4wNDUtMTAuNS0yNi44Ni0xMC41eiIvPjxwYXRoIGQ9Ik00NS4xMyAwQzM0LjE3OCAwIDI0LjkyMiAyLjU1MSAxOC44NCA3LjkyOGMtLjE4NC0uMzI3LS4zMTktLjYxLS41My0uOTQ5LS42MzYtMS4wMjUtMS4yMzEtMi4xODktMy4xMS0zLjM0Ny0xLjMzMS0uODIzLTIuNjU3LTEuMjgyLTMuODEtMS40NS0uNTc0LS4wODItMS4yNDItLjA1NS0xLjc2OC0uMDA3bC4zNzEtLjA0N2MtMy40MTcgMC01LjQyMSAyLjA1LTYuNzE4IDMuODE4QzEuOTggNy43MTUgMS4xNDUgOS43LjYwNyAxMS44NzJjLTEuMDc1IDQuMzQzLTEuMDg4IDkuOTY1IDMuMDQgMTQuMTYgMi4xNjQgMi4yMDggNC43MDYgMy4yNDQgNy4wMDUgMy44Ni40NDMuMTE4LjgzNy4xNDggMS4yNjIuMjM2IDEuNDk5IDcuMTEgNS45MzYgMTMuMTIzIDExLjg3IDE2LjQ2N2wuMDAyLjAwMy4wMDQuMDAxYzMuNDkxIDEuOTYyIDYuODA2IDIuODYgOS4yOSAzLjgxIDMuNDc2IDEuMzQgNy4xNCAyLjgyMyAxMS40MTMgMy4xOTdsLjIyNC4wMmguNTY3YzQuOTA1IDAgOC42MjctMS45ODIgMTEuODQ2LTMuMjEyaC4wMDJjMi40Ni0uOTQyIDUuNzg4LTEuODE0IDkuMzA1LTMuNzlhMjMuMTM5IDIzLjEzOSAwIDAgMCA0LjQ5OC0zLjMwOSAyNS40MDMgMjUuNDAzIDAgMCAwIDcuMzkyLTEyLjk2MmMyLjcyNy0uNDY2IDUuNjItMS42NiA4LjIzLTQuMzIzIDQuMTI2LTQuMTk0IDQuMTE0LTkuODE2IDMuMDQtMTQuMTU4LS41MzktMi4xNzItMS4zNzMtNC4xNTctMi42Ny01LjkyNi0xLjI5Ni0xLjc2OS0zLjMtMy44MTgtNi43MTctMy44MThsLjM3OC4wNDhjLS41My0uMDQ4LTEuMi0uMDc2LTEuNzc1LjAwNy0xLjE1Mi4xNjgtMi40NzMuNjI4LTMuOCAxLjQ0OC0xLjg3MyAxLjE1NC0yLjQ3IDIuMzE1LTMuMTA1IDMuMzM2LS4yMDguMzM0LS4zNC42MTMtLjUyMi45MzZDNjUuMzA2IDIuNTQ2IDU2LjA2NSAwIDQ1LjEzIDB6bS4wODcgNS4xNWMxMy4zNjkgMCAyMi42MDIgNC4wMDMgMjYuNTI2IDExLjE2NSAyLjM2NC0uOTE3IDQuMTA3LTcuMTA1IDYuMDU2LTguMzA0IDEuNTc4LS45NzYgMi41MDEtLjczNSAyLjUwMS0uNzM1IDMuNTcxIDAgNy4yNSAxMC41MTMgMi42NzUgMTUuMTU0LTIuNDE4IDIuNDcxLTYuODgxIDMuMTY1LTkuMTA0IDIuOTg4LS4xNjggNy4xNjMtNC4zNDEgMTMuNjMtOS44NjIgMTYuNzI0LTIuODA5IDEuNTc4LTUuODMyIDIuNDA0LTguNjI3IDMuNDc0LTMuNDY0IDEuMzI1LTYuNzE1IDIuODY4LTEwLjAwNiAyLjg2OGgtLjM0N2MtMy4yNzctLjI4Ni02LjU0LTEuNTMtMTAuMDA1LTIuODY4LTIuNzk2LTEuMDctNS44MTgtMS45MTgtOC42MjctMy40OTYtNS40OS0zLjA5NS05LjY2Ni05LjU0Mi05LjgzNC0xNi43MDQtMi4yMDYuMTktNi43MTktLjQ5Ny05LjE1NS0yLjk4Ni00LjU3NC00LjY0LS44OTUtMTUuMTU0IDIuNjc2LTE1LjE1NCAwIDAgLjkyMy0uMjQxIDIuNTAxLjczNSAxLjk2IDEuMjA1IDMuNzEgNy40NTQgNi4wOTQgOC4zMTlDMjIuNTk3IDkuMTUgMzEuODM2IDUuMTUgNDUuMjE3IDUuMTV6Ii8+PHBhdGggZD0iTTQ3LjE0IDQwLjk5Yy45MDIgMCAxLjQyMy0uNTg0IDEuNDIzLTEuMzczIDAtMS4yMzktLjUyMi0xLjcxNC0xLjQxOC0xLjc4Ni0uMzItLjAyNi0uNTg0LjA2NS0uNjc0LjM0Ny0uMDkuMjgyLjA1NC42MzMuMzQ3LjY3NC42ODYuMDk3LjY4NS4yMTYuNjg1LjU2NiAwIC4zNDgtLjQwMi40OTQtLjQ4NS41MTNhLjUzNi41MzYgMCAwIDAgLjEyMSAxLjA1OG0tMy44MzMuMDAxYy0uOTAyIDAtMS40MjMtLjU4NC0xLjQyMy0xLjM3MyAwLTEuMjM5LjUyMS0xLjcxNCAxLjQxNy0xLjc4Ni4zMjEtLjAyNi41ODQuMDY1LjY3NS4zNDcuMDkuMjgyLS4wNTQuNjMzLS4zNDcuNjc0LS42ODYuMDk3LS42ODYuMjE2LS42ODYuNTY2IDAgLjM0OC40MDMuNDk0LjQ4Ni41MTNhLjUzNi41MzYgMCAwIDEtLjEyMiAxLjA1OG0xNi40NzYtMjcuMDgxYy02LjMzNiAwLTExLjQ3MiA1LjEzNy0xMS40NzIgMTEuNDczIDAgNi4zMzYgNS4xMzYgMTEuNDczIDExLjQ3MiAxMS40NzMgNi4zMzYgMCAxMS40NzMtNS4xMzcgMTEuNDczLTExLjQ3MyAwLTYuMzM2LTUuMTM3LTExLjQ3My0xMS40NzMtMTEuNDczem0tMS42MDYgNi40NGE1LjEgNS4xIDAgMCAxIDAgMTAuMTk3IDUuMDk4IDUuMDk4IDAgMCAxLTQuOTM4LTYuMzY3IDIuMTQ0IDIuMTQ0IDAgMSAwIDIuMDc0LTIuOTUgNS4wNzIgNS4wNzIgMCAwIDEgMi44NjQtLjg4em0tMjcuNTI1LTYuNDRjLTYuMzM2IDAtMTEuNDcyIDUuMTM3LTExLjQ3MiAxMS40NzMgMCA2LjMzNiA1LjEzNiAxMS40NzMgMTEuNDcyIDExLjQ3MyA2LjMzNiAwIDExLjQ3My01LjEzNyAxMS40NzMtMTEuNDczIDAtNi4zMzYtNS4xMzctMTEuNDczLTExLjQ3My0xMS40NzN6bTEuNjQgNi40NGE1LjEgNS4xIDAgMCAxIDAgMTAuMTk3IDUuMDk4IDUuMDk4IDAgMCAxLTQuOTM4LTYuMzY3IDIuMTQ0IDIuMTQ0IDAgMCAwIDQuMTI3LS44MSAyLjE0MiAyLjE0MiAwIDAgMC0yLjA1NC0yLjE0IDUuMDc0IDUuMDc0IDAgMCAxIDIuODY0LS44OHoiLz48L2c+PC9zdmc+"/>
+</svg>
+`
+
+exports[`test/badgen.spec.js TAP generate bare badge with { status } > snapshot 1`] = `
+<svg width="47" height="20" viewBox="0 0 470 200" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="v1.0.0">
+  <title>v1.0.0</title>
+  <linearGradient id="aaaaa" x2="0" y2="100%">
+    <stop offset="0" stop-opacity=".1" stop-color="#EEE"/>
+    <stop offset="1" stop-opacity=".1"/>
+  </linearGradient>
+  <mask id="aaaaa"><rect width="470" height="200" rx="30" fill="#FFF"/></mask>
+  <g mask="url(#aaaaa)">
+    <rect width="470" height="200" fill="#08C" x="0"/>
+    <rect width="470" height="200" fill="url(#aaaaa)"/>
+  </g>
+  <g aria-hidden="true" fill="#fff" text-anchor="start" font-family="Verdana,DejaVu Sans,sans-serif" font-size="110">
+    <text x="65" y="148" textLength="355" fill="#000" opacity="0.25">v1.0.0</text>
+    <text x="55" y="138" textLength="355">v1.0.0</text>
+  </g>
+</svg>
+`
+
+exports[`test/badgen.spec.js TAP generate bare badge with { status, color } > snapshot 1`] = `
+<svg width="47" height="20" viewBox="0 0 470 200" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="v1.0.0">
+  <title>v1.0.0</title>
+  <linearGradient id="aaaaa" x2="0" y2="100%">
+    <stop offset="0" stop-opacity=".1" stop-color="#EEE"/>
+    <stop offset="1" stop-opacity=".1"/>
+  </linearGradient>
+  <mask id="aaaaa"><rect width="470" height="200" rx="30" fill="#FFF"/></mask>
+  <g mask="url(#aaaaa)">
+    <rect width="470" height="200" fill="#ADF" x="0"/>
+    <rect width="470" height="200" fill="url(#aaaaa)"/>
+  </g>
+  <g aria-hidden="true" fill="#fff" text-anchor="start" font-family="Verdana,DejaVu Sans,sans-serif" font-size="110">
+    <text x="65" y="148" textLength="355" fill="#000" opacity="0.25">v1.0.0</text>
+    <text x="55" y="138" textLength="355">v1.0.0</text>
+  </g>
+</svg>
+`
+
+exports[`test/badgen.spec.js TAP generate bare badge with { status, style } > snapshot 1`] = `
+<svg width="47" height="20" viewBox="0 0 470 200" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="v1.0.0">
+  <title>v1.0.0</title>
+  <g>
+    <rect fill="#08C" x="0" width="470" height="200"/>
+  </g>
+  <g aria-hidden="true" fill="#fff" text-anchor="start" font-family="Verdana,DejaVu Sans,sans-serif" font-size="110">
+    <text x="65" y="148" textLength="355" fill="#000" opacity="0.1">v1.0.0</text>
+    <text x="55" y="138" textLength="355">v1.0.0</text>
+  </g>
+</svg>
+`

tap-snapshots/test/calc-width.spec.js.test.cjs

@@ -5,18 +5,18 @@
  * Make sure to inspect the output below.  Do not ignore changes!
  */
 'use strict'
-exports[`test/calc-width.spec.ts TAP calc width for "npm" > result is correct 1`] = `
+exports[`test/calc-width.spec.js TAP calc width for "npm" > result is correct 1`] = `
 249
 `
 
-exports[`test/calc-width.spec.ts TAP calc width for emojis > result is correct 1`] = `
+exports[`test/calc-width.spec.js TAP calc width for emojis > result is correct 1`] = `
 330
 `
 
-exports[`test/calc-width.spec.ts TAP calc width for special chars > result is correct 1`] = `
+exports[`test/calc-width.spec.js TAP calc width for special chars > result is correct 1`] = `
 600
 `
 
-exports[`test/calc-width.spec.ts TAP calc width for unicode > result is correct 1`] = `
+exports[`test/calc-width.spec.js TAP calc width for unicode > result is correct 1`] = `
 550
 `

test/badgen.spec.js

@@ -1,6 +1,13 @@
-import tap from 'tap'
+const tap = require('tap')
-import { badgen } from '../dist'
+const { badgen } = require('../dist')
-import * as icons from './assets/icon-data-uri.js'
+const icons = require('./assets/icon-data-uri.js')
+
+const originalMath = global.Math
+const mockMath = Object.create(global.Math)
+mockMath.random = () => 0.5
+
+tap.beforeEach(async t => { global.Math = mockMath })
+tap.afterEach(async t => { global.Math = originalMath })
 
 tap.test('generate badge with { label, status }', t => {
   const svg = badgen({ label: 'npm', status: 'v1.0.0' })
@@ -54,6 +61,18 @@ tap.test('generate badge with { label, status, icon, style }', t => {
   t.end()
 })
 
+tap.test('ensure badgen() correctly escapes string inputs', t => {
+  const svg = badgen({
+    label: '<escape me>',
+    status: '<escape me>',
+    color: '<escape me>',
+    icon: '<escape me>',
+    labelColor: '<escape me>',
+  })
+  t.matchSnapshot(svg, 'snapshot')
+  t.end()
+})
+
 tap.test('generate bare badge with { status }', t => {
   const svg = badgen({ status: 'v1.0.0' })
   t.ok(typeof svg === 'string', 'successfully generated')
@@ -75,6 +94,15 @@ tap.test('generate bare badge with { status, style }', t => {
   t.end()
 })
 
+tap.test('ensure bare() correctly escapes string inputs', t => {
+  const svg = badgen({
+    status: '<escape me>',
+    color: '<escape me>',
+  })
+  t.matchSnapshot(svg, 'snapshot')
+  t.end()
+})
+
 tap.test('type checking', t => {
   // @ts-ignore
   t.throws(() => badgen({}), TypeError, 'throw if status is non-string')

test/calc-width.spec.js

@@ -1,5 +1,5 @@
-import tap from 'tap'
+const tap = require('tap')
-import { calcWidth } from '../dist'
+const { calcWidth } = require('../dist')
 
 tap.test('basic functions', t => {
   t.ok(typeof calcWidth === 'function', 'export calcWidth function')

tsconfig.json

@@ -1,5 +1,7 @@
 {
   "compilerOptions": {
+    "strict": true,
+
     "target": "es2017",
     "module": "commonjs",
     "lib": ["esnext", "dom"],
@@ -12,7 +14,8 @@
 
     "resolveJsonModule": true,
     "experimentalDecorators": true,
-    "allowSyntheticDefaultImports": true
+    "allowSyntheticDefaultImports": true,
+    "forceConsistentCasingInFileNames": true,
   },
   "include": ["src"]
 }