美餐组件库

主题

图标 Icon ​

Paperwork 图标系统：164 个单色线性图标 + 46 个多色拟物图标，共 210 个，分 9 组。

命名 & 使用

  • 文件路径：docs/public/icons/<group>/<name>.svg
  • 单色组用 fill="currentColor"，跟随父级文字色变化
  • 多色组保留多色拟物（color / color-app），不响应文字色
  • Vue 组件：<Icon name="arrows/arrow-line-left" :size="24" />
  • 点击图标可复制 token 名（格式 group/name）

Arrows · 箭头（24） ​

方向、返回、展开、跳转。常用单色线性。

User · 用户（11） ​

人物、团队、权限。

General · 通用（89） ​

业务通用：地点、文件、时间、工具、状态等。这一组最大，多以名词命名。

Feedback · 反馈（15） ​

加 / 减 / 对勾 / 叉等用户反馈类。

View · 视图（8） ​

布局切换、列表 / 表 / 看板视图等。

Filled · 填充态（10） ​

*-filled 同名 outline 图标的实心变体，多用于「选中 / 强调」状态。

Display · 展示（7） ​

业务展示类：刷卡、键盘录入、堂食 / 配送场景。

Color · 多色拟物（41） ​

3D 拟物色块图标，保留多色，不响应 currentColor。多用于强表达场景，例如空状态插图、引导卡片。

Color-APP · APP 多色（5） ​

C 端 APP 场景专属的多色业务图标。

维护 ​

图标源在 Figma PW-Lib-V4.1 的「Icon」frame（node 10062:315012）。

bash
# 重新从 Figma 拉取所有图标（需要 FIGMA_TOKEN）
pnpm sync:icons

脚本会：

  1. 拉取所有 COMPONENT 节点的 SVG → docs/public/icons/<group>/
  2. 在单色组里把 Figma 占位色 #F586DC 替换成 currentColor
  3. 重新生成 docs/.vitepress/icon-manifest.json（IconGrid 用它）

已知问题

  • Figma 里 arrows/arrow-line-left 与 general/organization 各有 2 个同名重复节点，sync 后只保留 1 个（后写覆盖前写）。需要回 Figma 去重。
  • 部分图标名拼写：general/drag-virtical-line 应为 vertical，保留 Figma 原拼写以便 sync 一致。