d5609d3c57
When setTransientState() triggers a new timeout, we clear any pending timeouts to prevent stale state from being applied if a superceding value was set in the interim. Maybe in future we should also allow users to cancel pending transitions directly, by returning useTimeoutFn's cancel() function along with the state and setter.
Phosphor Icons
Phosphor is a kickass and dead-simple set of open-source icons for web and digital media. We aim to provide variety, consistency, and above all, ease-of-use for digital content creators of all kinds.
For developers
Phosphor is available as an icon font and a React package, which can be sourced from NPM or from a CDN.
HTML/CSS
- This seems familiar... – Using Phosphor in your web project might seem familiar. We use a similar approach as many other icon sets out there, providing icons as a webfont that uses Unicode's Private Use Area character codes to map normally non-rendering characters to icons. But you don't need to know that. All you need to do is source the stylesheet, and drop in an icon:
<!DOCTYPE html>
<html>
<head>
<script src="https://unpkg.com/phosphor-web@latest"></script>
</head>
<body>
<i class="ph-smiley"></i>
<i class="ph-heart-fill" style="color: hotpink"></i>
<i class="ph-cube-duotone"></i>
</body>
</html>
- Whatchacallit? – We use a straightforward and semantic naming scheme that may mean only changing a few letters when switching from other icon sets. But don't switch on our account, there are some excellent sets out there!
- That's it? – Yep. That's it.
React
- Flex or flow – Phosphor's intuitive but powerful API can style the
color,size, andweightof an icon with a few keystrokes, or directly manipulate the SVG at runtime through render props to do some amazing things! Check out some examples on Github.
import React from "react";
import ReactDOM from "react-dom";
import { Smiley, Heart, Horse } from "phosphor-react";
const App = () => {
return (
<div>
<Smiley />
<Heart size={32} color="hotpink" weight="fill" />
<Horse weight="duotone" />
</div>
);
};
ReactDOM.render(<App />, document.getElementById("root"));
- Light as a Feather – Supports tree-shaking, so your bundle only includes code for the icons you use.
- Familiar – Icon Components are a thin wrapper around SVG elements, so feel free to add your own inline
styleobjects,onClickhandler functions, and a multitude of other props you're used to using on React Elements.
For designers
Raw Assets
- SVGs – Grab our individual icon SVGs, in both minified and original formats retaining design-time detail.
- Icon Font – Use the icons as you would text, in applications where full-fledged graphical elements are undesirable.
Source Files
- Sketch
- Illustrator
- Figma