41 lines
883 B
Svelte
41 lines
883 B
Svelte
<script lang="ts">
|
|
import { encode } from "uqr";
|
|
|
|
const QUIET_ZONE = 2;
|
|
|
|
let { value, label }: { value: string; label: string } = $props();
|
|
|
|
const code = $derived.by(() => {
|
|
const qr = encode(value, { ecc: "M", border: 0 });
|
|
const path = qr.data
|
|
.flatMap((row, y) =>
|
|
row.flatMap((filled, x) => (filled ? [`M${x} ${y}h1v1h-1z`] : []))
|
|
)
|
|
.join("");
|
|
return { extent: qr.size + QUIET_ZONE * 2, path };
|
|
});
|
|
</script>
|
|
|
|
<svg
|
|
class="qr"
|
|
viewBox="0 0 {code.extent} {code.extent}"
|
|
role="img"
|
|
aria-label={label}
|
|
>
|
|
<rect width={code.extent} height={code.extent} fill="var(--qr-bg, #fff)" />
|
|
<path
|
|
d={code.path}
|
|
fill="var(--qr-fg, #000)"
|
|
transform="translate({QUIET_ZONE} {QUIET_ZONE})"
|
|
/>
|
|
</svg>
|
|
|
|
<style lang="scss">
|
|
.qr {
|
|
display: block;
|
|
width: 100%;
|
|
height: auto;
|
|
border-radius: 0.75rem;
|
|
}
|
|
</style>
|