feat(svg-sprite): Adds build sprite script with tests and docs

fixes requested by @colebemis
colebemis · Feb 21, 2018 · Feb 19, 2018 · Feb 20, 2018 · Feb 20, 2018 · Feb 20, 2018
commit c28aeea10f87fa0cba5759bc88dceda30ddcb504
diff --git a/README.md b/README.md
@@ -120,42 +120,6 @@ Call the `feather.replace()` method.
 
 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()`.
 
-#### 5. SVG Sprite
-A SVG Sprite is also provided, which can be used as following:
-```html
-<svg class="feather feather-[iconName]"
-  width="24"
-  height="24"  
-  fill="none"
-  stroke="currentColor"
-  stroke-width="2"
-  stroke-linecap="round"
-  stroke-linejoin="round"
->
-  <use xlink:href="feather-sprite.svg#[iconName]"/>
-</svg>
-```
-Where `iconName` is the name of the icon you want to display.
-
-Same result but using a CSS class:
-```css
-.feather-default {
-  width: 24px; 
-  height: 24px; 
-  stroke: currentColor; 
-  stroke-width: 2; 
-  stroke-linecap: round; 
-  stroke-linejoin: round; 
-  fill: none
-}
-```
-```html
-<svg class="feather-default feather feather-[iconName]">
-  <use xlink:href="feather-sprite.svg#[iconName]"/>
-</svg>
-```
-This way 
-
 ### Node
 #### 1. Install
 
@@ -202,6 +166,42 @@ feather.icons.x.toSvg({ class: 'foo bar', 'stroke-width': 1, color: 'red' })
 
 See the [API Reference](#api-reference) for more information about the available properties and methods of the `feather` object.
 
+### SVG Sprite
+A SVG Sprite is also provided, which can be used as following:
+```html
+<svg class="feather feather-[iconName]"
+  width="24"
+  height="24"  
+  fill="none"
+  stroke="currentColor"
+  stroke-width="2"
+  stroke-linecap="round"
+  stroke-linejoin="round"
+>
+  <use xlink:href="feather-sprite.svg#[iconName]"/>
+</svg>
+```
+Where `iconName` is the name of the icon you want to display.
+
+Same result but using a CSS class:
+```css
+.feather {
+  width: 24px; 
+  height: 24px; 
+  stroke: currentColor; 
+  stroke-width: 2; 
+  stroke-linecap: round; 
+  stroke-linejoin: round; 
+  fill: none
+}
+```
+```html
+<svg class="feather feather-[iconName]">
+  <use xlink:href="feather-sprite.svg#[iconName]"/>
+</svg>
+```
+Prefer using CSS classes to keep things organized.
+
 ## API Reference
 
 ### `feather.icons`

diff --git a/bin/__tests__/build-sprite.test.js b/bin/__tests__/build-sprite.test.js
@@ -1,5 +1,5 @@
 /* eslint-env jest */
-import buildSprite from '../build-sprite-function';
+import buildSprite from '../build-sprite-string';
 
 const icons = {
   icon1:

diff --git a/bin/build-sprite-function.js → bin/build-sprite-string.js b/bin/build-sprite-function.js → bin/build-sprite-string.js
@@ -2,8 +2,9 @@ import defaultAttrs from '../src/default-attrs.json';
 
 /**
  * Renders a SVG symbol tag
- * @param {*} name The name of the icon
- * @param {*} contents The contents of the icon
+ * @param {string} name The name of the icon
+ * @param {string} contents The contents of the icon
+ * @returns {string} the rendered SVG symbol
  */
 function toSvgSymbol(name, contents) {
   return `    <symbol id="${name}" viewBox="${defaultAttrs.viewBox}">

diff --git a/bin/build-sprite.js b/bin/build-sprite.js
@@ -1,7 +1,7 @@
 import fs from 'fs';
 import path from 'path';
 import icons from '../dist/icons.json';
-import buildSprite from './build-sprite-function';
+import buildSprite from './build-sprite-string';
 
 const sprite = buildSprite(icons);