QR Code
QR Code — квадрат фиксированного размера на белой подложке, куда продукт кладёт картинку кода: ссылку на приложение, платёжные реквизиты, код подключения двухфакторной защиты. Генерация кода не входит в канон — компонент задаёт размер, подложку и доступное имя.
Статус: experimental · в системе с 2026-09 · интерактивность: none (нет)
Когда использовать
- Ссылка или секрет, которые сканируют телефоном: подключение 2FA, реквизиты, приложение.
Не использовать:
- Картинка не код — это Thumbnail.
- Код нужно скопировать текстом — рядом ставится Copy Field.
Альтернативы:
thumbnail— обычная картинка-превьюcopy-field— тот же секрет текстом с кнопкой копирования
Код и пустой квадрат
Квадрат с картинкой кода и пустое место под код рядом.
<!--
🟢
Квадрат с картинкой кода (условный узор) и пустой квадрат — место под код.
-->
<script>
import { t } from "$lib/spec/demo-lang.svelte.js";
import QrCode from "$lib/ui/QrCode.svelte";
const cells = [
"1111111010111111",
"1000001001100001",
"1011101110101110",
"1011101010101110",
"1011101100101110",
"1000001011100001",
"1111111010111111",
"0000000110000000",
"1101011011011010",
"0010100101100101",
"1111111001011011",
"1000001110100100",
"1011101011011101",
"1011101100110011",
"1011101010101010",
"1000001101011101",
];
const size = cells.length;
let rects = "";
cells.forEach((row, y) => {
[...row].forEach((cell, x) => {
if (cell === "1") rects += `<rect x="${x}" y="${y}" width="1" height="1"/>`;
});
});
const src = `data:image/svg+xml;utf8,${encodeURIComponent(`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 ${size} ${size}" fill="%23222222">${rects}</svg>`)}`;
</script>
<div style="display: flex; gap: var(--sp-2);">
<QrCode {src} label={t("Код подключения")} />
<QrCode label={t("Место под код")} />
</div>