Phosphor Icons

Phosphor Icons 是跨平台开源图标家族，提供 Thin、Light、Regular、Bold、Fill 和 Duotone 六种权重。官方资源覆盖 Web、React、Vue、Flutter、Figma 等环境，core 包保存原始 SVG 与目录元数据；项目可以按框架组件、SVG 或 Web Font 等方式接入。

六种权重需要角色规则

同一区域频繁切换权重会破坏一致性。

接入方式按产品平台选择

React、Vue 等应用优先使用对应组件包，便于 props、类型和按需构建；静态网页可用 Web Font 或 SVG；设计团队使用 Figma 资源。不要为了跨平台统一而强制所有端使用相同技术，应该统一名称、语义和视觉规格。

Duotone 是双层视觉结构

Duotone 通过前景与背景层建立层次，Web Font 实现还涉及两个 glyph/codepoint。定义主色、次层透明度和暗色主题规则，确保第二层丢失时仍能识别；状态色不要与双色装饰互相混淆。

字体与 SVG 的取舍

• SVG/组件便于单图标 tree shaking、aria 和多色控制；
• Web Font 适合大量统一图标，但要管理字体加载；
• 只引入实际使用的权重，避免同时加载六套字体；
• 首屏提供字体失败回退，避免按钮只剩空框；
• 导出 PNG 仅用于无法使用矢量的场景。

图标名称进入设计令牌

为 search、add、delete、warning 等常用动作建立产品级名称映射，不让页面直接依赖上游所有图标名。这样更换图标、调整权重或跨平台实现时，只需更新映射层；第三方品牌图标则单独管理商标规则。

小尺寸和可访问性一起测试

在 16px、20px、24px 及高缩放环境观察细节，点击区域不能等于可见图形大小。装饰图标隐藏，独立按钮添加可访问名称；Fill 与 Regular 表示选中时，还要给屏幕阅读器同步状态。

MIT 许可与资源版本留档

Phosphor core 以 MIT License 发布。保留所用包、权重、版本和许可文本，自定义图标放入独立目录。升级时关注别名、弃用、codepoint 和 SVG 路径变化，特别是字体实现不能随意依赖尚未稳定的内部编号。