phosphor-react
v1.4.1TypeScript
A clean and friendly icon family for React
71.4K/weekUpdated 3 years agoMITUnpacked: 50.8 MB
Published by rektdeckard
npm install phosphor-react
phosphor-react
Phosphor is a flexible icon family for interfaces, diagrams, presentations — whatever, really. Explore all our icons at phosphoricons.com.
  
Installation
``bash`
yarn add phosphor-react
or
`bash`
npm install --save phosphor-react
Usage
Simply import the icons you need, and add them anywhere in your render method. Phosphor supports tree-shaking, so your bundle only includes code for the icons you use.
`tsx
import React from "react";
import ReactDOM from "react-dom";
import { Horse, Heart, Cube } from "phosphor-react";
const App = () => {
return (
);
};
ReactDOM.render(
`
$3
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.number | string
- size?: – 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."thin" | "light" | "regular" | "bold" | "fill" | "duotone"
- weight?: – Icon weight/style. Can also 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.boolean
- mirrored?: – Flip the icon horizontally. Can be useful in RTL languages where normal icon orientation is not appropriate.string
- alt?: – Add accessible alt text to an icon.
$3
Phosphor takes advantage of React Context to make applying a default style to all icons simple. Create an IconContext.Provider at the root of the app (or anywhere above the icons in the tree) and pass in a configuration object with props to be applied by default to all icons:
`tsx
import React from "react";
import ReactDOM from "react-dom";
import { IconContext, Horse, Heart, Cube } from "phosphor-react";
const App = () => {
return (
color: "limegreen",
size: 32,
weight: "bold",
mirrored: false,
}}
>
);
};
ReactDOM.render(
`
You may create multiple Contexts for styling icons differently in separate regions of an application; icons use the nearest Context above them to determine their style.
> Note: The context will also pass any provided SVG props down to icon instances, which can be useful E.G. in adding accessible aria-labels, classNames, etc.
$3
Components can accept arbitrary SVG elements as children, so long as they are valid children of the
The following will cause the Cube icon to rotate and pulse:
`jsx`
const RotatingCube = () => {
return (
values="0;1;0"
dur="4s"
repeatCount="indefinite"
>
attributeType="XML"
type="rotate"
dur="5s"
from="0 0 0"
to="360 0 0"
repeatCount="indefinite"
>
);
};
> Note: The coordinate space of slotted elements is relative to the contents of the icon viewBox, which is a 256x256 square. Only valid SVG elements will be rendered.
$3
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.
`tsx``
import * as Icon from "phosphor-react";
...
Our Related Projects
- phosphor-home ▲ Phosphor homepage and general info
- phosphor-vue ▲ Phosphor icon component library for Vue
- phosphor-icons ▲ Phosphor icons for Vanilla JS
- phosphor-flutter ▲ Phosphor IconData library for Flutter
- phosphor-webcomponents ▲ Phosphor icons as Web Components
- phosphor-figma ▲ Phosphor icons Figma plugin
- phosphor-sketch ▲ Phosphor icons Sketch plugin
Community Projects
- phosphor-react-native ▲ Phosphor icon component library for React Native
- phosphor-svelte ▲ Phosphor icons for Svelte apps
- phosphor-r ▲ Phosphor icon wrapper for R documents and applications
- blade-phosphor-icons ▲ Phosphor icons in your Laravel Blade views
If you've made a port of Phosphor and you want to see it here, just open a PR here!
License
MIT © Phosphor Icons