QRCode

Props

icon accepts either an image URL/data URI, or raw inline SVG content authored against a 24×24 viewBox — no data-URI encoding needed for a plain vector logo. Default size is 20% of the code's width, via iconSizeRatio — pair it with errorCorrectionLevel="H" so enough of the code survives being partly covered to still scan reliably.

pictogram is a grid of per-module overrides, indexed [row][col]: true/a color string forces that module dark (with that color); false forces it light even where the real data is dark; undefined leaves the real encoded value alone. Recoloring an already-dark module is always safe — it never changes what the code decodes to. Forcing a module light or dark that disagrees with the real data spends into the same error-correction budget icon does, so heavier use pairs with errorCorrectionLevel="H", and it's worth actually testing that the result still scans, the same way this project verified QRCode itself with a real decoder before shipping it.

data-rebar-component="qrcode" on the root <svg>, which also carries data-rebar-module-count (the real module grid size — useful for sizing a pictogram grid to the actual code, as the demo above does). Each rendered module carries data-rebar-part="module"; the overlay carries data-rebar-part="icon".

AntD's own QRCode component is a close structural match (value/size/color/bgColor/icon/errorCorrectionLevel) for the core props — pictogram has no AntD equivalent, since it's not a shape AntD's own component supports; a migration keeping that effect needs to reimplement it or drop it.