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.

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
+...
+```

README.md

@@ -1,10 +1,20 @@
 # Feather
 
+[![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)
+
 ## What is Feather?
 
-Feather is collection of **simply beautiful open source icons**. Each icon is designed on a 24x24 grid with an emphasis on simplicity, consistency and legibility.
+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](https://feathericons.com)
+**[feathericons.com](https://feathericons.com)**
+
+```
+npm install feather-icons
+```
 
 ## Table of Contents
 
@@ -31,7 +41,7 @@ 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"></script>
+  <script src="https://unpkg.com/feather-icons/dist/feather.min.js"></script>
   <body>
 
     <!-- example icon -->
@@ -75,7 +85,9 @@ Include `feather.js` or `feather.min.js` with a `<script>` tag. These files are
 Or load the script from a CDN provider.
 
 ```html
-<script src="https://unpkg.com/feather-icons"></script>
+<!-- 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.
@@ -217,13 +229,13 @@ You can pass `feather.replace()` an `options` object:
 </script>
 ```
 
-All classes on a placeholder element (i.e. `<i>`) will be copied to the `<svg>` tag:
+The id and classes on a placeholder element (i.e. `<i>`) will be copied to the `<svg>` tag:
 
 ```html
-<i class="foo bar" data-feather="circle"></i>
+<i id="my-circle-icon" class="foo bar" 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="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle></svg>
+<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>
@@ -235,7 +247,7 @@ All classes on a placeholder element (i.e. `<i>`) will be copied to the `<svg>`
 
 ## Roadmap
 
-- [ ] Write contributing guidelines
+- [x] Write contributing guidelines
 - [ ] Write icon design guidelines
 - [ ] Add usage examples
 - [ ] Add SVG sprite
@@ -245,11 +257,11 @@ All classes on a placeholder element (i.e. `<i>`) will be copied to the `<svg>`
 - [ ] Add search/filter functionality to project website
 - [ ] Handle icon aliases
 - [ ] Handle usage of custom icons
-- [ ] Publish to Yarn registry
+- [ ] Improve SVG accessibility
 
 ## Contributing
 
-*Contributing guidelines coming soon*
+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)
 

examples/index.html

@@ -3,7 +3,13 @@
 <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>
 

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/crop.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M6.13,1,6,16a2,2,0,0,0,2,2H23" fill="none" stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/><path d="M1,6.13,16,6a2,2,0,0,1,2,2V23" fill="none" stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/></svg>

icons/help-circle.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M9.09,9a3,3,0,0,1,5.83,1c0,2-3,3-3,3" fill="none" stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/><circle cx="12" cy="12" r="10" fill="none" stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/><line x1="12" y1="17" x2="12" y2="17" fill="none" stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/></svg>

icons/italic.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><line x1="19" y1="4" x2="10" y2="4" fill="none" stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/><line x1="14" y1="20" x2="5" y2="20" fill="none" stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/><line x1="15" y1="4" x2="9" y2="20" fill="none" stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/></svg>

icons/shopping-cart.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><circle cx="8" cy="21" r="2" fill="none" stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/><circle cx="20" cy="21" r="2" fill="none" stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/><path d="M5.67,6H23l-1.68,8.39a2,2,0,0,1-2,1.61H8.75a2,2,0,0,1-2-1.74L5.23,2.74A2,2,0,0,0,3.25,1H1" fill="none" stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/></svg>

icons/underline.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M6,3v7a6,6,0,0,0,6,6h0a6,6,0,0,0,6-6V3" fill="none" stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/><line x1="4" y1="21" x2="20" y2="21" fill="none" stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/></svg>

src/replace.js

@@ -41,12 +41,14 @@ function replaceElement(element, options) {
     return;
   }
 
-  const elementClassAttr = element.getAttribute('class');
+  const elementClassAttr = element.getAttribute('class') || '';
+  const elementIdAttr = element.getAttribute('id');
   const classNames = (
     options.class ? `${options.class} ${elementClassAttr}` : elementClassAttr
   );
 
-  const svgString = toSvg(key, Object.assign({}, options, { class: classNames }));
+  const svgOptions = Object.assign({}, options, { class: classNames, id: elementIdAttr });
+  const svgString = toSvg(key, svgOptions);
   const svgDocument = new DOMParser().parseFromString(svgString, 'image/svg+xml');
   const svgElement = svgDocument.querySelector('svg');
 

src/to-svg.js

@@ -35,7 +35,7 @@ export default function toSvg(key, options = {}) {
 
   combinedOptions.class = addDefaultClassNames(combinedOptions.class, key);
 
-  const attributes = optionsToAtrributes(combinedOptions);
+  const attributes = optionsToAttributes(combinedOptions);
 
   return `<svg ${attributes}>${icons[key]}</svg>`;
 }
@@ -64,11 +64,13 @@ function addDefaultClassNames(classNames, key) {
  * @param {Object} options
  * @returns {string}
  */
-function optionsToAtrributes(options) {
+function optionsToAttributes(options) {
   const attributes = [];
 
   Object.keys(options).forEach(key => {
+    if (options[key]) {
       attributes.push(`${key}="${options[key]}"`);
+    }
   });
 
   return attributes.join(' ');