@svelte-put/qr GitHub

render QR as img or svg, optionally with logo

@svelte-put/qr @svelte-put/qr @svelte-put/qr @svelte-put/qr changelog

Installation

terminal

npm install --save-dev @svelte-put/qr

SVG

@svelte-put/qr allows rendering QR as svg. Depending on the scenario, you may find certain strategy more convenient than others.

  • : quick and minimal, enough if you do not care about server side rendering (SSR) / prerendering, and especially helpful if you need access to the SVGElement (for styling or custom event handling).
  • : good if you prefer having component abstraction, also applicable to SSR / prerendering. However, you lose direct access to the SVGElement.
  • : good if you want a component and also be able to customize the SVGElement.

Note the imports from subpackage @svelte-put/qr/svg in the examples of this section.

SVG rendering strategies

<script>
  import { qr } from '@svelte-put/qr/svg';
</script>

<svg
  use:qr={{
    data: 'https://svelte-put.vnphanquang.com/docs/qr',
    logo: 'https://svelte-put.vnphanquang.com/images/svelte-put-logo.svg',
    shape: 'circle',
  }}
/>

Image

@svelte-put/qr also allows rendering QR as img. The strategies are similar to those found in the previous section.

  • : quick and minimal, but only rendered at runtime in browser.
  • : useful for SSR and prerendering.
  • : useful if you need to custom the HTMLImageElement.

Underneath, the image is just an inline base64 encoding of the rendered svg.

qr

Note the imports from subpackage @svelte-put/qr/img in the examples of this section.

Image rendering strategies

<script>
  import { qr } from '@svelte-put/qr/img';
</script>

<img
  use:qr={{
    data: 'https://svelte-put.vnphanquang.com/docs/qr',
    logo: 'https://svelte-put.vnphanquang.com/images/svelte-put-logo.svg',
    shape: 'circle',
    anchorInnerFill: 'gray',
    anchorOuterFill: 'gray',
    moduleFill: 'gray',
  }}
  alt="qr"
/>

Configuration

Rendering strategies exported by @svelte-put/qr (img or svg, component or action) all share the following configuration interface.

configuration interface

/**
 * instructions to render a QR
 * @public
 */
export type QRConfig = {
  /** the data to encode in QR, typically an URL */
  data: string;
  /**
   * the quite zone along the edges of QR
   */
  margin?: number;
  /**
   * determine what shape to render the elements
   *
   * - `rect` (default): each module or anchor is a sharp-edged square
   * - `circle`: each module is a circle, each anchor is a round-edged square
   */
  shape?: 'square' | 'circle';
  /**
   * logo to render in the middle of QR
   */
  logo?: string;
  /** width : height */
  logoRatio?: number;

  /* styling */
  /** fill for each module */
  moduleFill?: string;
  /** fill for the outer ring of each anchor (big positioning square at the corner) */
  anchorOuterFill?: string;
  /** fill for the inner square of each anchor */
  anchorInnerFill?: string;
};

Events

All rendering strategies share a qr:init CustomEvent that fires when the rendering is completed. The event.detail is the element (either SVGElement or HTMLImageElement).

@svelte-put/qr/img/QR.svelte might also fire another CustomEvent named logofetch, the detail of which is the base64 encoded logo. This only happens if you specify the logo prop as /http*./, which has to be fetched manually to be compatible for conversion to static base64 svg.

event handling examples

Kudos

This package is made possible by qrcode-generator and heavily inspired by bitjson/qr-code . Please go check their work for more information.

Edit this page on GitHub