Merge pull request #374 from feathericons/update-sprite

Refactor buildSpriteString and update sprite docs

README.md

@@ -168,40 +168,58 @@ 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:
+
+#### 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-sprite.svg`](https://unpkg.com/feather-icons/dist/feather-sprite.svg) into your project directory.
+
+#### 2. Use
+
+In your HTML, you can include an icon like so:
+
 ```html
-<svg class="feather feather-[iconName]"
+<svg
   width="24"
-  height="24"  
+  height="24"
   fill="none"
   stroke="currentColor"
   stroke-width="2"
   stroke-linecap="round"
   stroke-linejoin="round"
 >
-  <use xlink:href="feather-sprite.svg#[iconName]"/>
+  <use xlink:href="path/to/feather-sprite.svg#circle"/>
 </svg>
 ```
-Where `iconName` is the name of the icon you want to display.
 
-Same result but using a CSS class:
+> **Note:** `circle` in the above example can be replaced with any valid icon name. See the complete list of icon names at [feathericons.com](https://feathericons.com).
+
+However, this markup can be simplified using a simple CSS class to avoid repetition of SVG attributes between icons.
+
 ```css
 .feather {
-  width: 24px; 
+  width: 24px;
-  height: 24px; 
+  height: 24px;
-  stroke: currentColor; 
+  stroke: currentColor;
-  stroke-width: 2; 
+  stroke-width: 2;
-  stroke-linecap: round; 
+  stroke-linecap: round;
-  stroke-linejoin: round; 
+  stroke-linejoin: round;
   fill: none;
 }
 ```
+
 ```html
-<svg class="feather feather-[iconName]">
+<svg class="feather">
-  <use xlink:href="feather-sprite.svg#[iconName]"/>
+  <use xlink:href="path/to/dist/feather-sprite.svg#circle"/>
 </svg>
 ```
-Prefer using CSS classes to keep things organized.
 
 ## API Reference
 

bin/__tests__/__snapshots__/build-sprite-string.test.js.snap

@@ -1,14 +1,3 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`builds sprite correctly 1`] = `
+exports[`builds sprite correctly 1`] = `"<svg xmlns=\\"http://www.w3.org/2000/svg\\"><defs><symbol id=\\"icon1\\" viewBox=\\"0 0 24 24\\"><line x1=\\"23\\" y1=\\"1\\" x2=\\"1\\" y2=\\"23\\"></line><line x1=\\"1\\" y1=\\"1\\" x2=\\"23\\" y2=\\"23\\"></line></symbol><symbol id=\\"icon2\\" viewBox=\\"0 0 24 24\\"><circle cx=\\"12\\" cy=\\"12\\" r=\\"11\\"></circle></symbol></defs></svg>"`;
-"<svg xmlns=\\"http://www.w3.org/2000/svg\\">
-<defs>
-<symbol id=\\"icon1\\" viewBox=\\"0 0 24 24\\">
-<line x1=\\"23\\" y1=\\"1\\" x2=\\"1\\" y2=\\"23\\"></line><line x1=\\"1\\" y1=\\"1\\" x2=\\"23\\" y2=\\"23\\"></line>
-</symbol>
-<symbol id=\\"icon2\\" viewBox=\\"0 0 24 24\\">
-<circle cx=\\"12\\" cy=\\"12\\" r=\\"11\\"></circle>
-</symbol>
-</defs>
-</svg>"
-`;

bin/build-sprite-string.js

@@ -1,30 +1,28 @@
 import defaultAttrs from '../src/default-attrs.json';
 
-const svgStartTag = `<svg xmlns="${defaultAttrs.xmlns}">\n<defs>\n`;
-const svgEndTag = '</defs>\n</svg>';
-
 /**
- * Renders the inner sprites as SVG Symbols
+ * Build an SVG sprite string containing SVG symbols.
- * @param {object} icons the icons object
+ * @param {Object} icons
- * @returns {string} the rendered string with SVG symbols
+ * @returns {string}
  */
 function buildSpriteString(icons) {
   const symbols = Object.keys(icons)
     .map(icon => toSvgSymbol(icon, icons[icon]))
     .join('');
 
-  return svgStartTag + symbols + svgEndTag;
+  return `<svg xmlns="${defaultAttrs.xmlns}"><defs>${symbols}</defs></svg>`;
 }
 
 /**
- * Renders a SVG symbol tag
+ * Create an SVG symbol string.
- * @param {string} name The name of the icon
+ * @param {string} name - Icon name
- * @param {string} contents The contents of the icon
+ * @param {string} contents - SVG contents
- * @returns {string} the rendered SVG symbol
+ * @returns {string}
  */
 function toSvgSymbol(name, contents) {
-  return `<symbol id="${name}" viewBox="${defaultAttrs.viewBox}">
+  return `<symbol id="${name}" viewBox="${defaultAttrs.viewBox}">${
-${contents}\n</symbol>\n`;
+    contents
+  }</symbol>`;
 }
 
 export default buildSpriteString;

bin/build-sprite.js

@@ -3,12 +3,8 @@ import path from 'path';
 import icons from '../dist/icons.json';
 import buildSpriteString from './build-sprite-string';
 
-const sprite = buildSpriteString(icons);
-
 const OUT_FILE = path.resolve(__dirname, '../dist/feather-sprite.svg');
 
 console.log(`Building ${OUT_FILE}`); // eslint-disable-line no-console
 
-fs.writeFile(OUT_FILE, sprite, err => {
+fs.writeFileSync(OUT_FILE, buildSpriteString(icons));
-  if (err) throw err;
-});

bin/build.sh

@@ -1,15 +1,25 @@
 #!/bin/bash
 
+# Process SVG files
 ./node_modules/.bin/babel-node bin/process-svgs.js
 
+# Create dist directory
 ./node_modules/.bin/rimraf dist
 mkdir dist
+
+# Build icons.json
 ./node_modules/.bin/babel-node bin/build-icons-json.js
+
+# Build SVG sprite
 ./node_modules/.bin/babel-node bin/build-sprite.js
 
+# Create dist/icons directory
 ./node_modules/.bin/rimraf dist/icons
 mkdir dist/icons
+
+# Build SVG icons
 ./node_modules/.bin/babel-node bin/build-svgs.js
 
+# Build JavaScript library
 ./node_modules/.bin/webpack --output-filename feather.js
 ./node_modules/.bin/webpack --output-filename feather.min.js -p