feat: Update API

BREAKING CHANGE: 

Each icon in the `feather.icons` object is now an `Icon` object with a `name`, `contents`, `tags` and `attrs` property.
```js
/* BEFORE */
feather.icons.x
// '<line ... /><line ... />'

/* AFTER */
feather.icons.x
// {
//    name: 'x',
//    contents: '<line ... /><line ... />`,
//    tags: ['cancel', 'close', 'delete', 'remove'],
//    attrs: {
//      class: 'feather feather-x',
//      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',
//    }
// }
```

`feather.toSvg()` has been deprecated in favor of `feather.icons[name].toSvg()`:
```js
/* BEFORE */
feather.toSvg('x')

/* AFTER */
feather.icons.x.toSvg()
```

`feather.replace()` now copies all attributes on the placeholder element (i.e. `<i>`) to the `<svg>` tag instead of just `class` and `id`:

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

.babelrc

 {
-  "presets": [
-    "es2015"
-  ]
+  "presets": ["es2015"],
+  "plugins": ["transform-object-rest-spread"]
 }

.eslintrc.json

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

.travis.yml

@@ -8,6 +8,6 @@ node_js: 6
 before_script:
   - npm prune
 script:
-  - npm run all
+  - npm start
 after_success:
   - npm run semantic-release

Makefile

-src_files := src/*.js
-src_dir   := src
-
-.PHONY: all lint test build
-
-all: lint test build
-
-lint: dist/icons.json
-	./node_modules/.bin/eslint .
-
-test:
-	./node_modules/.bin/jest
-
-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

bin/__tests__/__snapshots__/build-icons-object.test.js.snap

+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`builds object correctly 1`] = `
+Object {
+  "icon1": "<line x1=\\"23\\" y1=\\"1\\" x2=\\"1\\" y2=\\"23\\"></line><line x1=\\"1\\" y1=\\"1\\" x2=\\"23\\" y2=\\"23\\"></line>",
+  "icon2": "<circle cx=\\"12\\" cy=\\"12\\" r=\\"11\\"></circle>",
+}
+`;

bin/__tests__/build-icons-object.test.js

+/* eslint-env jest */
+import buildIconsObject from '../build-icons-object';
+
+const SVG_FILES = {
+  'icon1.svg':
+    '<svg 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"><line x1="23" y1="1" x2="1" y2="23" /><line x1="1" y1="1" x2="23" y2="23" /></svg>',
+  'icon2.svg':
+    '<svg 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="11" /></svg>',
+};
+
+function getSvg(svgFile) {
+  return SVG_FILES[svgFile];
+}
+
+test('builds object correctly', () => {
+  expect(buildIconsObject(Object.keys(SVG_FILES), getSvg)).toMatchSnapshot();
+});

bin/build-icons-json.js

+import fs from 'fs';
+import path from 'path';
+
+import buildIconsObject from './build-icons-object';
+
+const IN_DIR = path.resolve(__dirname, '../icons');
+const OUT_FILE = path.resolve(__dirname, '../dist/icons.json');
+
+console.log(`Building ${OUT_FILE}`); // eslint-disable-line no-console
+
+const svgFiles = fs
+  .readdirSync(IN_DIR)
+  .filter(file => path.extname(file) === '.svg');
+
+const getSvg = svgFile => fs.readFileSync(path.join(IN_DIR, svgFile));
+
+const icons = buildIconsObject(svgFiles, getSvg);
+
+fs.writeFileSync(OUT_FILE, JSON.stringify(icons));

bin/build-icons-object.js

+/* eslint-disable import/no-extraneous-dependencies */
+import path from 'path';
+import cheerio from 'cheerio';
+
+/**
+ * Build an object in the format: `{ <name>: <contents> }`.
+ * @param {string[]} svgFiles - A list of file names.
+ * @param {Function} getSvg - A function that returns the contents of an SVG file.
+ * @returns {Object}
+ */
+function buildIconsObject(svgFiles, getSvg) {
+  return svgFiles
+    .map(svgFile => {
+      const name = path.basename(svgFile, '.svg');
+      const svg = getSvg(svgFile);
+      const contents = getSvgContents(svg);
+      return { name, contents };
+    })
+    .reduce((icons, icon) => {
+      icons[icon.name] = icon.contents;
+      return icons;
+    }, {});
+}
+
+/**
+ * Get contents between opening and closing `<svg>` tags.
+ * @param {string} svg
+ */
+function getSvgContents(svg) {
+  const $ = cheerio.load(svg);
+  return $('svg').html();
+}
+
+export default buildIconsObject;

bin/build-json.js

-/**
- * @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

-/**
- * @file Builds `dist/icons` directory.
- */
-
 import fs from 'fs';
 import path from 'path';
-import { icons, toSvg } from '../src';
+import icons from '../src/icons';
+
+const OUT_DIR = path.resolve(__dirname, '../dist/icons');
+
+console.log(`Building SVGs in ${OUT_DIR}`); // eslint-disable-line no-console
 
-Object.keys(icons).forEach(icon => {
-  const svg = toSvg(icon);
+Object.keys(icons).forEach(name => {
+  const svg = icons[name].toSvg();
 
-  fs.writeFileSync(path.resolve(__dirname, `../dist/icons/${icon}.svg`), svg);
+  fs.writeFileSync(path.join(OUT_DIR, `${name}.svg`), svg);
 });

bin/build.sh

+#!/bin/bash
+
+./node_modules/.bin/babel-node bin/process-svgs.js
+
+./node_modules/.bin/rimraf dist
+mkdir dist
+./node_modules/.bin/babel-node bin/build-icons-json.js
+
+./node_modules/.bin/rimraf dist/icons
+mkdir dist/icons
+./node_modules/.bin/babel-node bin/build-svgs.js
+
+./node_modules/.bin/webpack --output-filename feather.js
+./node_modules/.bin/webpack --output-filename feather.min.js -p

bin/process-svg.js

@@ -3,7 +3,7 @@ import Svgo from 'svgo';
 import cheerio from 'cheerio';
 import { format } from 'prettier';
 
-import DEFAULT_ATTRIBUTES from '../src/default-attributes.json';
+import DEFAULT_ATTRS from '../src/default-attrs.json';
 
 /**
  * Process SVG string.
@@ -13,7 +13,7 @@ import DEFAULT_ATTRIBUTES from '../src/default-attributes.json';
 function processSvg(svg) {
   return (
     optimize(svg)
-      .then(setAttributes)
+      .then(setAttrs)
       .then(format)
       // remove semicolon inserted by prettier
       // because prettier thinks it's formatting JSX not HTML
@@ -46,11 +46,11 @@ function optimize(svg) {
  * @param {string} svg - An SVG string.
  * @returns {string}
  */
-function setAttributes(svg) {
+function setAttrs(svg) {
   const $ = cheerio.load(svg);
 
-  Object.keys(DEFAULT_ATTRIBUTES).forEach(key =>
-    $('svg').attr(key, DEFAULT_ATTRIBUTES[key]),
+  Object.keys(DEFAULT_ATTRS).forEach(key =>
+    $('svg').attr(key, DEFAULT_ATTRS[key]),
   );
 
   return $('body').html();

bin/process-svgs.js

-/* eslint-disable import/no-extraneous-dependencies */
 import fs from 'fs';
 import path from 'path';
 
 import processSvg from './process-svg';
 
-const ICONS_DIR = path.resolve(__dirname, '../icons');
+const IN_DIR = path.resolve(__dirname, '../icons');
+
+console.log(`Processing SVGs in ${IN_DIR}`); // eslint-disable-line no-console
 
 fs
-  .readdirSync(ICONS_DIR)
+  .readdirSync(IN_DIR)
   .filter(file => path.extname(file) === '.svg')
   .forEach(svgFile => {
-    const svg = fs.readFileSync(path.join(ICONS_DIR, svgFile));
-    processSvg(svg).then(svg => fs.writeFileSync(path.join(ICONS_DIR, svgFile), svg));
+    const svg = fs.readFileSync(path.join(IN_DIR, svgFile));
+    processSvg(svg).then(svg =>
+      fs.writeFileSync(path.join(IN_DIR, svgFile), svg),
+    );
   });

package.json

@@ -7,30 +7,36 @@
     "dist"
   ],
   "scripts": {
-    "all": "make",
-    "lint": "make lint",
-    "test": "make test",
-    "build": "make build",
+    "start": "npm-run-all --sequential build lint test",
+    "build": "./bin/build.sh",
+    "lint": "eslint .",
+    "test": "jest",
     "commitmsg": "validate-commit-msg",
     "cm": "git-cz",
     "semantic-release": "semantic-release pre && npm publish && semantic-release post"
   },
+  "dependencies": {
+    "classnames": "^2.2.5"
+  },
   "devDependencies": {
     "babel-cli": "^6.24.1",
     "babel-loader": "^7.1.1",
+    "babel-plugin-transform-object-rest-spread": "^6.26.0",
     "babel-preset-es2015": "^6.24.1",
     "babel-register": "^6.24.1",
     "cheerio": "^1.0.0-rc.2",
     "commitizen": "^2.9.6",
     "core-js": "^2.4.1",
-    "cz-conventional-changelog": "^2.0.0",
+    "cz-conventional-changelog": "^2.1.0",
     "eslint": "^4.0.0",
     "eslint-config-airbnb-base": "^11.2.0",
     "eslint-plugin-import": "^2.5.0",
     "husky": "^0.13.4",
     "jest": "^21.2.1",
+    "npm-run-all": "^4.1.2",
     "parse5": "^3.0.2",
     "prettier": "^1.8.2",
+    "rimraf": "^2.6.2",
     "rsvp": "^3.6.0",
     "semantic-release": "^6.3.6",
     "svgo": "^0.7.2",

src/__tests__/__snapshots__/icon.test.js.snap

+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`constructs icon object correctly 1`] = `
+Icon {
+  "attrs": Object {
+    "class": "feather feather-test",
+    "fill": "none",
+    "height": 24,
+    "stroke": "currentColor",
+    "stroke-linecap": "round",
+    "stroke-linejoin": "round",
+    "stroke-width": 2,
+    "viewBox": "0 0 24 24",
+    "width": 24,
+    "xmlns": "http://www.w3.org/2000/svg",
+  },
+  "contents": "<line x1=\\"23\\" y1=\\"1\\" x2=\\"1\\" y2=\\"23\\" /><line x1=\\"1\\" y1=\\"1\\" x2=\\"23\\" y2=\\"23\\" />",
+  "name": "test",
+  "tags": Array [
+    "hello",
+    "world",
+    "foo",
+    "bar",
+  ],
+}
+`;
+
+exports[`constructs icon object correctly 2`] = `
+Icon {
+  "attrs": Object {
+    "class": "feather feather-test",
+    "fill": "none",
+    "height": 24,
+    "stroke": "currentColor",
+    "stroke-linecap": "round",
+    "stroke-linejoin": "round",
+    "stroke-width": 2,
+    "viewBox": "0 0 24 24",
+    "width": 24,
+    "xmlns": "http://www.w3.org/2000/svg",
+  },
+  "contents": "<line x1=\\"23\\" y1=\\"1\\" x2=\\"1\\" y2=\\"23\\" /><line x1=\\"1\\" y1=\\"1\\" x2=\\"23\\" y2=\\"23\\" />",
+  "name": "test",
+  "tags": Array [],
+}
+`;
+
+exports[`toString() returns correct string 1`] = `"<line x1=\\"23\\" y1=\\"1\\" x2=\\"1\\" y2=\\"23\\" /><line x1=\\"1\\" y1=\\"1\\" x2=\\"23\\" y2=\\"23\\" />"`;
+
+exports[`toSvg() returns correct string 1`] = `"<svg 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\\" class=\\"feather feather-test\\"><line x1=\\"23\\" y1=\\"1\\" x2=\\"1\\" y2=\\"23\\" /><line x1=\\"1\\" y1=\\"1\\" x2=\\"23\\" y2=\\"23\\" /></svg>"`;
+
+exports[`toSvg() returns correct string 2`] = `"<svg 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\\" class=\\"feather feather-test\\" color=\\"red\\"><line x1=\\"23\\" y1=\\"1\\" x2=\\"1\\" y2=\\"23\\" /><line x1=\\"1\\" y1=\\"1\\" x2=\\"23\\" y2=\\"23\\" /></svg>"`;
+
+exports[`toSvg() returns correct string 3`] = `"<svg 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\\" class=\\"feather feather-test foo bar\\" color=\\"red\\"><line x1=\\"23\\" y1=\\"1\\" x2=\\"1\\" y2=\\"23\\" /><line x1=\\"1\\" y1=\\"1\\" x2=\\"23\\" y2=\\"23\\" /></svg>"`;

