QRCode

qrcode

二维码 · 编码内核 qrcode-generator + 瑚琏自渲 SVG(暗块合 path/crispEdges) + currentColor 吃主题 + UTF-8 中文 + 纠错级别 + 中心 logo(可 RSC)

用法

基础用法

传入 value 即可，暗块默认继承 currentColor 吃主题。

tsx

<QRCode value="https://hulian.dev" size={160} />

纠错级别

level L/M/Q/H 逐级提高冗余（带 logo 建议 H）。

tsx

<>
  <QRCode value="https://hulian.dev" size={120} level="L" />
  <QRCode value="https://hulian.dev" size={120} level="H" />
</>

中文内容

内核已覆写为 UTF-8 编码，可直接编码中文。

tsx

<QRCode value="瑚琏组件库 · 移动端二维码" size={140} level="H" />

自定义配色

color/background 显式指定，或用 text-* 工具类换暗块色。

tsx

<QRCode
  value="https://hulian.dev"
  size={140}
  color="#0f172a"
  background="#f1f5f9"
/>

中心 Logo

传 logo 在二维码中心嵌图，务必配 level="H" 留足冗余。

tsx

<QRCode
  value="https://hulian.dev"
  size={160}
  level="H"
  logo={{ src: "/logo.png", size: 36 }}
/>

何时用

把 URL/文本编码为可扫二维码（自渲 SVG，吃主题色，支持中文与中心 logo）。展示静态信息码用本组件；本批其余组件不涉及编码生成。

导入

import { QRCode } from "@hulianui/ui"

Props

名称	类型	默认	说明
value*	`string`	—	编码内容（URL/文本，UTF-8）。
size	`number`	`160`	边长 px。
level	`"L" \| "M" \| "Q" \| "H"`	`"M"`	纠错级别（带 logo 建议 H）。
margin	`number`	`2`	静默区模块数。
color	`string`	`currentColor`	暗块颜色（默认继承 text-foreground）。
background	`string`	透明	背景色。
logo	`QRCodeLogo`	—	中心 logo，`{ src: string; size?: number }`；务必配 `level="H"` 留足纠错冗余。
aria-label	`string`	取 value	无障碍标签。
className	`string`	—	—

禁忌 / 坑

暗块默认 currentColor，靠外层文字色控制；要染色用 className="text-primary" 或显式 color，背景默认透明需自备底色保证扫码对比度。
加 logo 必须同时 level="H"，否则 logo 遮挡导致纠错冗余不足、扫不出。
中文/长文本会抬高二维码版本（更密），扫描距离与 size 要相应放大。

用法

基础用法

传入 value 即可，暗块默认继承 currentColor 吃主题。

tsx

<QRCode value="https://hulian.dev" size={160} />

纠错级别

level L/M/Q/H 逐级提高冗余（带 logo 建议 H）。

tsx

<>
  <QRCode value="https://hulian.dev" size={120} level="L" />
  <QRCode value="https://hulian.dev" size={120} level="H" />
</>

中文内容

内核已覆写为 UTF-8 编码，可直接编码中文。

tsx

<QRCode value="瑚琏组件库 · 移动端二维码" size={140} level="H" />

自定义配色

color/background 显式指定，或用 text-* 工具类换暗块色。

tsx

<QRCode
  value="https://hulian.dev"
  size={140}
  color="#0f172a"
  background="#f1f5f9"
/>

中心 Logo

传 logo 在二维码中心嵌图，务必配 level="H" 留足冗余。

tsx

<QRCode
  value="https://hulian.dev"
  size={160}
  level="H"
  logo={{ src: "/logo.png", size: 36 }}
/>

Props

名称	类型	默认	说明
value*	`string`	—	编码内容（URL/文本，UTF-8）。
size	`number`	`160`	边长 px。
level	`"L" \| "M" \| "Q" \| "H"`	`"M"`	纠错级别（带 logo 建议 H）。
margin	`number`	`2`	静默区模块数。
color	`string`	`currentColor`	暗块颜色（默认继承 text-foreground）。
background	`string`	透明	背景色。
logo	`QRCodeLogo`	—	中心 logo，`{ src: string; size?: number }`；务必配 `level="H"` 留足纠错冗余。
aria-label	`string`	取 value	无障碍标签。
className	`string`	—	—

禁忌 / 坑

暗块默认 currentColor，靠外层文字色控制；要染色用 className="text-primary" 或显式 color，背景默认透明需自备底色保证扫码对比度。

加 logo 必须同时 level="H"，否则 logo 遮挡导致纠错冗余不足、扫不出。

中文/长文本会抬高二维码版本（更密），扫描距离与 size 要相应放大。

QRCode

用法

基础用法

纠错级别

中文内容

自定义配色

中心 Logo

何时用

导入

Props

禁忌 / 坑

相关

QRCode

用法

基础用法

纠错级别

中文内容

自定义配色

中心 Logo

何时用

导入

Props

禁忌 / 坑

相关