svelte-qrcode-image

Svelte-QRCode-Image

Under development, breaking change could occur before 1.0.0

QR-Code generated using qrcode (node-qrcode) and display via <img> element, with TypeScript support, works on SvelteKit.

TODO

• Documentation
• Expose more options
• Expose options to control the <img> tag
• Reactivity on text change
• Display the QR-Code as background image or canvas
• Website for demo

Developing

Once you've created a project and installed dependencies with npm install (or pnpm install or yarn), start a development server:

npm run dev

Since this being setup as SvelteKit project, so you should create your component in src/lib directory. And re-export it in src/lib/index.js file.

export { default as MyComponent } from './MyComponent.svelte';

Publish Package

Simply run this

svelte-package

will create a new directory called package with the TypeScript definition

Then you can publish it to npm (remember to login first)

cd package
npm publish

or

npm publish ./package

Publish Website

Due to recent change in SvelteKit, you need to run this command to build the website

vite build

Instead of

npm run build

Since it's calling in the background

svelte-kit sync && svelte-package

Which will npt create the public directory, which is needed for the website to work.