40 lines
1.3 KiB
Markdown
40 lines
1.3 KiB
Markdown
|
# 设计规范 - 图标使用指南
|
|||
|
|
|
|||
|
|
## 严格禁止使用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图标的替换
|