Generates a QR code based on the provided value and options. The component renders an SVG representation of the QR code, which can be customized using various properties.

Element
igc-qr-code
CSS Parts
background — The background rect of the QR code.
dots — The data modules (dots) of the QR code.
corner-square — The outer corner (finder-pattern) squares of the QR code.
corner-dot — The inner corner (finder-pattern) dots of the QR code.

The style of the data modules (dots) in the QR code, and of the inner dot of each finder-pattern corner. This can be 'square', 'circle', or 'rounded'.

dotStyle: QrDotStyle = 'square'

Defined in src/components/qr-code/qr-code.ts:170

Optional errorLevel

Section titled "errorLevel"

The error correction level for the QR code, which determines the QR code's ability to be read if it is partially obscured or damaged. Valid values are 'L', 'M', 'Q', and 'H', where 'L' provides the lowest level of error correction and 'H' provides the highest level.

errorLevel: QrErrorCorrectionLevel = 'M'

Defined in src/components/qr-code/qr-code.ts:106

Optional logoMargin

Section titled "logoMargin"

The margin around the logo in pixels. This is the whitespace area surrounding the logo within the QR code, which helps ensure that the logo does not interfere with the QR code's scannability.

logoMargin: number

Defined in src/components/qr-code/qr-code.ts:160

The size of the logo, as a ratio of the maximum area that can safely be obscured by a logo while the QR code remains scannable (up to 9% of the code's area, at the highest error correction level). The value should be a number between 0 and 1, where 0 means no logo and 1 means the logo will cover the full safe area (not the entire QR code). The default value is 0.4, meaning the logo covers 40% of that safe area (~3.6% of the QR code).

When error-level is not explicitly set, the smallest error correction level that can accommodate the requested logo size is chosen automatically.

logoSize: number = 0.4

Defined in src/components/qr-code/qr-code.ts:151

The source URL of an optional logo image to be displayed at the center of the QR code. The logo can help with branding and recognition. If provided, the component will attempt to render the logo within the QR code while maintaining scannability.

logoSrc: string

Defined in src/components/qr-code/qr-code.ts:135

The margin (quiet zone) around the QR code, expressed as a number of QR code modules rather than pixels. This is the blank border area surrounding the code, which helps ensure that it can be properly scanned.

margin: number = 4

Defined in src/components/qr-code/qr-code.ts:126

The size of the QR code in pixels. This determines the width and height of the generated QR code. The default value is 128 pixels.

size: number = 128

Defined in src/components/qr-code/qr-code.ts:115

The style of the corner squares in the QR code. This can be 'square', 'circle', or 'rounded'.

squareStyle: QrCornerSquareStyle = 'square'

Defined in src/components/qr-code/qr-code.ts:179

The value to be encoded in the QR code. This can be any string, such as a URL, text, or other data. When this property is set, the component will generate a QR code representing the provided value.

value: string

Defined in src/components/qr-code/qr-code.ts:85

The version of the QR code to generate, which determines the size and data capacity of the QR code. Valid values are integers from 1 to 40, where each version corresponds to a specific module size and data capacity.

If not specified, the component will automatically select the smallest version that can accommodate the provided value.

version: number

Defined in src/components/qr-code/qr-code.ts:96

Array of styles to apply to the element. The styles should be defined using the css tag function, via constructible stylesheets, or imported from native CSS module scripts.

Note on Content Security Policy:

Element styles are implemented with <style> tags when the browser doesn't support adopted StyleSheets. To use such <style> tags with the style-src CSP directive, the style-src value must either include 'unsafe-inline' or nonce-<base64-value> with <base64-value> replaced be a server-generated nonce.

To provide a nonce to use on generated <style> elements, set window.litNonce to a server-generated nonce in your page's HTML, before loading application code:

``

styles: CSSResult[]

Defined in src/components/qr-code/qr-code.ts:50