From e697b3a927b23321ce3bf5bc6fd969157c24ee3c Mon Sep 17 00:00:00 2001 From: Cole Bemis Date: Sun, 1 Apr 2018 16:25:21 -0700 Subject: [PATCH 1/3] refactor: Refactor build-sprite-string.js --- .../build-sprite-string.test.js.snap | 13 +--------- bin/build-sprite-string.js | 24 +++++++++---------- bin/build-sprite.js | 6 +---- 3 files changed, 13 insertions(+), 30 deletions(-) diff --git a/bin/__tests__/__snapshots__/build-sprite-string.test.js.snap b/bin/__tests__/__snapshots__/build-sprite-string.test.js.snap index 8371f2e..e91b092 100644 --- a/bin/__tests__/__snapshots__/build-sprite-string.test.js.snap +++ b/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`] = `""`; diff --git a/bin/build-sprite-string.js b/bin/build-sprite-string.js index fcea913..1dcaf6e 100644 --- a/bin/build-sprite-string.js +++ b/bin/build-sprite-string.js @@ -1,30 +1,28 @@ import defaultAttrs from '../src/default-attrs.json'; -const svgStartTag = `\n\n`; -const svgEndTag = '\n'; - /** - * Renders the inner sprites as SVG Symbols - * @param {object} icons the icons object - * @returns {string} the rendered string with SVG symbols + * Build an SVG sprite string containing SVG symbols. + * @param {Object} icons + * @returns {string} */ function buildSpriteString(icons) { const symbols = Object.keys(icons) .map(icon => toSvgSymbol(icon, icons[icon])) .join(''); - return svgStartTag + symbols + svgEndTag; + return `${symbols}`; } /** - * 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 + * Create an SVG symbol string. + * @param {string} name - Icon name + * @param {string} contents - SVG contents + * @returns {string} */ function toSvgSymbol(name, contents) { - return ` -${contents}\n\n`; + return `${ + contents + }`; } export default buildSpriteString; diff --git a/bin/build-sprite.js b/bin/build-sprite.js index b1a3b8e..1207b77 100644 --- a/bin/build-sprite.js +++ b/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 => { - if (err) throw err; -}); +fs.writeFileSync(OUT_FILE, buildSpriteString(icons)); From a3527829b844bb28fc27687ae5b7a4eec61f0382 Mon Sep 17 00:00:00 2001 From: Cole Bemis Date: Sun, 1 Apr 2018 16:26:54 -0700 Subject: [PATCH 2/3] chore: Add comments to build script --- bin/build.sh | 10 ++++++++++ 1 file changed, 10 insertions(+) diff --git a/bin/build.sh b/bin/build.sh index 32610cf..42602e2 100755 --- a/bin/build.sh +++ b/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 From 94531bbe7c646614b05a7b37aa4777f7093f72aa Mon Sep 17 00:00:00 2001 From: Cole Bemis Date: Sun, 1 Apr 2018 17:04:44 -0700 Subject: [PATCH 3/3] docs: Update sprite docs --- README.md | 48 +++++++++++++++++++++++++++++++++--------------- 1 file changed, 33 insertions(+), 15 deletions(-) diff --git a/README.md b/README.md index 793dd3c..98115cd 100644 --- a/README.md +++ b/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 - - + ``` -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; - height: 24px; - stroke: currentColor; - stroke-width: 2; - stroke-linecap: round; - stroke-linejoin: round; + 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