andrea/phosphor-icons
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

README: add Vue and update copy

Browse Source
This commit is contained in:
rektdeckard
2020-09-15 23:16:22 -04:00
parent b01dd7b7e2
commit a57476e754
1 changed files with 63 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

75
README.md
View File

@@ -4,17 +4,17 @@ Phosphor is a kickass and dead-simple set of open-source icons for web and digit
## For developers ## For developers
Phosphor is available as an icon font and a React package, which can be sourced from NPM or from a CDN. Phosphor is available as an icon font, [React package](https://github.com/phosphor-icons/phosphor-react), and [Vue package](https://github.com/phosphor-icons/phosphor-vue), all of which can be sourced from NPM or from a CDN.
### HTML/CSS ### 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: - **Simple to use** – 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 with an `<i/>` tag and the appropriate class:
```html ```html
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head> <head>
<script src="https://unpkg.com/phosphor-web@latest"></script> <script src="https://unpkg.com/phosphor-icons@latest"></script>
</head> </head>
<body> <body>
<i class="ph-smiley"></i> <i class="ph-smiley"></i>
@@ -24,12 +24,32 @@ Phosphor is available as an icon font and a React package, which can be sourced
</html> </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! - **Styleable** – Since the icons are just text under the hood, they can be colored and styled with CSS like any other font, including `font-size`, `color`, etc. We include several helper classes to provide easy sizing if you need it:
- **That's it?** – Yep. That's it.
```css
.ph-xxs { font-size: 0.5em; }
.ph-xs { font-size: 0.75em; }
.ph-sm { font-size: 0.875em; }
.ph-lg { font-size: 1.3333em; line-height: 0.75em; vertical-align: -0.0667em; }
.ph-xl { font-size: 1.5em; line-height: 0.6666em; vertical-align: -0.075em; }
.ph-1x { font-size: 1em; }
.ph-2x { font-size: 2em; }
.ph-3x { font-size: 3em; }
.ph-4x { font-size: 4em; }
.ph-5x { font-size: 5em; }
.ph-6x { font-size: 6em; }
.ph-7x { font-size: 7em; }
.ph-8x { font-size: 8em; }
.ph-9x { font-size: 9em; }
.ph-10x { font-size: 10em; }
.ph-fw { text-align: center; width: 1.25em; }
```
> **Note:** Overriding the `font-family`, `font-style`, `font-weight`, `font-variant`, or `text-transform` may break the icons and render unprintable characters. Don't do it.
### React ### 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/phosphor-icons/phosphor-react). - **Powerful** – Phosphor's intuitive but powerful API can style the `color`, `size`, and `weight` of an icon with a few keystrokes, provide default styles to all icons via the Context API, or directly manipulate the SVG at runtime through render props to do some amazing things! Check out the full documentation on the [phosphor-react](https://github.com/phosphor-icons/phosphor-react) repo page.
```jsx ```jsx
import React from "react"; import React from "react";
@@ -49,16 +69,47 @@ const App = () => {
ReactDOM.render(<App />, document.getElementById("root")); ReactDOM.render(<App />, document.getElementById("root"));
``` ```
- **Light as a Feather** – Supports tree-shaking, so your bundle only includes code for the icons you use. - **Lightweight** – 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. - **Flexible** – Icon Components are a transparent 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 SVGs.
### Vue
- **Parity** – As with React, you can manipulate the `color`, `size`, and `weight` of an icon with a few keystrokes, or provide default styles to all icons via the `provide/inject` API. It is fully tree-shakable and ready to use right away. Check out the full documentation on the [phosphor-vue](https://github.com/phosphor-icons/phosphor-react) repo page.
```html
<template>
<div>
<PhHorse />
<PhHeart />
<PhCube />
</div>
</template>
<script>
import { PhHorse, PhHeart, PhCube } from "phosphor-vue";
export default {
name: "App",
components: {
PhHorse,
PhHeart,
PhCube,
},
};
</script>
```
> **Note:** Due to possible namespace collisions with built-in html elements, compononent names in the Vue library are prefixed with `Ph`, but otherwise follow the same naming conventions.
## For designers ## For designers
### Raw Assets ### 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 Download our [asset kit](https://www.phosphoricons.com/assets/phosphor.zip) to start working with Phosphor Icons in your designs.
- **SVGs** – Individual icon SVGs, in both minified and original formats retaining design-time detail.
- **Icon Font** – Use the icons as you would text, in print and other applications where full-fledged graphical elements are undesirable.
<!-- ### Source Files
- **Sketch** - **Sketch**
- **Illustrator** - **Illustrator**
- **Figma** - **Figma** -->