Grunticon support in SS.

README.md

Docs

Generating Icons in Multiple Colors

The SVGs in themes/gwmetlink/images/icons-svg-src are color-less. In order to use them on the site, we need them in multiple colors. Run the grunt shell:recolour_icons task to do this.

Generating Icon CSS Data with Grunticon

Grunticon is a way to efficiently provide SVG icons to browsers, including fallbacks for browsers which don't support it. The resulting files need to be regenerated whenever an SVG icon (currently located in themes/gwmetlink/images/icons-svg-src) is added or changed.

First, install NPM and Grunt. Then run an npm install in your webroot.

To regenerate the icons, run grunt grunticon.

Gruntfile.js

/*jshint node:true*/
module.exports = function(grunt) {

"use strict";

grunt.initConfig({
  pkg: grunt.file.readJSON('package.json'),
	grunticon: {
    mobileIcons: {
      options: {
        src: "themes/gwmetlink/images/icons-svg/",
        dest: "themes/gwmetlink/css/icons"
      }
    }
  },
	grunt: {
		files: {
			src: [
				'Gruntfile.js'
			]
		}
	},
	shell: {
		recolour_icons: {
			command: 'for file in `ls themes/gwmetlink/images/icons-svg-src/*.svg`; do tools/recolour_icons.sh $file themes/gwmetlink/images/icons-svg/ "#ffffff:light" "#d9dc59:active"; done',
			options: {
				stdout: true
      }
		}
	}
});

grunt.loadNpmTasks('grunt-shell');
grunt.loadNpmTasks('grunt-grunticon');

grunt.registerTask('default', ['shell:recolour_icons', 'grunticon']);

};

package.json

{
  "name": "gwmetlink",
  "version": "0.1.0",
  "devDependencies": {
    "grunt": "~0.4.1",
    "grunt-grunticon": "*",
    "grunt-shell": "*"
  }
}

Page.php

<?php
class Page_Controller extends ContentController {

  function init() {
		parent::init();

		// ...
		
		// Include SVG icons (with png fallbacks) for both desktop and mobile.
		// Generated through grunticon, see gwmetlink/docs for details.
		$iconFolder = 'themes/gwmetlink/css/icons/'
		Requirements::insertHeadTags(
			'<script>'
			. 'window.grunticon=function(e){if(e&&3===e.length){var t=window,n=!!t.document.createElementNS&&!!t.document.createElementNS("http://www.w3.org/2000/svg","svg").createSVGRect&&!!document.implementation.hasFeature("http://www.w3.org/TR/SVG11/feature#Image","1.1"),A=function(A){var o=t.document.createElement("link"),r=t.document.getElementsByTagName("script")[0];o.rel="stylesheet",o.href=e[A&&n?0:A?1:2],r.parentNode.insertBefore(o,r)},o=new t.Image;o.onerror=function(){A(!1)},o.onload=function(){A(1===o.width&&1===o.height)},o.src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///ywAAAAAAQABAAACAUwAOw=="}};'
			. 'grunticon( [ "' . $iconFolder . 'icons.data.svg.css", "' . $iconFolder . 'icons.data.png.css", "' . $iconFolder . 'icons.fallback.css" ] );</script>'
			. '<noscript><link href="' . $iconFolder . 'icons.fallback.css" rel="stylesheet"></noscript>'
		);
	}
}

recolour_icons.sh

#!/bin/bash

# Generates color variations of the given SVG file,
# and saves each variation into a new file.
# A variation consists of a fill color and an alias, which will be suffixed to the file name.
# Assumes that input SVG doesn't use any "fill" or "stroke" properties,
# since it globally modifies the "fill" on the <svg> container

recolour() {
  filepath=$1
	destdir=$2
	shift
	shift
	filename=$(basename "$filepath")
	cp $filepath "${destdir}${filename}"
  for pair in "$@"; do
  	parts=(${pair//:/ })
    color=${parts[0]}
    coloralias=${parts[1]}
    
    newfilename=${filename/.svg/.$coloralias.svg }
    newfilepath="${destdir}${newfilename}"
    sed -e "s/<svg/<svg fill=\"$color\"/" -e "s/#[a-fA-F0-9]\{6\}/$color/g" $filepath > $newfilepath
    echo "Converted $filepath > $newfilepath"
  done
}

if [[ $# -lt 2 ]]; then
    echo "Usage: $0 filepath destdir color1:name1 color2:name2 ..."
    echo "Example: $0 myicon.svg icons-generated/ '#ffffff:light' '#d9dc59:active'"
    exit 1
fi

recolour $@