feat: Updated replace() to pass id from placeholder element (#193)

The badge shows the latest lib version on CDNJS and gives a link of it.

.babelrc

@@ -0,0 +1,5 @@
+{
+  "presets": [
+    "es2015"
+  ]
+}

.eslintignore

@@ -0,0 +1 @@
+dist

.eslintrc.json

@@ -0,0 +1,12 @@
+{
+  "extends": "airbnb-base",
+  "plugins": [
+    "import"
+  ],
+  "rules": {
+    "no-use-before-define": "off",
+    "arrow-parens": ["error", "as-needed"],
+    "no-shadow": "off",
+    "no-console": ["error", { "allow": ["warn", "error"] }]
+  }
+}

.gitignore

@@ -1,7 +1,5 @@
 .DS_Store
 node_modules
-_site
-*.zip
-manifest.json
+dist
 sandbox
 stash

.travis.yml

@@ -0,0 +1,13 @@
+language: node_js
+cache:
+  directories:
+    - node_modules
+notifications:
+  email: false
+node_js: 6
+before_script:
+  - npm prune
+script:
+  - npm run all
+after_success:
+  - npm run semantic-release

CHANGELOG.md

@@ -1,238 +0,0 @@
-# Change Log
-All notable changes to this project will be documented in this file.
-
-The format is based on [Keep a Changelog](http://keepachangelog.com/)
-and this project adheres to [Semantic Versioning](http://semver.org/).
-
-## v2.1.0 (2017-05-30)
-
-### Added
-
-- Add icon categories (Thanks @wappsdotgr)
-- Display icon names to allow for <kbd>⌘</kbd> + <kbd>F</kbd> search
-
-<details>
-  <summary>Add 37 icons</summary>
-
-  - `arrow-down-left`
-  - `arrow-down-right`
-  - `arrow-up-left`
-  - `arrow-up-right`
-  - `battery-charging`
-  - `cast`
-  - `chevrons-down`
-  - `chevrons-left`
-  - `chevrons-right`
-  - `chevrons-up`
-  - `cloud-drizzle`
-  - `cloud-lightning`
-  - `cloud-rain`
-  - `cloud-snow`
-  - `codepen`
-  - `compass`
-  - `edit-2`
-  - `edit-3`
-  - `link-2`
-  - `list`
-  - `log-in`
-  - `log-out`
-  - `navigation-2`
-  - `package`
-  - `repeat`
-  - `share`
-  - `slack`
-  - `speaker`
-  - `trending-down`
-  - `trending-up`
-  - `type`
-  - `user-check`
-  - `user-x`
-  - `voicemail`
-  - `volume`
-  - `volume-1`
-  - `volume-2`
-</details>
-
-### Changed
-
-- Redesign project site
-
-<details>
-  <summary>Change 9 icons</summary>
-
-  - `bar-chart`
-  - `bar-chart-2`
-  - `droplet`
-  - `grid`
-  - `twitter`
-  - `user-minus`
-  - `user-plus`
-  - `user`
-  - `volume-x`
-</details>
-
-## v2.0.0 (2017-05-23)
-
-### Added
-<details>
- <summary>Add 63 icons</summary>
-
-  - `activity`
-  - `alert-circle`
-  - `alert-octagon`
-  - `alert-triangle`
-  - `aperture`
-  - `at-sign`
-  - `award`
-  - `bell-off`
-  - `bluetooth`
-  - `calendar`
-  - `camera-off`
-  - `chevron-down`
-  - `chevron-left`
-  - `chevron-right`
-  - `chevron-up`
-  - `chrome`
-  - `circle`
-  - `cloud-off`
-  - `comment-circle`
-  - `cpu`
-  - `edit`
-  - `eye-off`
-  - `facebook`
-  - `feather`
-  - `female`
-  - `filter`
-  - `hash`
-  - `headphones`
-  - `home`
-  - `info`
-  - `instagram`
-  - `male`
-  - `map-pin`
-  - `mic-off`
-  - `more-vertical`
-  - `music`
-  - `octagon`
-  - `phone`
-  - `phone-call`
-  - `phone-forwarded`
-  - `phone-incoming`
-  - `phone-missed`
-  - `phone-off`
-  - `phone-outgoing`
-  - `pocket`
-  - `radio`
-  - `refresh-ccw`
-  - `rotate-ccw`
-  - `scissors`
-  - `square`
-  - `sunrise`
-  - `sunset`
-  - `thumbs-down`
-  - `thumbs-up`
-  - `toggle-right`
-  - `trash-2`
-  - `triangle`
-  - `twitter`
-  - `user-minus`
-  - `user-plus`
-  - `video-off`
-  - `wind`
-  - `zap`
-</details>
-
-### Changed
-
-- Redesign project website
-- Use SVG `stroke` instead of `fill`. Read more about the benefits of SVG `stroke`:
-  - [SVG Stroke FTW!](http://danklammer.com/articles/svg-stroke-ftw/)
-
-<details>
-  <summary>Change 66 icons</summary>
-
-  - `align-center`
-  - `anchor`
-  - `arrow-down`
-  - `arrow-left`
-  - `arrow-right`
-  - `arrow-up`
-  - `bar-chart`
-  - `bar-chart-2`
-  - `battery`
-  - `bell`
-  - `book`
-  - `bookmark`
-  - `box`
-  - `briefcase`
-  - `camera`
-  - `check`
-  - `check-circle`
-  - `check-square`
-  - `clipboard`
-  - `cloud`
-  - `comment-square`
-  - `download`
-  - `download-cloud`
-  - `droplet`
-  - `external-link`
-  - `fast-forward`
-  - `file`
-  - `flag`
-  - `folder`
-  - `heart`
-  - `image`
-  - `inbox`
-  - `layers`
-  - `layout`
-  - `lock`
-  - `mail`
-  - `maximize`
-  - `maximize-2`
-  - `minimize`
-  - `minimize-2`
-  - `minus`
-  - `moon`
-  - `move`
-  - `pause`
-  - `play`
-  - `plus`
-  - `printer`
-  - `search`
-  - `settings`
-  - `share`
-  - `shuffle`
-  - `skip-back`
-  - `skip-forward`
-  - `star`
-  - `rewind`
-  - `tag`
-  - `unlock`
-  - `upload`
-  - `upload-cloud`
-  - `user`
-  - `video`
-  - `watch`
-  - `wifi`
-  - `x`
-  - `zoom-in`
-  - `zoom-out`
-</details>
-
-### Removed
-- Remove PSD, CSH and Webfont formats in favor of SVG. Read more about the benefits of SVG for icons:
-  - [Inline SVG vs Icon Fonts [CAGEMATCH]](https://css-tricks.com/icon-fonts-vs-svg/)
-  - [Seriously, Don’t Use Icon Fonts](https://cloudfour.com/thinks/seriously-dont-use-icon-fonts/)
-  - [Ten reasons we switched from icon font to SVG](http://ianfeather.co.uk/ten-reasons-we-switched-from-an-icon-font-to-svg/)
-
-## v1.1.0 (2014-04-27)
-
-### Added
-- Add 30 new icons
-- Add CSH, SVG and Webfont formats
-
-### Changed
-- Change all PSD icon layers to vector shapes
-
-## v1.0.0 (2013-11-27)
-- Initial release

CODE_OF_CONDUCT.md

@@ -0,0 +1,74 @@
+# Contributor Covenant Code of Conduct
+
+## Our Pledge
+
+In the interest of fostering an open and welcoming environment, we as
+contributors and maintainers pledge to making participation in our project and
+our community a harassment-free experience for everyone, regardless of age, body
+size, disability, ethnicity, gender identity and expression, level of experience,
+nationality, personal appearance, race, religion, or sexual identity and
+orientation.
+
+## Our Standards
+
+Examples of behavior that contributes to creating a positive environment
+include:
+
+* Using welcoming and inclusive language
+* Being respectful of differing viewpoints and experiences
+* Gracefully accepting constructive criticism
+* Focusing on what is best for the community
+* Showing empathy towards other community members
+
+Examples of unacceptable behavior by participants include:
+
+* The use of sexualized language or imagery and unwelcome sexual attention or
+advances
+* Trolling, insulting/derogatory comments, and personal or political attacks
+* Public or private harassment
+* Publishing others' private information, such as a physical or electronic
+  address, without explicit permission
+* Other conduct which could reasonably be considered inappropriate in a
+  professional setting
+
+## Our Responsibilities
+
+Project maintainers are responsible for clarifying the standards of acceptable
+behavior and are expected to take appropriate and fair corrective action in
+response to any instances of unacceptable behavior.
+
+Project maintainers have the right and responsibility to remove, edit, or
+reject comments, commits, code, wiki edits, issues, and other contributions
+that are not aligned to this Code of Conduct, or to ban temporarily or
+permanently any contributor for other behaviors that they deem inappropriate,
+threatening, offensive, or harmful.
+
+## Scope
+
+This Code of Conduct applies both within project spaces and in public spaces
+when an individual is representing the project or its community. Examples of
+representing a project or community include using an official project e-mail
+address, posting via an official social media account, or acting as an appointed
+representative at an online or offline event. Representation of a project may be
+further defined and clarified by project maintainers.
+
+## Enforcement
+
+Instances of abusive, harassing, or otherwise unacceptable behavior may be
+reported by contacting the project team at cole@colebemis.com. All
+complaints will be reviewed and investigated and will result in a response that
+is deemed necessary and appropriate to the circumstances. The project team is
+obligated to maintain confidentiality with regard to the reporter of an incident.
+Further details of specific enforcement policies may be posted separately.
+
+Project maintainers who do not follow or enforce the Code of Conduct in good
+faith may face temporary or permanent repercussions as determined by other
+members of the project's leadership.
+
+## Attribution
+
+This Code of Conduct is adapted from the [Contributor Covenant][homepage], version 1.4,
+available at [http://contributor-covenant.org/version/1/4][version]
+
+[homepage]: http://contributor-covenant.org
+[version]: http://contributor-covenant.org/version/1/4/

CONTRIBUTING.md

@@ -0,0 +1,60 @@
+# Contribution Guidelines
+
+:+1::tada: First off, thanks for taking the time to contribute! :tada::+1:
+
+The following is a set of guidelines for contributing to Feather. Feel free to propose changes to this document in a pull request.
+
+## Pull Requests
+
+> **Note:** At the moment we are not accepting pull requests containing _**icons**_. The best way to contribute an icon is to create an issue with a screenshot and link to an SVG of your icon.
+
+Pull requests for new features, bug fixes, etc. are often appreciated. Please checkout the [project roadmap](https://github.com/colebemis/feather#roadmap) and raise an issue to discuss any of the items on the list.
+
+**Working on your first Pull Request?** You can learn how from this *free* series
+[How to Contribute to an Open Source Project on GitHub](https://egghead.io/series/how-to-contribute-to-an-open-source-project-on-github)
+
+Guidelines for pull requests:
+- __Make your commit messages as descriptive as possible.__ Include as much information as you can. Explain anything that the file diffs themselves won’t make apparent.
+- __Document your pull request__. Explain your fix, link to the relevant issue, add screenshots when adding new icons.
+- __Make sure the target of your pull request is the relevant branch__. Most of bugfix or new feature should go to the `master` branch.
+- __Include only related work__. If your pull request has unrelated commit, it won't be accepted.
+
+## Icon Requests
+
+Before creating an icon request, please search to see if someone has requested the icon already. If there is an open request, please add a :+1:.
+
+If the icon has not already been requested, [create an issue](https://github.com/colebemis/feather/issues/new?title=Icon%20Request:) with a title of `Icon request: <icon name>` and add as much information as possible.
+
+## Bug Reports
+
+Before reporting an issue, please search to see if someone has filed a similar issue before. If there is already an open issue, please add a :+1: and/or leave a comment with additional information.
+
+When creating a new issue make sure to include the following:
+- Version of `Feather` in use. Are you running from source/master? Are you using a released build? Which release?
+- Your environment. What is your operating system? 32 or 64 bits?
+- Step to reproduce. Even if the step is only one line change, __include it!__ Include the actual result and what you expected.
+- Any message or error you get in the console, if you do.
+- A screenshot of any visual bug.
+
+Here is what a great bug report would look like:
+```
+Check not rendering properly
+
+Version: Release v3.1.0
+Downloaded from: Import using webpack
+OS: Mac OSX
+
+How to reproduce:
+ - Import `check` icon
+ - Add to a React component/view
+ - Run the react app
+ - Notice that the `check` isn't rendering correctly which seems a encoding problem
+Actual result:
+ - Import `check` icon
+ - Add to a React component/view
+ - Run the react app
+ - Check is displayed with correct encoding (e.g UTF-8)
+
+No console output
+...
+```

Gemfile

@@ -1,4 +0,0 @@
-# frozen_string_literal: true
-source "https://rubygems.org"
-
-gem "jekyll"

Gemfile.lock

@@ -1,47 +0,0 @@
-GEM
-  remote: https://rubygems.org/
-  specs:
-    addressable (2.5.1)
-      public_suffix (~> 2.0, >= 2.0.2)
-    colorator (1.1.0)
-    ffi (1.9.18)
-    forwardable-extended (2.6.0)
-    jekyll (3.4.3)
-      addressable (~> 2.4)
-      colorator (~> 1.0)
-      jekyll-sass-converter (~> 1.0)
-      jekyll-watch (~> 1.1)
-      kramdown (~> 1.3)
-      liquid (~> 3.0)
-      mercenary (~> 0.3.3)
-      pathutil (~> 0.9)
-      rouge (~> 1.7)
-      safe_yaml (~> 1.0)
-    jekyll-sass-converter (1.5.0)
-      sass (~> 3.4)
-    jekyll-watch (1.5.0)
-      listen (~> 3.0, < 3.1)
-    kramdown (1.13.2)
-    liquid (3.0.6)
-    listen (3.0.8)
-      rb-fsevent (~> 0.9, >= 0.9.4)
-      rb-inotify (~> 0.9, >= 0.9.7)
-    mercenary (0.3.6)
-    pathutil (0.14.0)
-      forwardable-extended (~> 2.6)
-    public_suffix (2.0.5)
-    rb-fsevent (0.9.8)
-    rb-inotify (0.9.8)
-      ffi (>= 0.5.0)
-    rouge (1.11.1)
-    safe_yaml (1.0.4)
-    sass (3.4.23)
-
-PLATFORMS
-  ruby
-
-DEPENDENCIES
-  jekyll
-
-BUNDLED WITH
-   1.14.5

Makefile

@@ -0,0 +1,31 @@
+src_files := src/*.js
+src_dir   := src
+
+.PHONY: all lint build
+
+all: lint build
+
+lint: dist/icons.json
+	./node_modules/.bin/eslint .
+
+build: dist/feather.js dist/feather.min.js dist/icons
+
+node_modules:
+	npm install
+
+dist:
+	mkdir dist
+
+dist/icons.json: node_modules dist icons icons/*.svg
+	./node_modules/.bin/babel-node bin/build-json.js
+
+dist/feather.js: dist/icons.json $(src_dir) $(src_files)
+	./node_modules/.bin/webpack --output-filename feather.js
+
+dist/feather.min.js: dist/icons.json $(src_dir) $(src_files)
+	./node_modules/.bin/webpack --output-filename feather.min.js -p
+
+dist/icons: dist/icons.json
+	rm -rf dist/icons
+	mkdir -p dist/icons
+	./node_modules/.bin/babel-node bin/build-svgs.js

README.md

@@ -1,16 +1,278 @@
-[Feather](https://feather.netlify.com)
-===
+# Feather
 
-### Simply beautiful open source icons
+[![Travis branch](https://img.shields.io/travis/colebemis/feather/master.svg?style=flat-square)](https://travis-ci.org/colebemis/feather)
+[![npm](https://img.shields.io/npm/v/feather-icons.svg?style=flat-square)](https://www.npmjs.com/package/feather-icons)
+[![npm](https://img.shields.io/npm/dm/feather-icons.svg?style=flat-square)](https://npm-stat.com/charts.html?package=feather-icons&from=2017-06-01)
+[![Code Climate](https://img.shields.io/codeclimate/github/colebemis/feather.svg?style=flat-square)](https://codeclimate.com/github/colebemis/feather)
+[![CDNJS version](https://img.shields.io/cdnjs/v/feather-icons.svg?style=flat-square)](https://cdnjs.com/libraries/feather-icons)
 
-Designed on a 24x24 grid with an emphasis on functionality, consistency and simplicity.
+## What is Feather?
 
-Change Log
----
+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.
 
-See [CHANGELOG.md](https://github.com/colebemis/feather/blob/gh-pages/CHANGELOG.md)
+**[feathericons.com](https://feathericons.com)**
 
-License
----
+```
+npm install feather-icons
+```
 
-Feather is released under the [MIT License](http://opensource.org/licenses/MIT). In short, you are free to use Feather in any personal, open-source or commercial work. Attribution is optional but appreciated.
+## Table of Contents
+
+* [Quick Start](#quick-start)
+* [Usage](#usage)
+  * [Client-side JavaScript](#client-side-javascript)
+  * [Node](#node)
+* [API Reference](#api-reference)
+	* [`feather.icons`](#feathericons)
+	* [`feather.toSvg()`](#feathertosvgkey-options)
+	* [`feather.replace()`](#featherreplaceoptions)
+* [Roadmap](#roadmap)
+* [Contributing](#contributing)
+* [Related Projects](#related-projects)
+* [License](#license)
+
+## Quick Start
+
+Start with this [CodePen Template](https://codepen.io/pen?template=WOJZdM) to begin prototyping with Feather in the browser.
+
+Or copy and paste the following code snippet into a blank `html` file.
+
+```html
+<!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](https://svgontheweb.com/#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](https://svgontheweb.com/#implementation)
+
+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](https://docs.npmjs.com/getting-started/what-is-npm).
+
+```
+npm install feather-icons --save
+```
+
+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`.
+
+#### 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.
+
+```html
+<script src="path/to/dist/feather.min.js"></script>
+```
+
+Or load the script from a CDN provider.
+
+```html
+<!-- 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.
+
+```html
+<i data-feather="circle"></i>
+```
+
+See the complete list of icons at [feathericons.com](https://feathericons.com).
+
+#### 4. Replace
+
+Call the `feather.replace` method.
+
+```html
+<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](#api-reference) for more information about `feather.replace()`.
+
+### Node
+#### 1. Install
+
+Install with [npm](https://docs.npmjs.com/getting-started/what-is-npm).
+
+```
+npm install feather-icons --save
+```
+
+#### 2. Require
+
+```javascript
+var feather = require('feather-icons')
+```
+
+#### 3. Use
+```javascript
+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](#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
+
+```javascript
+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
+
+```javascript
+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](https://github.com/colebemis/feather/blob/master/src/to-svg.js)
+
+### `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:
+```html
+<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:
+```html
+<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:
+
+```html
+<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](https://github.com/colebemis/feather/blob/master/src/replace.js)
+
+## Roadmap
+
+- [x] 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](https://github.com/colebemis/feather/blob/master/CONTRIBUTING.md).
+
+Caught a mistake or want to contribute to the documentation? [Edit this page on Github](https://github.com/colebemis/feather/blob/master/README.md)
+
+## Related Projects
+
+ - [angular-feather](https://github.com/michaelbazos/angular-feather) - Feather icons for Angular applications
+ - [react-feather](https://github.com/carmelopullara/react-feather) - Feather icons as React components
+ - [vue-feather-icon](https://github.com/mage3k/vue-feather-icon) - Feather icons as Vue components
+
+## License
+
+Feather is licensed under the [MIT License](https://github.com/colebemis/feather/blob/master/LICENSE).
+
+[👋](mailto:cole@colebemis.com)

_config.yml

@@ -1,10 +0,0 @@
-data_dir: .
-exclude:
-  - README.md
-  - CHANGELOG.md
-  - ISSUE_TEMPLATE.md
-  - LICENSE
-  - node_modules
-  - bin
-  - sandbox
-  - stash

_includes/category.html

@@ -1,11 +0,0 @@
-<div class="pv4">
-    <h2 class="mt0 mb4 f6 ttu tracked normal">{{ include.category | replace: '-', ' '}}</h2>
-    <ul class="icon-grid mv0 pl0 list">
-      {% capture category_path %}icons/{{ include.category }}{% endcapture %}
-      {% for icon in site.static_files %}
-        {% if icon.path contains category_path  %}
-          {% include icon.html icon=icon %}
-        {% endif %}
-      {% endfor %}
-    </ul>
-  </div>

_includes/footer.html

@@ -1,13 +0,0 @@
-<footer class="flex flex-column items-center pt5-ns pb5">
-  <ul class="flex flex-column flex-row-l justify-center w-80 mv0 pl0 list">
-    {% for link in include.links %}
-    <li class="mh3-l pv3 pv0-l f5 bb b--black-10 bn-l">
-      <a class="lh-copy color-inherit no-underline dim" href="{{ link.url }}" target="_blank">{{ link.title }}</a>
-    </li>
-    {% endfor %}
-  </ul>
-
-  <p class="mt5 mb2 lh-copy black-90 dim">
-    <a class="no-underline color-inherit" href="http://colebemis.com" target="_blank">Made with &lt;3 by Cole Bemis</a>
-   </p>
-</footer>

_includes/header.html

@@ -1,11 +0,0 @@
-<header class="pv3 bb b--black-10">
-  <div class="w-80 center flex justify-between items-center">
-    <h1 class="mv0 normal f3 lh-copy black-90">Feather <span class="f5 black-60">v{{ site.data.package.version }}</span></h1>
-
-    <ul class="list mv0 pl0 flex">
-      <li class="dn dib-ns"><a class="no-underline color-inherit dim" href="https://twitter.com/intent/tweet?text=Feather%20-%20Simply%20beautiful%20open%20source%20icons%20by%20%40colebemis%20feather.netlify.com" target="_blank">Tweet</a></li>
-      <li class="dn dib-ns ml4"><a class="no-underline color-inherit dim" href="https://www.paypal.com/cgi-bin/webscr?cmd=_donations&business=G6CPFZ6PQRZW8&lc=US&item_name=Feather&currency_code=USD&bn=PP%2dDonationsBF%3abtn_donateCC_LG%2egif%3aNonHosted" target="_blank">Donate</a></li>
-      <li class="ml4"><a class="no-underline color-inherit dim" href="https://github.com/colebemis/feather" target="_blank">GitHub</a></li>
-    </ul>
-  </div>
-</header>

_includes/hero.html

@@ -1,10 +0,0 @@
-<div class="flex flex-column items-center w-80 mw8 pt5 pt6-ns center">
-  <h2 class="mt0 mb4 f2 fw3 tc lh-title black-90">Simply beautiful open source icons</h2>
-  <a
-    class="button white bg-accent bg-animate hover-bg-accent-darker br2"
-    href="feather-{{ site.data.package.version }}.zip"
-    download
-    onclick="ga('send', 'event', 'download', 'click', 'all');">
-    Download
-  </a>
-</div>

_includes/icon.html

@@ -1,10 +0,0 @@
-<li>
-  <a
-    href="{{ include.icon.path }}"
-    class="flex flex-row items-center dib pa3 br2 no-underline dark-gray bg-near-white bg-animate hover-bg-light-gray"
-    download
-    onclick="ga('send', 'event', 'download', 'click', '{{ include.icon.basename }}');">
-    <span class="svg flex-none lh-none">{% include_relative {{ include.icon.path }} %}</span>
-    <span class="ml3 lh-copy f6 tc black-60 ellipse">{{ include.icon.basename }}</span>
-  </a>
-</li>

_includes/icons.html

@@ -1,10 +0,0 @@
-<div class="w-80 center pv5">
-  {% include category.html category="core" %}
-  {% include category.html category="media-controls" %}
-  {% include category.html category="communication" %}
-  {% include category.html category="photo-and-video" %}
-  {% include category.html category="location" %}
-  {% include category.html category="weather" %}
-  {% include category.html category="arrows" %}
-  {% include category.html category="logos" %}
-</div>

bin/build-json.js

@@ -0,0 +1,71 @@
+/**
+ * @file Builds `icons.json` from `icons` directory.
+ */
+
+/* eslint-disable import/no-extraneous-dependencies */
+import fs from 'fs';
+import path from 'path';
+import RSVP from 'rsvp';
+import Svgo from 'svgo';
+import parse5 from 'parse5';
+
+const svgFiles = fs.readdirSync(path.resolve(__dirname, '../icons'))
+  .filter(file => path.extname(file) === '.svg');
+
+buildIconsObject(svgFiles)
+  .then(icons => {
+    fs.writeFileSync(
+      path.resolve(__dirname, '../dist/icons.json'),
+      JSON.stringify(icons),
+    );
+  });
+
+/**
+ * Build an icons object in the format: `{ <icon name>: <svg content> }`.
+ * @param {string[]} svgFiles - A list of file names.
+ * @returns {RSVP.Promise<Object>}
+ */
+function buildIconsObject(svgFiles) {
+  const icons = {};
+
+  svgFiles.forEach(svgFile => {
+    const svg = fs.readFileSync(path.resolve(__dirname, '../icons', svgFile), 'utf8');
+    const key = path.basename(svgFile, '.svg');
+
+    icons[key] = optimizeSvg(svg)
+      .then(optimizedSvg => getSvgContent(optimizedSvg));
+  });
+
+  return RSVP.hash(icons);
+}
+
+/**
+ * Optimize SVG with `svgo`.
+ * @param {string} svg - An SVG string.
+ * @returns {RSVP.Promise<string>}
+ */
+function optimizeSvg(svg) {
+  // configure svgo
+  const svgo = new Svgo({
+    plugins: [
+      { convertShapeToPath: false },
+      { mergePaths: false },
+      { removeAttrs: { attrs: '(fill|stroke.*)' } },
+    ],
+  });
+
+  return new RSVP.Promise(resolve => {
+    svgo.optimize(svg, ({ data }) => resolve(data));
+  });
+}
+
+/**
+ * Get content between opening and closing `<svg>` tags.
+ * @param {string} svg - An SVG string.
+ * @returns {string}
+ */
+function getSvgContent(svg) {
+  const fragment = parse5.parseFragment(svg);
+  const content = parse5.serialize(fragment.childNodes[0]);
+  return content;
+}

bin/build-svgs.js

@@ -0,0 +1,13 @@
+/**
+ * @file Builds `dist/icons` directory.
+ */
+
+import fs from 'fs';
+import path from 'path';
+import { icons, toSvg } from '../src';
+
+Object.keys(icons).forEach(icon => {
+  const svg = toSvg(icon);
+
+  fs.writeFileSync(path.resolve(__dirname, `../dist/icons/${icon}.svg`), svg);
+});

bin/build-zip.sh

@@ -1,7 +0,0 @@
-#!/usr/bin/env bash
-
-# find and store current version number
-version=$(grep '"version"' package.json | cut -d '"' -f4)
-
-# compress 'icons' directory into feather-[version].zip
-zip -r feather-${version}.zip ./icons/

examples/index.html

@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <title>Feather</title>
+  <!--
+       In order to build the feather minimized js run
+       $ npm run build
+       in the cloned repository, or use the already built package available on unpkg.com.
+  -->
+  <script src="../dist/feather.min.js"></script>
+  <!-- <script src="https://unpkg.com/feather-icons/dist/feather.min.js"></script> -->
+</head>
+<body>
+
+  <i data-feather="eye"></i>
+  <i data-feather="heart"></i>
+  <i data-feather="feather"></i>
+
+  <script>
+    feather.replace()
+  </script>
+</body>
+</html>

icons/bold.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M6,4h8a4,4,0,0,1,4,4h0a4,4,0,0,1-4,4H6Z" fill="none" stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/><path d="M6,12h9a4,4,0,0,1,4,4h0a4,4,0,0,1-4,4H6Z" fill="none" stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/></svg>

icons/copy.svg

@@ -1,4 +1,4 @@
 <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
-    <rect x="9" y="2" width="13" height="13" rx="2" ry="2" fill="none" stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
-    <path d="M9 9H4a2 2 0 0 0-2 2v9a2 2 0 0 0 2 2h9a2 2 0 0 0 2-2v-5" fill="none" stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
+    <rect x="9" y="9" width="13" height="13" rx="2" ry="2" fill="none" stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
+    <path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1" fill="none" stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
 </svg>

icons/core/pie-chart.svg

@@ -1,4 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-    <circle cx="12" cy="12" r="10"/>
-    <polyline points="12 2 12 12 22 12"/>
-</svg>

icons/core/wifi.svg

@@ -1,4 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-    <path d="M5 11.55a11 11 0 0 1 14.08 0M1.41 8a16 16 0 0 1 21.17 0M8.52 15.11a6 6 0 0 1 6.95 0"/>
-    <line x1="12" y1="19" x2="12" y2="19"/>
-</svg>

icons/corner-down-left.svg

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
+    <polyline points="9 10 4 15 9 20" fill="none" stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
+    <path d="M20 4v7a4 4 0 0 1-4 4H4" fill="none" stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
+</svg>

icons/corner-down-right.svg

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
+    <polyline points="15 10 20 15 15 20" fill="none" stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
+    <path d="M4 4v7a4 4 0 0 0 4 4h12" fill="none" stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
+</svg>

icons/corner-left-down.svg

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
+    <polyline points="14 15 9 20 4 15" fill="none" stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
+    <path d="M20 4h-7a4 4 0 0 0-4 4v12" fill="none" stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
+</svg>

icons/corner-left-up.svg

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
+    <polyline points="14 9 9 4 4 9" fill="none" stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
+    <path d="M20 20h-7a4 4 0 0 1-4-4V4" fill="none" stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
+</svg>

icons/corner-right-down.svg

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
+    <polyline points="10 15 15 20 20 15" fill="none" stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
+    <path d="M4 4h7a4 4 0 0 1 4 4v12" fill="none" stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
+</svg>

icons/corner-right-up.svg

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
+    <polyline points="10 9 15 4 20 9" fill="none" stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
+    <path d="M4 20h7a4 4 0 0 0 4-4V4" fill="none" stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
+</svg>

icons/corner-up-left.svg

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
+    <polyline points="9 14 4 9 9 4" fill="none" stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
+    <path d="M20 20v-7a4 4 0 0 0-4-4H4" fill="none" stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
+</svg>

icons/corner-up-right.svg

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
+    <polyline points="15 14 20 9 15 4" fill="none" stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
+    <path d="M4 20v-7a4 4 0 0 1 4-4h12" fill="none" stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
+</svg>

icons/credit-card.svg

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
+    <rect x="1" y="4" width="22" height="16" rx="2" ry="2" fill="none" stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
+    <line x1="1" y1="10" x2="23" y2="10" fill="none" stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
+</svg>