Massive interactivity updates to all components
This commit is contained in:
rektdeckard
76
README.md
76
README.md
@@ -1,44 +1,64 @@
|
||||
This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).
|
||||
# Phosphor Icons
|
||||
|
||||
## Available Scripts
|
||||
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.
|
||||
|
||||
In the project directory, you can run:
|
||||
## For developers
|
||||
|
||||
### `yarn start`
|
||||
Phosphor is available as an icon font and a React package, which can be sourced from NPM or from a CDN.
|
||||
|
||||
Runs the app in the development mode.<br />
|
||||
Open [http://localhost:3000](http://localhost:3000) to view it in the browser.
|
||||
### Vanilla JS
|
||||
|
||||
The page will reload if you make edits.<br />
|
||||
You will also see any lint errors in the console.
|
||||
- **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:
|
||||
|
||||
### `yarn test`
|
||||
```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>
|
||||
```
|
||||
|
||||
Launches the test runner in the interactive watch mode.<br />
|
||||
See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information.
|
||||
- **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.
|
||||
|
||||
### `yarn build`
|
||||
### React
|
||||
|
||||
Builds the app for production to the `build` folder.<br />
|
||||
It correctly bundles React in production mode and optimizes the build for the best performance.
|
||||
- **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).
|
||||
|
||||
The build is minified and the filenames include the hashes.<br />
|
||||
Your app is ready to be deployed!
|
||||
```jsx
|
||||
import React from "react";
|
||||
import ReactDOM from "react-dom";
|
||||
import { Smiley, Heart, Horse } from "phosphor-react";
|
||||
|
||||
See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information.
|
||||
const App = () => {
|
||||
return (
|
||||
<>
|
||||
<Smiley />
|
||||
<Heart size={32} color="hotpink" weight="fill" />
|
||||
<Horse weight="duotone" />
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
### `yarn eject`
|
||||
ReactDOM.render(<App />, document.getElementById("root"));
|
||||
```
|
||||
|
||||
**Note: this is a one-way operation. Once you `eject`, you can’t go back!**
|
||||
- **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.
|
||||
|
||||
If you aren’t satisfied with the build tool and configuration choices, you can `eject` at any time. This command will remove the single build dependency from your project.
|
||||
## For designers
|
||||
|
||||
Instead, it will copy all the configuration files and the transitive dependencies (webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except `eject` will still work, but they will point to the copied scripts so you can tweak them. At this point you’re on your own.
|
||||
### 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.
|
||||
|
||||
You don’t have to ever use `eject`. The curated feature set is suitable for small and middle deployments, and you shouldn’t feel obligated to use this feature. However we understand that this tool wouldn’t be useful if you couldn’t customize it when you are ready for it.
|
||||
|
||||
## Learn More
|
||||
|
||||
You can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started).
|
||||
|
||||
To learn React, check out the [React documentation](https://reactjs.org/).
|
||||
### Source Files
|
||||
- **Sketch**
|
||||
- **Illustrator**
|
||||
- **Figma**
|
||||
|
||||
Reference in New Issue
Block a user