feat: Add archive icon

README.md

@@ -27,6 +27,7 @@ npm install feather-icons
 * [Usage](#usage)
   * [Client-side](#client-side)
   * [Node](#node)
+  * [SVG Sprite](#svg-sprite)
 * [API Reference](#api-reference)
 	* [`feather.icons`](#feathericons)
 	* [`feather.icons[name].toSvg()`](#feathericonsnametosvgattrs)
@@ -166,6 +167,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`

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

@@ -0,0 +1,14 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+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>"
+`;

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

@@ -0,0 +1,12 @@
+/* eslint-env jest */
+import buildSpriteString from '../build-sprite-string';
+
+const icons = {
+  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>',
+};
+
+test('builds sprite correctly', () => {
+  expect(buildSpriteString(icons)).toMatchSnapshot();
+});

bin/build-sprite-string.js

@@ -0,0 +1,30 @@
+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
+ * @param {object} icons the icons object
+ * @returns {string} the rendered string with SVG symbols
+ */
+function buildSpriteString(icons) {
+  const symbols = Object.keys(icons)
+    .map(icon => toSvgSymbol(icon, icons[icon]))
+    .join('');
+
+  return svgStartTag + symbols + svgEndTag;
+}
+
+/**
+ * Renders a SVG symbol tag
+ * @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}">
+${contents}\n</symbol>\n`;
+}
+
+export default buildSpriteString;

bin/build-sprite.js

@@ -0,0 +1,14 @@
+import fs from 'fs';
+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 => {
+  if (err) throw err;
+});

bin/build.sh

@@ -5,6 +5,7 @@
 ./node_modules/.bin/rimraf dist
 mkdir dist
 ./node_modules/.bin/babel-node bin/build-icons-json.js
+./node_modules/.bin/babel-node bin/build-sprite.js
 
 ./node_modules/.bin/rimraf dist/icons
 mkdir dist/icons

icons/archive.svg

@@ -0,0 +1,15 @@
+<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"
+>
+  <polyline points="21 8 21 21 3 21 3 8" />
+  <rect x="1" y="3" width="22" height="5" />
+  <line x1="10" y1="12" x2="14" y2="12" />
+</svg>

icons/gift.svg

@@ -0,0 +1,17 @@
+<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"
+>
+  <polyline points="20 12 20 22 4 22 4 12" />
+  <rect x="2" y="7" width="20" height="5" />
+  <line x1="12" y1="22" x2="12" y2="7" />
+  <path d="M12 7H7.5a2.5 2.5 0 0 1 0-5C11 2 12 7 12 7z" />
+  <path d="M12 7h4.5a2.5 2.5 0 0 0 0-5C13 2 12 7 12 7z" />
+</svg>

icons/youtube.svg

@@ -0,0 +1,14 @@
+<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"
+>
+  <path d="M22.54 6.42a2.78 2.78 0 0 0-1.94-2C18.88 4 12 4 12 4s-6.88 0-8.6.46a2.78 2.78 0 0 0-1.94 2A29 29 0 0 0 1 11.75a29 29 0 0 0 .46 5.33A2.78 2.78 0 0 0 3.4 19c1.72.46 8.6.46 8.6.46s6.88 0 8.6-.46a2.78 2.78 0 0 0 1.94-2 29 29 0 0 0 .46-5.25 29 29 0 0 0-.46-5.33z" />
+  <polygon points="9.75 15.02 15.5 11.75 9.75 8.48 9.75 15.02" />
+</svg>

src/tags.json

@@ -53,6 +53,7 @@
   "folder-minus": ["directory"],
   "folder-plus": ["directory"],
   "folder": ["directory"],
+  "gift": ["present", "box", "birthday", "party"],
   "git-branch": ["code", "version control"],
   "git-commit": ["code", "version control"],
   "git-merge": ["code", "version control"],
@@ -150,6 +151,7 @@
   "x-circle": ["cancel", "close", "delete", "remove", "times"],
   "x-square": ["cancel", "close", "delete", "remove", "times"],
   "x": ["cancel", "close", "delete", "remove", "times"],
+  "youtube": ["logo", "video", "play"],
   "zap-off": ["flash", "camera", "lightning"],
   "zap": ["flash", "camera", "lightning"]
 }