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

docs: Change cdnjs badge style
docs: Add CDNJS version badge in README.md (#196 )
2023-08-10 21:13:24 +03:00 · 2017-10-11 14:05:10 -07:00 · 2017-10-08 22:53:05 -07:00 · 2017-10-08 22:52:04 -07:00 · 2017-09-26 10:51:47 -07:00 · 2017-09-22 19:55:30 -07:00
4 changed files with 24 additions and 11 deletions
--- a/README.md
+++ b/README.md
@ -4,6 +4,7 @@
 [![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?

@ -40,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 -->
@ -84,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.
@ -226,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>
@ -254,7 +257,7 @@ 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

--- a/examples/index.html
+++ b/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>

@ -15,4 +21,4 @@
    feather.replace()
  </script>
 </body>
-</html>
+</html>
--- a/src/replace.js
+++ b/src/replace.js
@ -42,11 +42,13 @@ function replaceElement(element, options) {
  }

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

--- a/src/to-svg.js
+++ b/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 => {
-    attributes.push(`${key}="${options[key]}"`);
+    if (options[key]) {
+      attributes.push(`${key}="${options[key]}"`);
+    }
  });

  return attributes.join(' ');
Author	SHA1	Message	Date
Brad Bohen	e80f80524a	feat: Updated replace() to pass id from placeholder element (#193 )	2017-10-11 14:05:10 -07:00
Cole Bemis	b7d22291f1	docs: Change cdnjs badge style	2017-10-08 22:53:05 -07:00
LboAnn	5e62cab89a	docs: Add CDNJS version badge in README.md (#196 ) The badge shows the latest lib version on CDNJS and gives a link of it.	2017-10-08 22:52:04 -07:00
Lukas Drgon	5dd498cc61	docs: Add jsDelivr link	2017-09-26 10:51:47 -07:00
Cole Bemis	29e96b1109	docs: Add accessibility to roadmap	2017-09-22 19:55:30 -07:00
Alberto Chiusole	bc83bcc74b	docs: Add a clarification inside the example webpage. (#180 ) As discussed in issue #176, the package has to be built using $ npm run build or $ npm run all before being able to use it.	2017-09-06 08:30:09 -07:00
Cole Bemis	950ac1c2d0	Update README.md	2017-08-26 11:36:47 -07:00
Cole Bemis	d2ea75622b	docs: Update CDN link	2017-08-10 11:37:46 -07:00