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

docs: Update sprite docs

Browse Source
This commit is contained in:
Cole Bemis 2018-04-01 17:04:44 -07:00
parent a3527829b8
commit 94531bbe7c
1 changed files with 33 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

48
README.md
View File

@ -168,40 +168,58 @@ feather.icons.x.toSvg({ class: 'foo bar', 'stroke-width': 1, color: 'red' })
See the [API Reference](#api-reference) for more information about the available properties and methods of the `feather` object. See the [API Reference](#api-reference) for more information about the available properties and methods of the `feather` object.
### SVG Sprite ### SVG Sprite
A SVG Sprite is also provided, which can be used as following:
#### 1. Install
> **Note:** If you intend to use Feather with a CDN, you can skip this installation step.
Install with [npm](https://docs.npmjs.com/getting-started/what-is-npm).
```
npm install feather-icons --save
```
Or just copy [`feather-sprite.svg`](https://unpkg.com/feather-icons/dist/feather-sprite.svg) into your project directory.
#### 2. Use
In your HTML, you can include an icon like so:
```html ```html
<svg class="feather feather-[iconName]" <svg
width="24" width="24"
height="24" height="24"
fill="none" fill="none"
stroke="currentColor" stroke="currentColor"
stroke-width="2" stroke-width="2"
stroke-linecap="round" stroke-linecap="round"
stroke-linejoin="round" stroke-linejoin="round"
> >
<use xlink:href="feather-sprite.svg#[iconName]"/> <use xlink:href="path/to/feather-sprite.svg#circle"/>
</svg> </svg>
``` ```
Where `iconName` is the name of the icon you want to display.
Same result but using a CSS class: > **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.
```css ```css
.feather { .feather {
width: 24px; width: 24px;
height: 24px; height: 24px;
stroke: currentColor; stroke: currentColor;
stroke-width: 2; stroke-width: 2;
stroke-linecap: round; stroke-linecap: round;
stroke-linejoin: round; stroke-linejoin: round;
fill: none; fill: none;
} }
``` ```
```html ```html
<svg class="feather feather-[iconName]"> <svg class="feather">
<use xlink:href="feather-sprite.svg#[iconName]"/> <use xlink:href="path/to/dist/feather-sprite.svg#circle"/>
</svg> </svg>
``` ```
Prefer using CSS classes to keep things organized.
## API Reference ## API Reference