src/__tests__/__snapshots__/icons.test.js.snap

+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`exports correct object 1`] = `
+Object {
+  "icon1": Icon {
+    "attrs": Object {
+      "class": "feather feather-icon1",
+      "fill": "none",
+      "height": 24,
+      "stroke": "currentColor",
+      "stroke-linecap": "round",
+      "stroke-linejoin": "round",
+      "stroke-width": 2,
+      "viewBox": "0 0 24 24",
+      "width": 24,
+      "xmlns": "http://www.w3.org/2000/svg",
+    },
+    "contents": "<line x1=\\"23\\" y1=\\"1\\" x2=\\"1\\" y2=\\"23\\" /><line x1=\\"1\\" y1=\\"1\\" x2=\\"23\\" y2=\\"23\\" />",
+    "name": "icon1",
+    "tags": Array [
+      "foo",
+      "bar",
+      "hello",
+      "world",
+    ],
+  },
+  "icon2": Icon {
+    "attrs": Object {
+      "class": "feather feather-icon2",
+      "fill": "none",
+      "height": 24,
+      "stroke": "currentColor",
+      "stroke-linecap": "round",
+      "stroke-linejoin": "round",
+      "stroke-width": 2,
+      "viewBox": "0 0 24 24",
+      "width": 24,
+      "xmlns": "http://www.w3.org/2000/svg",
+    },
+    "contents": "<circle cx=\\"12\\" cy=\\"12\\" r=\\"11\\" />",
+    "name": "icon2",
+    "tags": Array [],
+  },
+}
+`;

