From 5996edc8a16f591458fb0158f3546a59e3a19816 Mon Sep 17 00:00:00 2001 From: Ivan Quirino Date: Mon, 19 Feb 2018 12:55:31 -0300 Subject: [PATCH 1/8] feat(svg-sprite): Adds build sprite script with tests and docs --- README.md | 36 +++++++++++++++++++ .../__snapshots__/build-sprite.test.js.snap | 14 ++++++++ bin/__tests__/build-sprite.test.js | 12 +++++++ bin/build-sprite-function.js | 25 +++++++++++++ bin/build-sprite.js | 14 ++++++++ bin/build.sh | 1 + 6 files changed, 102 insertions(+) create mode 100644 bin/__tests__/__snapshots__/build-sprite.test.js.snap create mode 100644 bin/__tests__/build-sprite.test.js create mode 100644 bin/build-sprite-function.js create mode 100644 bin/build-sprite.js diff --git a/README.md b/README.md index 0d9465e1..5853a8db 100644 --- a/README.md +++ b/README.md @@ -120,6 +120,42 @@ 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 + + + +``` +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 + + + +``` +This way + ### Node #### 1. Install diff --git a/bin/__tests__/__snapshots__/build-sprite.test.js.snap b/bin/__tests__/__snapshots__/build-sprite.test.js.snap new file mode 100644 index 00000000..04ea39c6 --- /dev/null +++ b/bin/__tests__/__snapshots__/build-sprite.test.js.snap @@ -0,0 +1,14 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`builds sprite correctly 1`] = ` +" + + + + + + + + +" +`; diff --git a/bin/__tests__/build-sprite.test.js b/bin/__tests__/build-sprite.test.js new file mode 100644 index 00000000..82bf1b29 --- /dev/null +++ b/bin/__tests__/build-sprite.test.js @@ -0,0 +1,12 @@ +/* eslint-env jest */ +import buildSprite from '../build-sprite-function'; + +const icons = { + icon1: + '', + icon2: '', +}; + +test('builds sprite correctly', () => { + expect(buildSprite(icons)).toMatchSnapshot(); +}); diff --git a/bin/build-sprite-function.js b/bin/build-sprite-function.js new file mode 100644 index 00000000..8dcdf6a7 --- /dev/null +++ b/bin/build-sprite-function.js @@ -0,0 +1,25 @@ +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 + */ +function toSvgSymbol(name, contents) { + return ` + ${contents} + \n`; +} + +const svgStartTag = ` + \n`; + +const svgEndTag = ' \n'; + +export default function buildSprite(icons) { + const symbols = Object.keys(icons) + .map(icon => toSvgSymbol(icon, icons[icon])) + .reduce((spriteString, symbolString) => spriteString + symbolString, ''); + + return svgStartTag + symbols + svgEndTag; +} diff --git a/bin/build-sprite.js b/bin/build-sprite.js new file mode 100644 index 00000000..f75d785e --- /dev/null +++ b/bin/build-sprite.js @@ -0,0 +1,14 @@ +import fs from 'fs'; +import path from 'path'; +import icons from '../dist/icons.json'; +import buildSprite from './build-sprite-function'; + +const sprite = buildSprite(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; +}); diff --git a/bin/build.sh b/bin/build.sh index a151ba00..32610cf5 100755 --- a/bin/build.sh +++ b/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 From c28aeea10f87fa0cba5759bc88dceda30ddcb504 Mon Sep 17 00:00:00 2001 From: Ivan Quirino Date: Tue, 20 Feb 2018 16:21:52 -0300 Subject: [PATCH 2/8] feat(svg-sprite): Adds build sprite script with tests and docs fixes requested by @colebemis --- README.md | 72 +++++++++---------- bin/__tests__/build-sprite.test.js | 2 +- ...ite-function.js => build-sprite-string.js} | 5 +- bin/build-sprite.js | 2 +- 4 files changed, 41 insertions(+), 40 deletions(-) rename bin/{build-sprite-function.js => build-sprite-string.js} (80%) diff --git a/README.md b/README.md index 5853a8db..087b7493 100644 --- 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 - - - -``` -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 - - - -``` -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 + + + +``` +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 + + + +``` +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 index 82bf1b29..fe068ff7 100644 --- 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 b/bin/build-sprite-string.js similarity index 80% rename from bin/build-sprite-function.js rename to bin/build-sprite-string.js index 8dcdf6a7..06dbc6cf 100644 --- a/bin/build-sprite-function.js +++ b/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 ` diff --git a/bin/build-sprite.js b/bin/build-sprite.js index f75d785e..23548f0d 100644 --- 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); From 7b5bdfa359fb2853405fe71248b318594d0d64de Mon Sep 17 00:00:00 2001 From: Ivan Quirino Date: Tue, 20 Feb 2018 16:27:38 -0300 Subject: [PATCH 3/8] feat(svg-sprite): Adds build sprite script with tests and docs fixes the buildSpriteString function name --- bin/__tests__/build-sprite.test.js | 4 ++-- bin/build-sprite-string.js | 2 +- bin/build-sprite.js | 4 ++-- 3 files changed, 5 insertions(+), 5 deletions(-) diff --git a/bin/__tests__/build-sprite.test.js b/bin/__tests__/build-sprite.test.js index fe068ff7..ac08fa6d 100644 --- 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-string'; +import buildSpriteString from '../build-sprite-string'; const icons = { icon1: @@ -8,5 +8,5 @@ const icons = { }; test('builds sprite correctly', () => { - expect(buildSprite(icons)).toMatchSnapshot(); + expect(buildSpriteString(icons)).toMatchSnapshot(); }); diff --git a/bin/build-sprite-string.js b/bin/build-sprite-string.js index 06dbc6cf..e5c2002a 100644 --- a/bin/build-sprite-string.js +++ b/bin/build-sprite-string.js @@ -17,7 +17,7 @@ const svgStartTag = ` const svgEndTag = ' \n'; -export default function buildSprite(icons) { +export default function buildSpriteString(icons) { const symbols = Object.keys(icons) .map(icon => toSvgSymbol(icon, icons[icon])) .reduce((spriteString, symbolString) => spriteString + symbolString, ''); diff --git a/bin/build-sprite.js b/bin/build-sprite.js index 23548f0d..b1a3b8ea 100644 --- a/bin/build-sprite.js +++ b/bin/build-sprite.js @@ -1,9 +1,9 @@ import fs from 'fs'; import path from 'path'; import icons from '../dist/icons.json'; -import buildSprite from './build-sprite-string'; +import buildSpriteString from './build-sprite-string'; -const sprite = buildSprite(icons); +const sprite = buildSpriteString(icons); const OUT_FILE = path.resolve(__dirname, '../dist/feather-sprite.svg'); From 32ca4bb03cee099f1ff3caa0a1b1e5dc1d8330b9 Mon Sep 17 00:00:00 2001 From: Ivan Quirino Date: Tue, 20 Feb 2018 16:30:26 -0300 Subject: [PATCH 4/8] feat(svg-sprite): Adds build sprite script with tests and docs JSDoc for the buildSpriteString function --- bin/build-sprite-string.js | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/bin/build-sprite-string.js b/bin/build-sprite-string.js index e5c2002a..b4b2bc28 100644 --- a/bin/build-sprite-string.js +++ b/bin/build-sprite-string.js @@ -17,6 +17,11 @@ const svgStartTag = ` const svgEndTag = ' \n'; +/** + * Renders the inner sprites as SVG Symbols + * @param {object} icons the icons object + * @returns {string} the rendered string with SVG symbols + */ export default function buildSpriteString(icons) { const symbols = Object.keys(icons) .map(icon => toSvgSymbol(icon, icons[icon])) From e97a39edcaa802ac94f046d9e7d599bd0dc9c283 Mon Sep 17 00:00:00 2001 From: Ivan Quirino Date: Tue, 20 Feb 2018 16:37:16 -0300 Subject: [PATCH 5/8] feat(svg-sprite): Adds build sprite script with tests and docs * fixes add SVG sprite to the table of contents * fixes incorrect CSS example * renames the test correctly --- README.md | 3 ++- .../{build-sprite.test.js => build-sprite-string.test.js} | 0 2 files changed, 2 insertions(+), 1 deletion(-) rename bin/__tests__/{build-sprite.test.js => build-sprite-string.test.js} (100%) diff --git a/README.md b/README.md index 087b7493..d4ee428f 100644 --- a/README.md +++ b/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) @@ -192,7 +193,7 @@ Same result but using a CSS class: stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; - fill: none + fill: none; } ``` ```html diff --git a/bin/__tests__/build-sprite.test.js b/bin/__tests__/build-sprite-string.test.js similarity index 100% rename from bin/__tests__/build-sprite.test.js rename to bin/__tests__/build-sprite-string.test.js From ba70b751330d7d476d9c72bb57b39d182bced61d Mon Sep 17 00:00:00 2001 From: Ivan Quirino Date: Tue, 20 Feb 2018 16:44:59 -0300 Subject: [PATCH 6/8] feat(svg-sprite): Adds build sprite script with tests and docs fix snapshot file name --- ...build-sprite.test.js.snap => build-sprite-string.test.js.snap} | 0 1 file changed, 0 insertions(+), 0 deletions(-) rename bin/__tests__/__snapshots__/{build-sprite.test.js.snap => build-sprite-string.test.js.snap} (100%) diff --git a/bin/__tests__/__snapshots__/build-sprite.test.js.snap b/bin/__tests__/__snapshots__/build-sprite-string.test.js.snap similarity index 100% rename from bin/__tests__/__snapshots__/build-sprite.test.js.snap rename to bin/__tests__/__snapshots__/build-sprite-string.test.js.snap From abf4b1ed51b1284e753d87a42b48e4343c154fce Mon Sep 17 00:00:00 2001 From: Ivan Quirino Date: Tue, 20 Feb 2018 16:48:16 -0300 Subject: [PATCH 7/8] feat(svg-sprite): Adds build sprite script with tests and docs file code styling --- bin/build-sprite-string.js | 29 +++++++++++++++-------------- 1 file changed, 15 insertions(+), 14 deletions(-) diff --git a/bin/build-sprite-string.js b/bin/build-sprite-string.js index b4b2bc28..6ac4979d 100644 --- a/bin/build-sprite-string.js +++ b/bin/build-sprite-string.js @@ -1,20 +1,7 @@ import defaultAttrs from '../src/default-attrs.json'; -/** - * 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 ` - ${contents} - \n`; -} - const svgStartTag = ` \n`; - const svgEndTag = ' \n'; /** @@ -22,10 +9,24 @@ const svgEndTag = ' \n'; * @param {object} icons the icons object * @returns {string} the rendered string with SVG symbols */ -export default function buildSpriteString(icons) { +function buildSpriteString(icons) { const symbols = Object.keys(icons) .map(icon => toSvgSymbol(icon, icons[icon])) .reduce((spriteString, symbolString) => spriteString + symbolString, ''); 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 ` + ${contents} + \n`; +} + +export default buildSpriteString; From 19354553b36a3ed85047a5d4a06231ed718f2b6c Mon Sep 17 00:00:00 2001 From: Ivan Quirino Date: Tue, 20 Feb 2018 20:43:15 -0300 Subject: [PATCH 8/8] feat(svg-sprite): fixes and recommendations --- .../build-sprite-string.test.js.snap | 16 ++++++++-------- bin/build-sprite-string.js | 12 +++++------- 2 files changed, 13 insertions(+), 15 deletions(-) diff --git a/bin/__tests__/__snapshots__/build-sprite-string.test.js.snap b/bin/__tests__/__snapshots__/build-sprite-string.test.js.snap index 04ea39c6..8371f2e0 100644 --- a/bin/__tests__/__snapshots__/build-sprite-string.test.js.snap +++ b/bin/__tests__/__snapshots__/build-sprite-string.test.js.snap @@ -2,13 +2,13 @@ exports[`builds sprite correctly 1`] = ` " - - - - - - - - + + + + + + + + " `; diff --git a/bin/build-sprite-string.js b/bin/build-sprite-string.js index 6ac4979d..fcea9130 100644 --- a/bin/build-sprite-string.js +++ b/bin/build-sprite-string.js @@ -1,8 +1,7 @@ import defaultAttrs from '../src/default-attrs.json'; -const svgStartTag = ` - \n`; -const svgEndTag = ' \n'; +const svgStartTag = `\n\n`; +const svgEndTag = '\n'; /** * Renders the inner sprites as SVG Symbols @@ -12,7 +11,7 @@ const svgEndTag = ' \n'; function buildSpriteString(icons) { const symbols = Object.keys(icons) .map(icon => toSvgSymbol(icon, icons[icon])) - .reduce((spriteString, symbolString) => spriteString + symbolString, ''); + .join(''); return svgStartTag + symbols + svgEndTag; } @@ -24,9 +23,8 @@ function buildSpriteString(icons) { * @returns {string} the rendered SVG symbol */ function toSvgSymbol(name, contents) { - return ` - ${contents} - \n`; + return ` +${contents}\n\n`; } export default buildSpriteString;