# 设计规范 - 图标使用指南

## 严格禁止使用emoji

**规则**: 在所有HTML文件中，必须使用Lucide SVG图标代替emoji。

**正确格式**:
```html
<i data-lucide="icon-name"></i>
```

**参考实现**: 食品订单班 (food order class) 的实现方式

**常用图标映射**:
- 🏗️ → `<i data-lucide="building-2"></i>`
- 🏠 → `<i data-lucide="home"></i>`
- 🛏️ → `<i data-lucide="bed"></i>`
- 📚 → `<i data-lucide="book-open"></i>`
- 🔧 → `<i data-lucide="settings"></i>` 或 `<i data-lucide="wrench"></i>`
- 📏 → `<i data-lucide="ruler"></i>`
- 🎨 → `<i data-lucide="palette"></i>`
- ⚡ → `<i data-lucide="zap"></i>`
- 💧 → `<i data-lucide="droplets"></i>`
- ☀️ → `<i data-lucide="sun"></i>`
- 🌙 → `<i data-lucide="moon"></i>`
- 💡 → `<i data-lucide="lightbulb"></i>`
- 📐 → `<i data-lucide="layout-grid"></i>`
- 🎬 → `<i data-lucide="film"></i>`
- 📸 → `<i data-lucide="camera"></i>`
- 📊 → `<i data-lucide="bar-chart"></i>`
- 🎯 → `<i data-lucide="target"></i>`

**优势**:
- SVG图标可扩展、清晰度高
- 支持CSS样式自定义
- 跨浏览器兼容性好
- 符合现代Web设计标准

**执行记录**:
- 2025年10月: civil订单班完成22处emoji到SVG图标的替换