src/__tests__/__snapshots__/replace.test.js.snap

+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`copies placeholder element attributes to <svg> tag 1`] = `"<i data-feather=\\"icon1\\" id=\\"test\\" class=\\"foo bar\\" stroke-width=\\"1\\"></i>"`;
+
+exports[`copies placeholder element attributes to <svg> tag 2`] = `"<svg 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\\" class=\\"feather feather-icon1 foo bar\\" id=\\"test\\"><line x1=\\"23\\" y1=\\"1\\" x2=\\"1\\" y2=\\"23\\"></line><line x1=\\"1\\" y1=\\"1\\" x2=\\"23\\" y2=\\"23\\"></line></svg>"`;
+
+exports[`replaces [data-feather] elements with SVG markup 1`] = `"<i data-feather=\\"icon1\\"></i><span data-feather=\\"icon2\\"></span>"`;
+
+exports[`replaces [data-feather] elements with SVG markup 2`] = `"<svg 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\\" class=\\"feather feather-icon1\\"><line x1=\\"23\\" y1=\\"1\\" x2=\\"1\\" y2=\\"23\\"></line><line x1=\\"1\\" y1=\\"1\\" x2=\\"23\\" y2=\\"23\\"></line></svg><svg 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\\" class=\\"feather feather-icon2\\"><circle cx=\\"12\\" cy=\\"12\\" r=\\"11\\"></circle></svg>"`;
+
+exports[`sets attributes passed as parameters 1`] = `"<i data-feather=\\"icon1\\" id=\\"test\\" class=\\"foo bar\\" stroke-width=\\"1\\"></i>"`;
+
+exports[`sets attributes passed as parameters 2`] = `"<svg 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\\" class=\\"feather feather-icon1 foo bar hello\\" color=\\"salmon\\" id=\\"test\\"><line x1=\\"23\\" y1=\\"1\\" x2=\\"1\\" y2=\\"23\\"></line><line x1=\\"1\\" y1=\\"1\\" x2=\\"23\\" y2=\\"23\\"></line></svg>"`;

