Emoji@knitui/emoji
Emoji
Full-color Google Noto Emoji wrapped with lazy-loaded web and native entry points. Use Emoji with a registry name, or import a generated Emoji* component directly. Emoji are rendered as-is — there is no color/stroke prop, only size.
WebiOSAndroid9 own props4 examples
import { Emoji } from "@knitui/emoji";Playground
Loading playground…
<Emoji
name="grinning-face"
size={64}
title="Grinning face"
fallback={<div style={{ width: 64, height: 64 }} />}
/>Examples
Sizes
Loading example…
Sampler
Loading example…
Registry Gallery
Loading example…
Props
| Prop | Type | Default | Description |
|---|---|---|---|
name required | "0" | "1" | "1st-place-medal" | "2" | "2nd-place-medal" | "3" | "3rd-place-medal" | "4" | "5" | "6" | "7" | "8" | "9" | "a-button-blood-type" | "ab-button-blood-type" | "abacus" | "accordion" | "adhesive-bandage" | "admission-tickets" | "ae…grinning-face · smiling-face-with-heart-eyes · face-with-tears-of-joy · winking-face · thinking-face · smiling-face-with-sunglasses · red-heart · fire · sparkles · party-popper · rocket · thumbs-up · clapping-hands · folded-hands · rainbow · sun · star · hundred-points · pizza · birthday-cake | grinning-face | Registry name for the emoji to render. |
accessibilityLabel | string | undefined | — | |
aria-hidden | boolean | "true" | "false" | undefined | — | |
aria-label | string | undefined | — | |
className | string | undefined | — | |
fallback | ReactNode | — | Suspense fallback used by the dynamic `Emoji` component while a lazy emoji loads. |
size system | string | number | undefined | 64 | Width and height of the rendered emoji. Defaults to `24`. |
style | unknown | — | |
testID | string | undefined | — | |
title | string | undefined | Grinning face | Accessible label. Maps to `aria-label` (web) / `accessibilityLabel` (native). |