mirror/feather
1
0
Fork 0
mirror of https://github.com/feathericons/feather.git synced 2023-08-10 21:13:24 +03:00
Code Issues Projects Releases Wiki Activity

Merge branch 'master' of https://github.com/feathericons/feather

Browse Source
This commit is contained in:
Cole Bemis 2018-05-18 17:23:29 -07:00
commit 01698dea84
2 changed files with 23 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

36
README.md
View File

@ -13,7 +13,7 @@ Feather is a collection of simply beautiful open source icons. Each icon is desi
https://feathericons.com https://feathericons.com
```sh ```shell
npm install feather-icons npm install feather-icons
``` ```
@ -77,7 +77,7 @@ The following are additional ways you can use Feather.
Install with [npm](https://docs.npmjs.com/getting-started/what-is-npm). Install with [npm](https://docs.npmjs.com/getting-started/what-is-npm).
``` ```shell
npm install feather-icons --save npm install feather-icons --save
``` ```
@ -85,13 +85,15 @@ Or just copy [`feather.js`](https://unpkg.com/feather-icons/dist/feather.js) or
#### 2. Include #### 2. Include
Include `feather.js` or `feather.min.js` with a `<script>` tag. These files are located in the `dist` directory of the npm package. Include `feather.js` or `feather.min.js` with a `<script>` tag:
```html ```html
<script src="path/to/dist/feather.js"></script> <script src="path/to/dist/feather.js"></script>
``` ```
Or load the script from a CDN provider. > **Note:** `feather.js` and `feather.min.js` are located in the `dist` directory of the npm package.
Or load the script from a CDN provider:
```html ```html
<!-- choose one --> <!-- choose one -->
@ -103,7 +105,7 @@ After including the script, `feather` will be available as a global variable.
#### 3. Use #### 3. Use
To use an icon on your page, add a `data-feather` attribute with the icon name to an element. To use an icon on your page, add a `data-feather` attribute with the icon name to an element:
```html ```html
<i data-feather="circle"></i> <i data-feather="circle"></i>
@ -113,7 +115,7 @@ See the complete list of icons at [feathericons.com](https://feathericons.com).
#### 4. Replace #### 4. Replace
Call the `feather.replace()` method. Call the `feather.replace()` method:
```html ```html
<script> <script>
@ -126,15 +128,15 @@ All elements that have a `data-feather` attribute will be replaced with SVG mark
### Node ### Node
#### 1. Install #### 1. Install
Install with [npm](https://docs.npmjs.com/getting-started/what-is-npm). Install with [npm](https://docs.npmjs.com/getting-started/what-is-npm):
``` ```shell
npm install feather-icons --save npm install feather-icons --save
``` ```
#### 2. Require #### 2. Require
```javascript ```js
const feather = require('feather-icons') const feather = require('feather-icons')
``` ```
@ -157,7 +159,8 @@ feather.icons.x
// 'stroke-width': 2, // 'stroke-width': 2,
// 'stroke-linecap': 'round', // 'stroke-linecap': 'round',
// 'stroke-linejoin': 'round', // 'stroke-linejoin': 'round',
// } // },
// toSvg: [Function],
// } // }
feather.icons.x.toSvg() feather.icons.x.toSvg()
@ -177,7 +180,7 @@ See the [API Reference](#api-reference) for more information about the available
Install with [npm](https://docs.npmjs.com/getting-started/what-is-npm). Install with [npm](https://docs.npmjs.com/getting-started/what-is-npm).
``` ```shell
npm install feather-icons --save npm install feather-icons --save
``` ```
@ -185,7 +188,7 @@ Or just copy [`feather-sprite.svg`](https://unpkg.com/feather-icons/dist/feather
#### 2. Use #### 2. Use
In your HTML, you can include an icon like so: Include an icon on your page with the following markup:
```html ```html
<svg <svg
@ -203,7 +206,7 @@ In your HTML, you can include an icon like so:
> **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). > **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).
However, this markup can be simplified using a simple CSS class to avoid repetition of SVG attributes between icons. However, this markup can be simplified using a simple CSS class to avoid repetition of SVG attributes between icons:
```css ```css
.feather { .feather {
@ -248,7 +251,8 @@ feather.icons.x
// 'stroke-width': 2, // 'stroke-width': 2,
// 'stroke-linecap': 'round', // 'stroke-linecap': 'round',
// 'stroke-linejoin': 'round', // 'stroke-linejoin': 'round',
// } // },
// toSvg: [Function],
// } // }
feather.icons.x.toString() feather.icons.x.toString()
@ -273,7 +277,7 @@ Returns an SVG string.
#### Usage #### Usage
```javascript ```js
feather.icons.circle.toSvg() feather.icons.circle.toSvg()
// '<svg class="feather feather-circle" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle></svg>' // '<svg class="feather feather-circle" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle></svg>'
@ -361,7 +365,7 @@ Returns an SVG string.
#### Usage #### Usage
```javascript ```js
feather.toSvg('circle') feather.toSvg('circle')
// '<svg class="feather feather-circle" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle></svg>' // '<svg class="feather feather-circle" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle></svg>'

6
package-lock.json generated
View File

@ -3093,9 +3093,9 @@
"dev": true "dev": true
}, },
"core-js": { "core-js": {
"version": "2.5.3", "version": "2.5.6",
"resolved": "https://registry.npmjs.org/core-js/-/core-js-2.5.3.tgz", "resolved": "https://registry.npmjs.org/core-js/-/core-js-2.5.6.tgz",
"integrity": "sha1-isw4NFgk8W2DZbfJtCWRaOjtYD4=" "integrity": "sha512-lQUVfQi0aLix2xpyjrrJEvfuYCqPc/HwmTKsC/VNf8q0zsjX7SQZtp4+oRONN5Tsur9GDETPjj+Ub2iDiGZfSQ=="
}, },
"core-util-is": { "core-util-is": {
"version": "1.0.2", "version": "1.0.2",