src/__tests__/__snapshots__/to-svg.test.js.snap

+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`returns correct string 1`] = `"<svg 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\\" class=\\"feather feather-icon1\\"><line x1=\\"23\\" y1=\\"1\\" x2=\\"1\\" y2=\\"23\\" /><line x1=\\"1\\" y1=\\"1\\" x2=\\"23\\" y2=\\"23\\" /></svg>"`;
+
+exports[`returns correct string 2`] = `"<svg 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\\" class=\\"feather feather-icon1\\" color=\\"red\\"><line x1=\\"23\\" y1=\\"1\\" x2=\\"1\\" y2=\\"23\\" /><line x1=\\"1\\" y1=\\"1\\" x2=\\"23\\" y2=\\"23\\" /></svg>"`;
+
+exports[`returns correct string 3`] = `"<svg 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\\" class=\\"feather feather-icon1 foo bar\\" color=\\"red\\"><line x1=\\"23\\" y1=\\"1\\" x2=\\"1\\" y2=\\"23\\" /><line x1=\\"1\\" y1=\\"1\\" x2=\\"23\\" y2=\\"23\\" /></svg>"`;

src/__tests__/icon.test.js

+/* eslint-env jest */
+import Icon from '../icon';
+
+const icon1 = new Icon(
+  'test',
+  '<line x1="23" y1="1" x2="1" y2="23" /><line x1="1" y1="1" x2="23" y2="23" />',
+  ['hello', 'world', 'foo', 'bar'],
+);
+
+const icon2 = new Icon(
+  'test',
+  '<line x1="23" y1="1" x2="1" y2="23" /><line x1="1" y1="1" x2="23" y2="23" />',
+);
+
+test('constructs icon object correctly', () => {
+  expect(icon1).toMatchSnapshot();
+  expect(icon2).toMatchSnapshot();
+});
+
+test('toSvg() returns correct string', () => {
+  expect(icon1.toSvg()).toMatchSnapshot();
+  expect(icon1.toSvg({ 'stroke-width': 1, color: 'red' })).toMatchSnapshot();
+  expect(icon1.toSvg({ class: 'foo bar', color: 'red' })).toMatchSnapshot();
+});
+
+test('toString() returns correct string', () => {
+  expect(icon1.toString()).toMatchSnapshot();
+});

