JSPM

  • ESM via JSPM
  • ES Module Entrypoint
  • Export Map
  • Keywords
  • License
  • Repository URL
  • TypeScript Types
  • README
  • Created
  • Published
  • Downloads 6476
  • Score
    100M100P100Q131978F
  • License MIT

render QR as svg or img

Package Exports

  • @svelte-put/qr
  • @svelte-put/qr/img
  • @svelte-put/qr/img/QR.svelte
  • @svelte-put/qr/svg
  • @svelte-put/qr/svg/QR.svelte

Readme

@svelte-put/qr

npm.badge bundlephobia.badge docs.badge repl.badge

Render QR as img or svg, optionally with logo

svelte-put

This package is part of the @svelte-put family. For contributing guideline and more, refer to its readme.

Usage & Documentation

See the dedicated documentation page here.

Quick Start

Given one of the following usage

<script>
    // as img
    import { qr as imgQR } from '@svelte-put/qr/img';
    import ImgQR from '@svelte-put/qr/img/QR.svelte';

    // as svg
    import { qr as svgQR } from '@svelte-put/qr/svg';
    import SvgQR from '@svelte-put/qr/svg/QR.svelte';

    const data = 'https://svelte-put.vnphanquang.com/docs/qr';
    const logo = 'https://svelte-put.vnphanquang.com/images/svelte-put-logo.svg';
</script>

<!-- svg using component -->
<SvgQR {data} {logo} />

<!-- svg using action -->
<svg use:svgQR="{{" data, logo }} />

<!-- img using component -->
<ImgQR {data} {logo} />

<!-- img using action -->
<img use:imgQR="{{" data, logo }} />

The rendered QR will be similar to this:

qr

Changelog