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

README: adjust copy and add license

Browse Source
This commit is contained in:
rektdeckard
2020-09-23 13:35:00 -04:00
parent de2e9df380
commit ddee78bba3
1 changed files with 9 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files

35
README.md
View File

@@ -1,20 +1,20 @@
# 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.
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. The complete list of icons can be found on [our website](https://phosphoricons.com).
## For developers
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.
Phosphor is available as a [one-liner](https://github.com/phosphor-icons/phosphor-icons) script, [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
- **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:
- **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 add the script to the document `<head>`, and drop in icons with an `<i/>` tag and the appropriate class:
```html
<!DOCTYPE html>
<html>
<head>
<script src="https://unpkg.com/phosphor-icons@latest"></script>
<script src="https://unpkg.com/phosphor-icons"></script>
</head>
<body>
<i class="ph-smiley"></i>
@@ -24,28 +24,7 @@ Phosphor is available as an icon font, [React package](https://github.com/phosph
</html>
```
- **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:
```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.
Check out the full documentation on the [phosphor-icons](https://github.com/phosphor-icons/phosphor-icons) repo page.
### React
@@ -113,3 +92,7 @@ Download our [asset kit](https://www.phosphoricons.com/assets/phosphor.zip) to s
- **Sketch**
- **Illustrator**
- **Figma** -->
## License
GPL-3.0 © [Phosphor Icons](https://github.com/phosphor-icons)