SFO-4335 Updated ffe-icons to support the suggested new build setup

.gitignore

@@ -1,2 +1,3 @@
 node_modules/
-.idea/
+dist/
+.idea/

README.md

@@ -1,10 +1,65 @@
-#Felles Front End Icons
+# Felles Front End Icons
 
-## How to use
-`$ npm install`
+This is a repository for sharing icon SVGs between projects. As long as a new icon fits in the mix of existing ones,
+feel free to add it. 
 
-### To build all icons
-`$ gulp sb1-icons`
+The package will build an SVG sprite with all icons and put it in _dist/sb1-icons/_, along with an HTML page where
+the different icons can be viewed. **This file should in most cases not be used directly!**
 
-### To build the SFO subset (color less for CSS fill injection)
-`$ gulp sfo-icons`
+Instead, ffe-icons should be used as a repository from where your build fetches only the icons that it needs, to keep
+the sprite file size as low as possible.
+
+
+### Using ffe-icons
+First add an _icons.json_ file to your project where you define what icons you want. Additionally, you can
+pass in options that [svg-sprite](https://github.com/jkphl/svg-sprite) support to override defaults.
+
+Example _icons.json_:
+
+```
+
+{
+    "dest": "app/images/",
+    "icons": [
+        "1-2-3-sirkel-ikon",
+        "bamse-ikon",
+        "dor-ikon",
+        "flamme-ikon",
+        "logo-sparebank1",
+        "twitter-ikon"
+    }
+
+    "config": {
+        "log": "error"
+    }
+}
+
+```
+
+Then start the build by running ffe-icons gulpfile. Pass in the path to your _icons.json_ file as
+the --opts argument, here assuming icons.json is in the same directory as your _node_modules_:
+
+`$ cd ./node_modules/ffe-icons && node ./node_modules/gulp/bin/gulp --opts=../../icons.json && cd ../../`
+
+The command above is a typical npm script candidate. In your projects package.json:
+
+```
+{
+    "name": "awesome-client",
+    "scripts": {
+        ...
+        "ffe:icons": "cd ./node_modules/ffe-icons && node ./node_modules/gulp/bin/gulp --opts=../../icons.json && cd ../../",
+        ...
+    }
+}
+```
+
+Then, in your terminal:
+
+`$ npm run ffe:icons`
+
+A fresh SVG sprite should now have arrived at your destination.
+
+Note: **it is recommended that you _not_ check the generated sprite into source control, but instead let ffe-icons
+generate it at build-time.** This is to ensure that, in the event of an icon being altered, it is updated for all
+ffe-icons users.

gulpfile.js

@@ -1,42 +1,58 @@
 'use strict';
 
-var gulp         = require('gulp'),
-    svgSprite    = require('gulp-svg-sprite'),
-    plumber      = require('gulp-plumber'),
-    replace      = require('gulp-replace'),
-    svgGlob      = '**/*.svg',
-    config       = {
-        "log": "info",
-        "svg": {
-            "dimensionAttributes": false
-        },
-        "shape": {
-            dimension       : {                         // Dimension related options
-                maxWidth    : 150,                     // Max. shape width
-                precision   : 2,                        // Floating point precision
-                attributes  : false                    // Width and height attributes on embedded shapes
-            }
-        },
-        "mode": {
-            symbol: {
-                sprite          : "sb1-icons.svg",
-                example         : true
+var gulp = require('gulp'),
+    svgSprite = require('gulp-svg-sprite'),
+    plumber = require('gulp-plumber'),
+    replace = require('gulp-replace'),
+    objectAssign = require('object-assign'),
+
+    argv = require('yargs').argv,
+
+    options = {
+        'icons': '**/*.svg',
+        'dest': 'dist/',
+        'cwd': './',
+        'config': {
+            'log': 'info',
+            'svg': {
+                'dimensionAttributes': false
+            },
+            'shape': {
+                dimension: {
+                    maxWidth: 150
+                }
+            },
+            'mode': {
+                symbol: {
+                    sprite: 'sb1-icons.svg',
+                    example: true
+                }
             }
-        },
-        "variables": {}
+        }
     };
 
-gulp.task('sb1-icons', function() {
-    return gulp.src(svgGlob, {cwd: 'icons'})
-        .pipe(plumber())
-        .pipe(svgSprite(config)).on('error', function(error){ console.log(error); })
-        .pipe(gulp.dest('dist/sb1-icons'))
-});
 
-gulp.task('sfo-icons', function() {
-    return gulp.src(svgGlob, {cwd: 'sfo-icons'})
+if (argv.opts) {
+    var opts = require(argv.opts);
+    options = objectAssign(options, opts);
+
+    options.cwd = '../../';
+
+    // convenience to avoid having file extension in config
+    options.icons = options.icons.map(function (icon) {
+        return icon + '.svg';
+    });
+
+    if (!opts.dest) {
+        throw Error('ffe-icons was given an options object, but no destination for the generated sprite! Update your ' +
+            'config file (e.g. icons.json) to include a "dest" property with a path to where you want the generated sprite.');
+    }
+}
+
+
+gulp.task('default', function () {
+    return gulp.src(options.icons, {cwd: 'icons'})
         .pipe(plumber())
-        .pipe(replace(' fill="#002776"', '')) // Remove royal-blue
-        .pipe(svgSprite(config)).on('error', function(error){ console.log(error); })
-        .pipe(gulp.dest('dist/sfo-icons'))
-});
+        .pipe(svgSprite(options.config)).on('error', function (error) { console.log(error); })
+        .pipe(gulp.dest(options.dest, { cwd: options.cwd }));
+});

package.json

@@ -4,8 +4,8 @@
   "description": "Felles Front End Icons",
   "main": "index.js",
   "scripts": {
-    "sb1-icons": "gulp sb1-icons",
-    "sfo-icons": "gulp sfo-icons"
+    "postinstall": "npm start",
+    "start": "gulp"
   },
   "repository": {
     "type": "git",
@@ -15,9 +15,10 @@
   "license": "ISC",
   "devDependencies": {
     "gulp": "^3.9.0",
-    "gulp-concat": "^2.6.0",
     "gulp-plumber": "^1.0.1",
     "gulp-replace": "^0.5.4",
-    "gulp-svg-sprite": "^1.2.10"
+    "gulp-svg-sprite": "^1.2.10",
+    "object-assign": "^4.0.1",
+    "yargs": "^3.32.0"
   }
 }