qr Svelte Themes

Qr

Svelte components for VK-style QR codes.

Svelte VK-QR

Svelte components for VK-style QR codes.

Setup

npm i @sveltevk/qr

Usage

Base QR Code

<script>
    import { Qr } from '@sveltevk/qr';
</script>

<Qr text="Text to encode" qrSize={256} isShowLogo />
  • text required String to generate a QR code

Wi-Fi Network config

<script>
    import { QrWiFi } from '@sveltevk/qr';
</script>

<QrWiFi ssid="SSID" password="password" authType="WPA" />
  • ssid: Network SSID. Required. Enclose in double quotes if it is an ASCII name, but could be interpreted as hex (i.e. "ABCD")

  • authType: Authentication type. Can be WEP or WPA or WPA2-EAP, or nopass for no password. Or, omit for no password

  • password: Password, ignored if authType="nopass" (in which case it may be omitted). Enclose in double quotes if it is an ASCII name, but could be interpreted as hex (i.e. "ABCD")

  • hide: Optional. True if the network SSID is hidden. Note this was mistakenly also used to specify phase 2 method in releases up to 4.7.8 / Barcode Scanner 3.4.0. If not a boolean, it will be interpreted as phase 2 method (see below) for backwards-compatibility

  • eap: (WPA2-EAP only) EAP method, like TTLS or PWD

  • anonIdentity: (WPA2-EAP only) Anonymous identity

  • identity: (WPA2-EAP only) Identity

  • phase2: (WPA2-EAP only) Phase 2 method, like MSCHAPV2

Options

An options object containing any custom settings that you want to apply to the generated QR code. The possible options are:

  • qrSize: Size of QR code. Default is 128

  • className or class: Class name of root SVG element

  • isShowLogo: Show VK logo in center of QR code Default is false

  • isShowBackground: Show QR background. Default is false

  • backgroundColor: QR code background HEX color. Works if isShowBackground is enabled. Default is "#ffffff"

  • foregroundColor: QR code HEX color

  • logoColor: Color of logo. Default is "#4680c2"

  • logoData: Reference to logo as a reference IRI

  • suffix: SVG elements id postfix

  • ecc: ECC level in range [0-3] (0 - low, 3 - high)

License

MIT

Top categories

Loading Svelte Themes