HeyBinyang
← 返回开源
·Icons·UIIcons

Phosphor 是一个灵活的图标系列,适用于界面、图表、演示文稿——实际上什么都可以。

Windows / macOS / Linux

Phosphor 图标

Phosphor 是一个灵活的图标家族,适用于界面、图表、演示文稿——实际上,任何场景都可以。

  • 1,248 个图标,持续增长中

  • 6 种粗细:细体轻体常规体粗体填充体双色调

  • 设计为 16x16 像素,在小尺寸下易读,放大后仍清晰

  • 保留原始描边信息,便于微调风格

更多使用方式请访问 phosphoricons.com

面向开发者

Phosphor 适用于 WebReactVueFlutterElm 以及其他框架和平台。

React

  • 功能强大——Phosphor 直观而强大的 API 可以通过几个按键设置图标的 colorsizeweight,通过 Context API 为所有图标提供默认样式,或者通过渲染属性在运行时直接操作 SVG 实现一些惊人的效果!查看 @phosphor-icons/react 仓库页面上的完整文档。

    import React from "react";
    import ReactDOM from "react-dom";
    import { Smiley, Heart, Horse } from "@phosphor-icons/react";
    
    const App = () => {
      return (
        <div>
          <Smiley />
          <Heart size={32} color="hotpink" weight="fill" />
          <Horse weight="duotone" />
        </div>
      );
    };
    
    ReactDOM.render(<App />, document.getElementById("root"));

分享