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
MIT © rektdeckard