Phosphor Icons

项目概述

Phosphor Icons 是一套广受全球设计师与开发者赞誉的灵活图标体系。全套包含 1,500+ 个独特图形资产，每款图标均严谨绘制了 6 种粗细字重（Thin、Light、Regular、Bold、Fill、Duotone），提供前所未有的风格统一感。

核心特性

• 6 种严谨统一的字重风格：可在细线、常规、加粗、纯色实心与双色调（Duotone）之间随时平滑切换。
• ⚡️ 全生态跨端包支持：为 React、Vue、Svelte、Flutter 以及 Figma 提供了原生深度绑定的包资产。
• 基于 24×24 像素网格精绘：每个圆角与端点均经过光学平衡补偿，在高清视网膜屏幕上清晰锐利。
• 零依赖与 Tree-Shaking：纯净 React SVG 组件，按需引用打包，零多余体积浪费。

快速上手与示例代码

npm install @phosphor-icons/react

import { Heart, Cube, Rocket } from '@phosphor-icons/react';

export default function IconShowcase() {
  return (
    <div className="flex items-center gap-3">
      <Heart size={24} weight="bold" color="#ef4444" />
      <Cube size={24} weight="duotone" />
      <Rocket size={24} weight="fill" />
    </div>
  );
}

技术选型建议与适用场景

• 非常适合：现代 SaaS 产品、设计系统、精细仪表盘以及需要灵活在常规态/选中态之间切换图标粗细的场景。
• 不适用场景：必须依赖老旧 Web Font 字体文件（如 .eot/.woff）打包的陈旧系统。