You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: README.md
+90-80Lines changed: 90 additions & 80 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -4,125 +4,135 @@
4
4
5
5
Phosphor is a flexible icon family for interfaces, diagrams, presentations — whatever, really. Explore all our icons at [phosphoricons.com](https://phosphoricons.com).
[](https://github.com/rektdeckard)
13
13
14
14
## Usage
15
15
16
16
### Getting Started
17
17
18
-
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:
18
+
We use a similar approach as many other icon sets out there, providing icons as several webfonts that uses Unicode's Private Use Area character codes to map normally non-rendering characters to icons. Simply add one or more weights by including its stylesheet to the document `<head>`, and drop in icons with an `<i>` tag and the appropriate classes for the weight and the icon:
> **Note:**For stability, you may choose to source a specific version of Phosphor by adding the version to the script URL, for example: `https://unpkg.com/phosphor-icons@1.3.2`. The CDN supports version ranges.
38
+
> **Note:**You can import as many or as few weights as needed. Only imported weights will match and render as icons.
35
39
36
-
### Styling
40
+
### Weights
41
+
42
+
Phosphor Icons come in 6 weights: `regular`, `thin`, `light`, `bold`, `fill`, and `duotone`. In order to use a weight, you must include a link to its stylesheet, and use the appropriate weight class on the icon:
37
43
38
-
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:
> **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.
54
+
The URL format is `https://unpkg.com/@phosphor-icons/web@<VERSION>/src/<WEIGHT>/style.css`. Other common CDNs may also be used.
55
+
56
+
#### Using All Weights
57
+
58
+
If you intend to use all 6 weights, they can be made available by including the library as a script tag, using the base URL:
If your environment supports loading CSS files as modules, icon weights can be imported for effect from the package.
70
+
71
+
```sh
72
+
$ yarn add @phosphor-icons/web
73
+
```
74
+
75
+
```js
76
+
import"@phosphor-icons/web/light";
77
+
import"@phosphor-icons/web/bold";
78
+
```
79
+
80
+
> **NOTE:** Though assets will be cached for subsequent loads, this will bring in around 3MB of fonts and CSS, and may have impact on page load speed.
81
+
82
+
### Styling
83
+
84
+
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.
85
+
86
+
```html
87
+
<style>
88
+
.ph-bold {
89
+
font-size: 48px;
90
+
}
91
+
92
+
.green {
93
+
color: limegreen;
94
+
}
95
+
</style>
96
+
...
97
+
<!-- 96px -->
98
+
<iclass="ph-bold ph-airplane"></i>
99
+
<!-- 96px and green -->
100
+
<iclass="ph-bold ph-skull green"></i>
101
+
```
97
102
98
-
> **Note:**The `duotone`weight is not yet available for this implementation, as fonts do not support baked-in alpha/opacity. In future we plan to move to an SVG-based approach with full support for all icon weights.
103
+
> **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. Additionally, all weights use the `:before` pseudoelement to inject the font glyph, so overriding this property in icon classes can break them. The `duotone` weight also uses the `:after` pseudoelement, so it is best not to modify either when styling icons.
99
104
100
105
### Ligatures
101
106
102
-
The icon font now supports ligatures, meaning that in any text using `font-family: "Phosphor"`, writing the name of an icon (without the `ph-` prefix) will convert to the corresponding icon. The largest possible string will be matched, meaning you can use any available weight, and print multiple icons without separating with spaces or other characters if you choose.
107
+
All weights aside from `duotone` support ligatures, meaning that in any text using supported weight classes, writing the name of an icon (without the `ph-` prefix) will convert to the corresponding icon. The largest possible string will be matched, meaning you can use any available weight, and print multiple icons without separating with spaces or other characters if you choose.
0 commit comments