mirror of https://github.com/feathericons/feather.git synced 2023-08-10 21:13:24 +03:00

Simply beautiful open source icons https://feathericons.com

Go to file

Brad Bohen e80f80524a feat: Updated replace() to pass id from placeholder element (#193 )		2017-10-11 14:05:10 -07:00
.github	refactor: Move ISSUE_TEMPLATE.md into .github directory	2017-07-03 15:53:34 -07:00
bin	build: Add script to build `dist/icons` directory	2017-07-03 15:53:34 -07:00
examples	docs: Add a clarification inside the example webpage. (#180 )	2017-09-06 08:30:09 -07:00
icons	fix: Fix `bold` icon	2017-07-30 00:41:06 -07:00
src	feat: Updated replace() to pass id from placeholder element (#193 )	2017-10-11 14:05:10 -07:00
.babelrc	build: Add script to build `dist/icons.json`	2017-07-03 15:53:34 -07:00
.eslintignore	chore: Set up ESLint	2017-07-03 15:53:34 -07:00
.eslintrc.json	chore: Set up ESLint	2017-07-03 15:53:34 -07:00
.gitignore	refactor: Remove website code from `master` branch	2017-07-03 15:53:34 -07:00
.travis.yml	ci: Update .travis.yml	2017-07-03 15:53:34 -07:00
CODE_OF_CONDUCT.md	Add content to CODE_OF_CONDUCT	2017-06-04 00:51:00 -07:00
CONTRIBUTING.md	docs: Add CONTRIBUTING.md	2017-07-18 11:29:56 -07:00
LICENSE	Update LICENSE	2017-02-27 21:31:30 -08:00
Makefile	build: Add script to build `dist/icons` directory	2017-07-03 15:53:34 -07:00
package.json	chore: Add lint script	2017-07-03 15:53:34 -07:00
README.md	feat: Updated replace() to pass id from placeholder element (#193 )	2017-10-11 14:05:10 -07:00
webpack.config.babel.js	build: Build js files with webpack	2017-07-03 15:53:34 -07:00

README.md

Feather

What is Feather?

Feather is a collection of simply beautiful open source icons. Each icon is designed on a 24x24 grid with an emphasis on simplicity, consistency and readability.

feathericons.com

npm install feather-icons

Quick Start
Usage
- Client-side JavaScript
- Node
API Reference
Roadmap
Contributing
Related Projects
License

Quick Start

Start with this CodePen Template to begin prototyping with Feather in the browser.

Or copy and paste the following code snippet into a blank html file.

<!DOCTYPE html>
<html lang="en">
  <title></title>
  <script src="https://unpkg.com/feather-icons/dist/feather.min.js"></script>
  <body>

    <!-- example icon -->
    <i data-feather="circle"></i>

    <script>
      feather.replace()
    </script>
  </body>
</html>

Usage

At its core, Feather is a collection of SVG files. This means that you can use Feather icons in all the same ways you can use SVGs (e.g. img, background-image, inline, object, embed, iframe). Here's a helpful article detailing the many ways SVGs can be used on the web: SVG on the Web – Implementation Options

The following are additional ways you can use Feather.

Client-side JavaScript

1. Install

Note: If you intend to use Feather with a CDN, you can skip this installation step.

Install with npm.

npm install feather-icons --save

Or just copy feather.js or feather.min.js into your project directory. You don't need both feather.js and feather.min.js.

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.

<script src="path/to/dist/feather.min.js"></script>

Or load the script from a CDN provider.

<!-- choose one -->
<script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
<script src="https://unpkg.com/feather-icons/dist/feather.min.js"></script>

After including the script, feather will be available as a global variable.

3. Use

To use an icon on your page, add a data-feather attribute with the icon name to an element.

<i data-feather="circle"></i>

See the complete list of icons at feathericons.com.

4. Replace

Call the feather.replace method.

<script>
  feather.replace()
</script>

All elements that have a data-feather attribute will be replaced with SVG markup corresponding to their data-feather attribute value. See the API Reference for more information about feather.replace().

Node

1. Install

Install with npm.

npm install feather-icons --save

2. Require

var feather = require('feather-icons')

3. Use

feather.icons.circle
// <circle cx="12" cy="12" r="10"></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>'

feather.toSvg('circle', { class: 'my-class', 'stroke-width': 1 })
// '<svg class="feather feather-circle my-class" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle></svg>'

See the API Reference for more information about the available properties and methods of the feather object.

Sprite

Coming soon

API Reference

`feather.icons`

An object with SVG path information for every icon.

Usage

feather.icons.circle
// <circle cx="12" cy="12" r="10"></circle>

feather.icons.clock
// '<circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 15 15"/>'

`feather.toSvg(key, [options])`

Returns an SVG string.

Parameters

Name	Type	Description
`key`	string	Icon name
`options` (optional)	Object	Key-value pairs in the `options` object will be mapped to HTML attributes on the `<svg>` tag (e.g. `{ foo: 'bar' }` maps to `foo="bar"`). All default attributes on the `<svg>` tag can be overridden with the `options` object.

Usage

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>'

feather.toSvg('circle', { 'stroke-width': 1 })
// '<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="1" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle></svg>'

feather.toSvg('circle', { class: 'foo bar' })
// '<svg class="feather feather-circle foo bar" 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>'

View Source

`feather.replace([options])`

Replaces all elements that have a data-feather attribute with SVG markup corresponding to the element's data-feather attribute value.

Parameters

Name	Type	Description
`options` (optional)	Object	Key-value pairs in the `options` object will be mapped to HTML attributes on the `<svg>` tag (e.g. `{ foo: 'bar' }` maps to `foo="bar"`). All default attributes on the `<svg>` tag can be overridden with the `options` object.

Usage

Note: feather.replace() only works in a browser environment.

Simple usage:

<i data-feather="circle"></i>
<!--
<i> will be replaced with:
<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>
-->

<script>
  feather.replace()
</script>

You can pass feather.replace() an options object:

<i data-feather="circle"></i>
<!--
<i> will be replaced with:
<svg class="feather feather-circle foo bar" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle></svg>
-->

<script>
  feather.replace({ class: 'foo bar', 'stroke-width': 1 })
</script>

The id and classes on a placeholder element (i.e. <i>) will be copied to the <svg> tag:

<i id="my-circle-icon" class="foo bar" data-feather="circle"></i>
<!--
<i> will be replaced with:
<svg id="my-circle-icon" class="feather feather-circle foo bar" 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>
-->

<script>
  feather.replace()
</script>

View Source

Roadmap

Write contributing guidelines
Write icon design guidelines
Add usage examples
Add SVG sprite
Add tests
Track code coverage
Use Prettier to enforce consistent code style
Add search/filter functionality to project website
Handle icon aliases
Handle usage of custom icons
Improve SVG accessibility

Contributing

For more info on how to contribute please see the contribution guidelines.

Caught a mistake or want to contribute to the documentation? Edit this page on Github

angular-feather - Feather icons for Angular applications
react-feather - Feather icons as React components
vue-feather-icon - Feather icons as Vue components

License

Feather is licensed under the MIT License.

👋

README.md Unescape Escape

Feather

What is Feather?

Table of Contents

Quick Start

Usage

Client-side JavaScript

1. Install

2. Include

3. Use

4. Replace

Node

1. Install

2. Require

3. Use

Sprite

API Reference

feather.icons

Usage

feather.toSvg(key, [options])

Parameters

Usage

feather.replace([options])

Parameters

Usage

Roadmap

Contributing

Related Projects

License

README.md

`feather.icons`

`feather.toSvg(key, [options])`

`feather.replace([options])`