65 lines
2.6 KiB
Markdown
65 lines
2.6 KiB
Markdown
# 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.
|
||
|
||
### Vanilla JS
|
||
|
||
- **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:
|
||
|
||
```html
|
||
<!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`, and `weight` of 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](https://github.com/rektdeckard/phosphor-react).
|
||
|
||
```jsx
|
||
import React from "react";
|
||
import ReactDOM from "react-dom";
|
||
import { Smiley, Heart, Horse } from "phosphor-react";
|
||
|
||
const App = () => {
|
||
return (
|
||
<>
|
||
<Smiley />
|
||
<Heart size={32} color="hotpink" weight="fill" />
|
||
<Horse weight="duotone" />
|
||
</>
|
||
);
|
||
};
|
||
|
||
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 `style` objects, `onClick` handler 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**
|