src/__tests__/icons.test.js

+/* eslint-env jest */
+import icons from '../icons';
+
+jest.mock('../../dist/icons.json', () => ({
+  icon1:
+    '<line x1="23" y1="1" x2="1" y2="23" /><line x1="1" y1="1" x2="23" y2="23" />',
+  icon2: '<circle cx="12" cy="12" r="11" />',
+}));
+
+jest.mock('../tags.json', () => ({
+  icon1: ['foo', 'bar', 'hello', 'world'],
+}));
+
+test('exports correct object', () => {
+  expect(icons).toMatchSnapshot();
+});

src/__tests__/index.test.js

+/* eslint-env jest */
+import feather from '../..';
+
+test('has correct properties', () => {
+  expect(feather).toHaveProperty('icons');
+  expect(feather).toHaveProperty('toSvg');
+  expect(feather).toHaveProperty('replace');
+});

src/__tests__/replace.test.js

+/* eslint-env jest, browser */
+import replace from '../replace';
+
+jest.mock('../../dist/icons.json', () => ({
+  icon1:
+    '<line x1="23" y1="1" x2="1" y2="23" /><line x1="1" y1="1" x2="23" y2="23" />',
+  icon2: '<circle cx="12" cy="12" r="11" />',
+}));
+
+test('replaces [data-feather] elements with SVG markup', () => {
+  document.body.innerHTML =
+    '<i data-feather="icon1"></i><span data-feather="icon2"></i>';
+  expect(document.body.innerHTML).toMatchSnapshot();
+  replace();
+  expect(document.body.innerHTML).toMatchSnapshot();
+});
+
+test('copies placeholder element attributes to <svg> tag', () => {
+  document.body.innerHTML =
+    '<i data-feather="icon1" id="test" class="foo bar" stroke-width="1"></i>';
+  expect(document.body.innerHTML).toMatchSnapshot();
+  replace();
+  expect(document.body.innerHTML).toMatchSnapshot();
+});
+
+test('sets attributes passed as parameters', () => {
+  document.body.innerHTML =
+    '<i data-feather="icon1" id="test" class="foo bar" stroke-width="1"></i>';
+  expect(document.body.innerHTML).toMatchSnapshot();
+  replace({ class: 'foo bar hello', 'stroke-width': 1.5, color: 'salmon' });
+  expect(document.body.innerHTML).toMatchSnapshot();
+});

