https://github.com/larscom/ng-qrcode-svg

Simple QR code generator (SVG only) for Angular
https://github.com/larscom/ng-qrcode-svg

angular easy image img print qr qr-code qrcode reactive render simple svg

Last synced: 17 days ago
JSON representation

Simple QR code generator (SVG only) for Angular

• Host: GitHub
• URL: https://github.com/larscom/ng-qrcode-svg
• Owner: larscom
• License: mit
• Created: 2022-11-01T20:40:35.000Z (over 2 years ago)
• Default Branch: main
• Last Pushed: 2025-04-05T02:54:34.000Z (24 days ago)
• Last Synced: 2025-04-05T03:25:23.239Z (24 days ago)
• Topics: angular, easy, image, img, print, qr, qr-code, qrcode, reactive, render, simple, svg
• Language: TypeScript
• Homepage:
• Size: 2.22 MB
• Stars: 4
• Watchers: 1
• Forks: 0
• Open Issues: 1
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

• awesome-angular - ng-qrcode-svg - Simple QR code generator (SVG only) for Angular. (Table of contents / Third Party Components)
• fucking-awesome-angular - ng-qrcode-svg - Simple QR code generator (SVG only) for Angular. (Table of contents / Third Party Components)
• fucking-awesome-angular - ng-qrcode-svg - Simple QR code generator (SVG only) for Angular. (Table of contents / Third Party Components)
• fucking-awesome-angular - ng-qrcode-svg - Simple QR code generator (SVG only) for Angular. (Table of contents / Third Party Components)

README

        
# @larscom/ng-qrcode-svg

[![npm-version](https://img.shields.io/npm/v/@larscom/ng-qrcode-svg.svg?label=npm)](https://www.npmjs.com/package/@larscom/ng-qrcode-svg)

![npm](https://img.shields.io/npm/dw/@larscom/ng-qrcode-svg)

[![license](https://img.shields.io/npm/l/@larscom/ng-qrcode-svg.svg)](https://github.com/larscom/ng-qrcode-svg/blob/main/LICENSE)

> Simple QR code generator (SVG only) for Angular

![Demo GIF](https://github.com/larscom/ng-qrcode-svg/blob/main/.github/img/demo.gif)

## Installation

```bash

npm install @larscom/ng-qrcode-svg

```

## Usage

1. Import component `QrcodeSvgComponent`

```ts

import { NgModule } from '@angular/core'

import { QrcodeSvgComponent } from '@larscom/ng-qrcode-svg'

@NgModule({

  imports: [QrcodeSvgComponent]

})

export class MyModule {}

```

2. Use the `qrcode-svg` component which will render a QR code in SVG format

```html

```

## Component Properties

| Name                                                    | Description                                               | Default   |

| ------------------------------------------------------- | --------------------------------------------------------- | --------- |

| @Input() value: string                                  | The value which need to be encoded                        | undefined |

| @Input() ecl: 'low' \| 'medium' \| 'quartile' \| 'high' | Error correction level                                    | medium    |

| @Input() borderSize: number                             | The padding between the edge and the QR code (quiet zone) | 2         |

| @Input() size: string \| number                         | The size of the QR code SVG (css format)                  | 250px     |

| @Input() backgroundColor: string                        | The 'path' color (background)                             | #FFFFFF   |

| @Input() foregroundColor: string                        | The 'rect' color (foreground)                             | #000000   |

| @Input() alt: string \| undefined                       | HTML alt attribute                                        | undefined |

| @Input() ariaLabel: string \| undefined                 | HTML aria-label attribute                                 | undefined |