@qr-x/svelte v1.1.1

Installation

npm install @qr-x/svelte

Usage

You can also try QR-X in action here or follow the examples below.

Solid

<script>
  import QRX from '@qr-x/svelte'
</script>

<QRX data="https://qr-x.devtrice.dev" color="#0ea5e9" />

Gradient

Linear Gradient

<script>
  import QRX from '@qr-x/svelte'
</script>

<QRX
  data="https://qr-x.devtrice.dev"
  gradient={{
    type: 'linear',
    colors: ['#f97316', '#f59e0b', '#facc15'],
  }}
/>

Radial Gradient

<script>
  import QRX from '@qr-x/svelte'
</script>

<QRX
  data="https://qr-x.devtrice.dev"
  gradient={{
    type: 'radial',
    colors: ['#f97316', '#f59e0b', '#facc15'],
  }}
/>

Fill Image

<script>
  import QRX from '@qr-x/svelte'
</script>

<QRX data="https://qr-x.devtrice.dev" fillImage="https://images.unsplash.com/photo-1682687218608-5e2522b04673" />

Brand

Brand Image

<script>
  import QRX from '@qr-x/svelte'
</script>

<QRX
  data="https://qr-x.devtrice.dev"
  brand={{ src: 'https://images.unsplash.com/photo-1682687218608-5e2522b04673', style: 'width: 4rem; height: 4rem' }}
/>

Brand Component

<script>
  import QRX from '@qr-x/svelte'
</script>

<QRX data="https://qr-x.devtrice.dev">
  <video
    slot="brand"
    src="https://videos.pexels.com/video-files/8333185/8333185-hd_1080_1080_30fps.mp4"
    style="width: 2.5rem; height: 2.5rem; border: 2px solid white; border-radius: 50%;"
    muted
    autoplay
  ></video>
</QRX>

Props