src/__tests__/to-svg.test.js

+/* eslint-env jest */
+import toSvg from '../to-svg';
+
+jest.mock('../../dist/icons.json', () => ({
+  icon1:
+    '<line x1="23" y1="1" x2="1" y2="23" /><line x1="1" y1="1" x2="23" y2="23" />',
+}));
+
+test('returns correct string', () => {
+  expect(toSvg('icon1')).toMatchSnapshot();
+  expect(toSvg('icon1', { 'stroke-width': 1, color: 'red' })).toMatchSnapshot();
+  expect(toSvg('icon1', { class: 'foo bar', color: 'red' })).toMatchSnapshot();
+});
+
+test('throws error when `name` parameter is undefined', () => {
+  expect(() => toSvg()).toThrow();
+});
+
+test('throws error when passed unknown icon name', () => {
+  expect(() => toSvg('foo')).toThrow();
+});

src/icon.js

+import classnames from 'classnames/dedupe';
+
+import DEFAULT_ATTRS from './default-attrs.json';
+
+class Icon {
+  constructor(name, contents, tags = []) {
+    this.name = name;
+    this.contents = contents;
+    this.tags = tags;
+    this.attrs = {
+      ...DEFAULT_ATTRS,
+      ...{ class: `feather feather-${name}` },
+    };
+  }
+
+  /**
+   * Create an SVG string.
+   * @param {Object} attrs
+   * @returns {string}
+   */
+  toSvg(attrs = {}) {
+    const combinedAttrs = {
+      ...this.attrs,
+      ...attrs,
+      ...{ class: classnames(this.attrs.class, attrs.class) },
+    };
+
+    return `<svg ${attrsToString(combinedAttrs)}>${this.contents}</svg>`;
+  }
+
+  /**
+   * Return string representation of an `Icon`.
+   *
+   * Added for backward compatibility. If old code expects `feather.icons.<name>`
+   * to be a string, `toString()` will get implicitly called.
+   *
+   * @returns {string}
+   */
+  toString() {
+    return this.contents;
+  }
+}
+
+/**
+ * Convert attributes object to string of HTML attributes.
+ * @param {Object} attrs
+ * @returns {string}
+ */
+function attrsToString(attrs) {
+  return Object.keys(attrs)
+    .map(key => `${key}="${attrs[key]}"`)
+    .join(' ');
+}
+
+export default Icon;

src/icons.js

+import Icon from './icon';
+import icons from '../dist/icons.json';
+import tags from './tags.json';
+
+export default Object.keys(icons)
+  .map(key => new Icon(key, icons[key], tags[key]))
+  .reduce((object, icon) => {
+    object[icon.name] = icon;
+    return object;
+  }, {});

src/index.js

-/**
- * @file Exposes `feather` object.
- */
-
-import icons from '../dist/icons.json';
+import icons from './icons';
 import toSvg from './to-svg';
 import replace from './replace';
 

src/replace.js

-/**
- * @file Implements `replace` function.
- */
+/* eslint-env browser */
+import classnames from 'classnames/dedupe';
 
-/* global document, DOMParser */
-
-import icons from '../dist/icons.json';
-import toSvg from './to-svg';
+import icons from './icons';
 
 /**
- * Replace all elements that have a `data-feather` attribute with SVG markup
+ * Replace all HTML elements that have a `data-feather` attribute with SVG markup
  * corresponding to the element's `data-feather` attribute value.
- * @param {Object} options
+ * @param {Object} attrs
  */
