56 lines
1.4 KiB
Markdown
56 lines
1.4 KiB
Markdown
# Icon System
|
|
|
|
## Structure
|
|
|
|
```
|
|
icons/
|
|
├── items/ # Item icons (weapons, consumables, materials, etc.)
|
|
├── ui/ # UI elements (buttons, arrows, close, menu, etc.)
|
|
├── status/ # Status indicators (health, stamina, level, etc.)
|
|
└── actions/ # Action icons (attack, defend, flee, interact, etc.)
|
|
```
|
|
|
|
## Icon Specifications
|
|
|
|
### Format
|
|
- **Primary:** SVG (vector, scalable, small file size)
|
|
- **Fallback:** PNG (universal compatibility)
|
|
- **Avoid:** JPG/JPEG (not suitable for icons with transparency)
|
|
|
|
### Size
|
|
- **Standard Icons:** 64x64px
|
|
- **Large Icons:** 128x128px (for important UI elements)
|
|
- **Small Icons:** 32x32px (for compact displays)
|
|
|
|
### Naming Convention
|
|
- Use kebab-case: `iron-sword.svg`, `health-potion.png`
|
|
- Be descriptive: `attack-action.svg`, `stamina-icon.svg`
|
|
- Match item_id when possible: if item_id is "iron_sword", use "iron-sword.svg"
|
|
|
|
### Color
|
|
- Use transparent backgrounds
|
|
- Consistent style across all icons
|
|
- Consider dark mode compatibility
|
|
|
|
## Usage in Code
|
|
|
|
Icons are referenced via the `icon_path` field in data structures:
|
|
|
|
```json
|
|
{
|
|
"id": "iron_sword",
|
|
"name": "Iron Sword",
|
|
"icon_path": "icons/items/iron-sword.svg",
|
|
"emoji": "⚔️" // Kept as fallback
|
|
}
|
|
```
|
|
|
|
## Migration from Emojis
|
|
|
|
Emojis are kept as fallback for:
|
|
1. Backward compatibility
|
|
2. Development placeholder
|
|
3. Platforms that don't load custom icons
|
|
|
|
The UI will prefer `icon_path` over `emoji` when available.
|