phosphor-react

phosphor-react

A clear, playful, and adaptable icon family for React.

Installation

yarn add phosphor-react

or

npm install --save phosphor-react

Usage

import React from "react";
import ReactDOM from "react-dom";
import { Horse, Heart, Cube } from "phosphor-react";

const App = () => {
  return (
    <>
      <Horse />
      <Heart color="#AE2983" weight="fill" size={32} />
      <Cube color="teal" weight="duotone" />
    </>
  )
};

ReactDOM.render(<App />, document.getElementById("root"));

Props

Icon components accept all props that you can pass to a normal SVG element, including inline style objects, onClick handlers, and more. The main way of styling them will usually be with the following props:

• color?: string – Icon stroke/fill color. Can be any CSS color string, including hex, rgb, rgba, hsl, hsla, named colors, or the special currentColor variable.
• size?: number | string – Icon height & width. As with standard React elements, this can be a number, or a string with units in px, %, em, rem, pt, cm, mm, in.
• weight?: "thin" | "light" | "regular" | "bold" | "fill" | "duotone" – Icon weight/style. Can be used, for example, to "toggle" an icon's state: a rating component could use Stars with weight="regular" to denote an empty star, and weight="fill" to denote a filled star.
• mirrored?: boolean – Flip the icon horizontally. Can be useful in RTL languages where normal icon orientation is not appropriate.

Imports

You may wish to import all icons at once for use in your project, though depending on your bundler this could prevent tree-shaking and make your app's bundle larger.

import * as Icon from "phosphor-react";
...
<Icon.Smiley>
<Icon.Folder weight="thin">
<Icon.BatteryHalf size="24px">

License

GPL-3.0 © rektdeckard