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
+20-16Lines changed: 20 additions & 16 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -13,7 +13,7 @@ Feather is a collection of simply beautiful open source icons. Each icon is desi
13
13
14
14
https://feathericons.com
15
15
16
-
```sh
16
+
```shell
17
17
npm install feather-icons
18
18
```
19
19
@@ -77,21 +77,23 @@ The following are additional ways you can use Feather.
77
77
78
78
Install with [npm](https://docs.npmjs.com/getting-started/what-is-npm).
79
79
80
-
```
80
+
```shell
81
81
npm install feather-icons --save
82
82
```
83
83
84
84
Or just copy [`feather.js`](https://unpkg.com/feather-icons/dist/feather.js) or [`feather.min.js`](https://unpkg.com/feather-icons/dist/feather.min.js) into your project directory. You don't need both `feather.js` and `feather.min.js`.
85
85
86
86
#### 2. Include
87
87
88
-
Include `feather.js` or `feather.min.js` with a `<script>` tag. These files are located in the `dist` directory of the npm package.
88
+
Include `feather.js` or `feather.min.js` with a `<script>` tag:
89
89
90
90
```html
91
91
<scriptsrc="path/to/dist/feather.js"></script>
92
92
```
93
93
94
-
Or load the script from a CDN provider.
94
+
> **Note:**`feather.js` and `feather.min.js` are located in the `dist` directory of the npm package.
95
+
96
+
Or load the script from a CDN provider:
95
97
96
98
```html
97
99
<!-- choose one -->
@@ -103,7 +105,7 @@ After including the script, `feather` will be available as a global variable.
103
105
104
106
#### 3. Use
105
107
106
-
To use an icon on your page, add a `data-feather` attribute with the icon name to an element.
108
+
To use an icon on your page, add a `data-feather` attribute with the icon name to an element:
107
109
108
110
```html
109
111
<idata-feather="circle"></i>
@@ -113,7 +115,7 @@ See the complete list of icons at [feathericons.com](https://feathericons.com).
113
115
114
116
#### 4. Replace
115
117
116
-
Call the `feather.replace()` method.
118
+
Call the `feather.replace()` method:
117
119
118
120
```html
119
121
<script>
@@ -126,15 +128,15 @@ All elements that have a `data-feather` attribute will be replaced with SVG mark
126
128
### Node
127
129
#### 1. Install
128
130
129
-
Install with [npm](https://docs.npmjs.com/getting-started/what-is-npm).
131
+
Install with [npm](https://docs.npmjs.com/getting-started/what-is-npm):
130
132
131
-
```
133
+
```shell
132
134
npm install feather-icons --save
133
135
```
134
136
135
137
#### 2. Require
136
138
137
-
```javascript
139
+
```js
138
140
constfeather=require('feather-icons')
139
141
```
140
142
@@ -157,7 +159,8 @@ feather.icons.x
157
159
// 'stroke-width': 2,
158
160
// 'stroke-linecap': 'round',
159
161
// 'stroke-linejoin': 'round',
160
-
// }
162
+
// },
163
+
// toSvg: [Function],
161
164
// }
162
165
163
166
feather.icons.x.toSvg()
@@ -177,15 +180,15 @@ See the [API Reference](#api-reference) for more information about the available
177
180
178
181
Install with [npm](https://docs.npmjs.com/getting-started/what-is-npm).
179
182
180
-
```
183
+
```shell
181
184
npm install feather-icons --save
182
185
```
183
186
184
187
Or just copy [`feather-sprite.svg`](https://unpkg.com/feather-icons/dist/feather-sprite.svg) into your project directory.
185
188
186
189
#### 2. Use
187
190
188
-
In your HTML, you can include an icon like so:
191
+
Include an icon on your page with the following markup:
189
192
190
193
```html
191
194
<svg
@@ -203,7 +206,7 @@ In your HTML, you can include an icon like so:
203
206
204
207
> **Note:**`circle` in the above example can be replaced with any valid icon name. See the complete list of icon names at [feathericons.com](https://feathericons.com).
205
208
206
-
However, this markup can be simplified using a simple CSS class to avoid repetition of SVG attributes between icons.
209
+
However, this markup can be simplified using a simple CSS class to avoid repetition of SVG attributes between icons:
0 commit comments