src/qr.js


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

// QR rendering via the zero-dependency `qrcode-generator` library, output as a
// crisp SVG path (scales perfectly, no canvas, prints well on a paper wallet).

import qrcode from 'qrcode-generator';

export function qrSvg(text, { margin = 2 } = {}) {
  const qr = qrcode(0, 'M'); // type 0 = auto-size, error correction M
  qr.addData(text);
  qr.make();

  const count = qr.getModuleCount();
  const size = count + margin * 2;

  let path = '';
  for (let r = 0; r < count; r++) {
    for (let c = 0; c < count; c++) {
      if (qr.isDark(r, c)) {
        path += `M${c + margin},${r + margin}h1v1h-1z`;
      }
    }
  }

  return `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 ${size} ${size}" shape-rendering="crispEdges" class="qr">
    <rect width="${size}" height="${size}" fill="#fff"/>
    <path d="${path}" fill="#111"/>
  </svg>`;
}