@diteme/emojis

Production-ready React and React Native compatible emoji and mascot components for Diteme, TlolegoAI, and future products.

The package ships the original PNG assets as-is. It does not redesign or mutate artwork.

Installation

npm install @diteme/emojis

pnpm add @diteme/emojis

Usage

import { Avatar, Emoji, Fire, Trophy } from "@diteme/emojis";

export function Example() {
  return (
    <>
      <Emoji name="trophy" size={64} />
      <Avatar character="zebra" mood="happy" size={220} />
      <Fire size={64} />
      <Trophy size={64} loading="eager" />
    </>
  );
}

Fire is exported for API stability, but fire.png is not present in the current asset set. Until that asset is added, it renders the same graceful fallback as <Emoji name="fire" />.

React Native and Expo

Use the same public API:

import { Avatar, Emoji, Trophy } from "@diteme/emojis";

export function NativeExample() {
  return (
    <>
      <Emoji name="translate" size={64} />
      <Avatar character="zebra" mood="reading" size={220} />
      <Trophy size={64} />
    </>
  );
}

The package exposes a react-native condition so Metro and Expo can use the native implementation.

API

Emoji

<Emoji name="translate" size={64} />

interface EmojiProps {
  name: string;
  size?: number;
  className?: string;
  style?: React.CSSProperties;
  alt?: string;
  loading?: "lazy" | "eager";
  borderRadius?: number | string;
  objectFit?: "contain" | "cover" | "fill" | "none" | "scale-down";
  animated?: boolean;
}

Avatar

<Avatar character="zebra" mood="reading" size={220} />

interface AvatarProps {
  character: string;
  mood: string;
  size?: number;
  className?: string;
  style?: React.CSSProperties;
  alt?: string;
  loading?: "lazy" | "eager";
  borderRadius?: number | string;
  objectFit?: "contain" | "cover" | "fill" | "none" | "scale-down";
  animated?: boolean;
}

Direct Components

Direct components are memoized and import only their asset:

import { Trophy, Translate } from "@diteme/emojis";

<Trophy size={64} />;
<Translate size={64} />;

Available direct exports include AiTutor, Coins, Conversation, DailyChallenge, Downloads, Experience, Favorites, FillInTheBlanks, Flashcards, HighFive, Leaderboard, Lessons, LevelUp, Listening, Matching, Master, OfflineMode, Pronounciation, Proverbs, Quiz, Reading, Reward, Rewards, Speaking, Streak, TeamVictory, Translate, Trophy, Waving, Winner, XpEarned, and Writing.

Registries

import { avatarRegistry, emojiRegistry, getAvatarAsset, getEmojiAsset } from "@diteme/emojis";

The registry shape is intentionally asset-type aware:

{
  source: unknown;
  type: "png" | "svg" | "lottie" | "rive" | "glb";
  animated?: boolean;
}

This keeps the public API stable for future Lottie, Rive, SVG, GLB, themes, and animated reactions.

Build

pnpm install
pnpm --filter @diteme/emojis build

The build emits ESM, CommonJS, type declarations, source maps, and copied assets in dist/.

Test

pnpm --filter @diteme/emojis test