Use Icons

Use Icons

Leader equipment icons

Goal

• Render item/skill/status icons using the built‑in <Icon> component, which reads the engine’s icon sheet and crops the correct region automatically.

What you’ll build

• A small list that shows the current party leader’s equipped weapon/armor icons, and an arbitrary icon index example.

1. Import and show an icon by index

// Example snippet inside any screen/component under menus/src
import React from 'react';
import Icon from '../components/Icon';

export function ExampleIcons() {
  return (
    <div className="flex items-center gap-2">
      {/* Render icon index 64 at 32x32 */}
      <Icon className="w-8 h-8" icon={64} />
      {/* Render icon index 128 at 24x24 */}
      <Icon className="w-6 h-6" icon={128} />
    </div>
  );
}

1. Show the leader’s equipment icons

import React from 'react';
import { observer } from 'mobx-react-lite';
import RPGBridge from '../bridge/RPGBridge';
import Icon from '../components/Icon';

const LeaderEquipmentIcons: React.FC = observer(() => {
  const platform = RPGBridge.GetPlatformData();
  const leader = platform.runtime.gameParty.members()[0];
  const equips = leader ? leader.equips() : [];

  return (
    <div className="flex items-center gap-2">
      {equips.filter(Boolean).map((eq: any, i: number) => (
        <Icon key={i} className="w-8 h-8" icon={eq.iconIndex} />
      ))}
    </div>
  );
});

export default LeaderEquipmentIcons;

Notes

• <Icon> determines the icon sheet path via platform.gameInfo.getIconPath() and selects the correct sprite rectangle using platform.gameInfo.iconImageSize.getIconSprite(index).

• Control size with Tailwind classes (w-6 h-6, w-8 h-8, etc.). The component preserves pixel‑perfect cropping by rendering through <ImageViewport>.

• You can use any valid icon index from database items/skills/states, e.g., $dataItems[ID].iconIndex inside UI code when that data is in scope.

See also

• Messages, Typewriter, SpecialCodeRenderer

• Use Actor Portraits