Sexy-QR

Sexy SVG QR-code generator

[ >> Online demo << ]

Install

npm install sexy-qr

API

QRCode

Options

Field	Type	Description
content	string	QR encoded value
ecl	'L' / 'M' / 'Q' / 'H'	Error correction

Properties:

Property	Description
matrix	Matrix array
size	Side size of matrix

Methods:

Method	Values	Description
emptyCenter	(emptySize: number)	Remove points in center

QRSvg

Options

Field	Type	Description
fill	string	SVG fill color
size	number	Size of SVG in px
radiusFactor	number	Factor of points corner radius (0-1)
cornerBlockRadiusFactor	number	Factor of big squares corner radius (0-3)
cornerBlocksAsCircles	boolean	Draw big corner squares as circles
roundOuterCorners	boolean	Round outer corners
roundInnerCorners	boolean	Round inner corners
preContent	string / func	Pre content of SVG code
postContent	string / func	Post content of SVG code

Properties

Property	Description
svg	Result SVG code
paths	Array of path-strings
pointSize	Side size of one qr point

Usage

import { QRCode, QRSvg } from 'sexy-qr';

const svgCode = (() => {
  const qrCode = new QRCode({
    content: 'https://avin.github.io/sexy-qr',
    ecl: 'M', // 'L' | 'M' | 'Q' | 'H'
  });

  const qrSvg = new QRSvg(qrCode, {
    fill: '#182026',
    cornerBlocksAsCircles: true,
    size: 380, // px
    radiusFactor: 0.75, // 0-1
    cornerBlockRadiusFactor: 2, // 0-3
    roundOuterCorners: true,
    roundInnerCorners: true,
    preContent: '<!-- QR Code -->',
  });

  return qrSvg.svg;
})();

Demo

Example 1	Example 2	Example 3	Example 4

License

MIT © avin