-export default function replace(options = {}) {
+function replace(attrs = {}) {
   if (typeof document === 'undefined') {
     throw new Error('`feather.replace()` only works in a browser environment.');
   }
 
   const elementsToReplace = document.querySelectorAll('[data-feather]');
 
-  Array.from(elementsToReplace).forEach(element => replaceElement(element, options));
+  Array.from(elementsToReplace).forEach(element =>
+    replaceElement(element, attrs),
+  );
 }
 
 /**
- * Replace single element with SVG markup
+ * Replace a single HTML element with SVG markup
  * corresponding to the element's `data-feather` attribute value.
- * @param {Element} element
- * @param {Object} options
+ * @param {HTMLElement} element
+ * @param {Object} attrs
  */
-function replaceElement(element, options) {
-  const key = element.getAttribute('data-feather');
-
-  if (!key) {
-    throw new Error('The required `data-feather` attribute has no value.');
-  }
-
-  if (!icons[key]) {
-    throw new Error(`No icon matching '${key}'. See the complete list of icons at https://feathericons.com`);
-  }
-
-  const elementClassAttr = element.getAttribute('class') || '';
-  const elementIdAttr = element.getAttribute('id');
-  const classNames = (
-    options.class ? `${options.class} ${elementClassAttr}` : elementClassAttr
+function replaceElement(element, attrs = {}) {
+  const elementAttrs = getAttrs(element);
+  const name = elementAttrs['data-feather'];
+  delete elementAttrs['data-feather'];
+
+  const svgString = icons[name].toSvg({
+    ...attrs,
+    ...elementAttrs,
+    ...{ class: classnames(attrs.class, elementAttrs.class) },
+  });
+  const svgDocument = new DOMParser().parseFromString(
+    svgString,
+    'image/svg+xml',
   );
-
-  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');
 
   element.parentNode.replaceChild(svgElement, element);
 }
+
+/**
+ * Get the attributes of an HTML element.
+ * @param {HTMLElement} element
+ * @returns {Object}
+ */
+function getAttrs(element) {
+  return Array.from(element.attributes).reduce((attrs, attr) => {
+    attrs[attr.name] = attr.value;
+    return attrs;
+  }, {});
+}
+
+export default replace;

src/tags.json

+{
+  "airplay": ["stream"],
+  "bell": ["alarm", "notification"],
+  "settings": ["cog", "edit", "gear", "preferences"],
+  "star": ["bookmark"],
+  "x": ["cancel", "close", "delete", "remove"]
+}

src/to-svg.js

-/**
- * @file Implements `toSvg` function.
- */
-
-import icons from '../dist/icons.json';
-import DEFAULT_ATTRIBUTES from './default-attributes.json';
+import icons from './icons';
 
 /**
  * Create an SVG string.
- * @param {string} key - Icon name.
- * @param {Object} options
+ * @deprecated
+ * @param {string} name
+ * @param {Object} attrs
  * @returns {string}
  */
-export default function toSvg(key, options = {}) {
-  if (!key) {
+function toSvg(name, attrs = {}) {
+  console.warn(
+    'feather.toSvg() is deprecated. Please use feather.icons[name].toSvg() instead.',
+  );
+
+  if (!name) {
     throw new Error('The required `key` (icon name) parameter is missing.');
   }
 
-  if (!icons[key]) {
-    throw new Error(`No icon matching '${key}'. See the complete list of icons at https://feathericons.com`);
+  if (!icons[name]) {
+    throw new Error(
+      `No icon matching '${
+        name
+      }'. See the complete list of icons at https://feathericons.com`,
+    );
   }
 
-  const combinedOptions = Object.assign({}, DEFAULT_ATTRIBUTES, options);
-
-  combinedOptions.class = addDefaultClassNames(combinedOptions.class, key);
-
-  const attributes = optionsToAttributes(combinedOptions);
-
-  return `<svg ${attributes}>${icons[key]}</svg>`;
+  return icons[name].toSvg(attrs);
 }
 
-/**
- * Add default class names.
- * @param {string} classNames - One or more class names seperated by spaces.
- * @param {string} key - Icon name.
- * @returns {string}
- */
-function addDefaultClassNames(classNames, key) {
-  // convert class names string into an array
-  const classNamesArray = classNames ? classNames.trim().split(/\s+/) : [];
-
-  // use Set to avoid duplicate class names
-  const classNamesSet = new Set(classNamesArray);
-
-  // add default class names
-  classNamesSet.add('feather').add(`feather-${key}`);
-
-  return Array.from(classNamesSet).join(' ');
-}
-
-/**
- * Convert options object to string of html attributes.
- * @param {Object} options
- * @returns {string}
- */
-function optionsToAttributes(options) {
-  const attributes = [];
-
-  Object.keys(options).forEach(key => {
-    if (options[key]) {
-      attributes.push(`${key}="${options[key]}"`);
-    }
-  });
-
-  return attributes.join(' ');
-}
+export default toSvg;