Single image icons support; root-relative output directory

CHANGELOG.md

@@ -1,3 +1,16 @@
+Beta 3 (2013-08-22)
+---------------------------
+
+#### Bugs
+
+1.	Data URI Sass rules were created although not configured 
+
+#### Enhancements / Features
+
+1.	Added support for single image icon stylesheets
+1.	Added support for root-relative CSS directory
+
+
 Beta 2 (2013-08-05)
 ---------------------------
 

README.md

@@ -2,13 +2,15 @@ iconizr
 =======
 is an – at present: proof-of-concept – **command line tool** that helps you prepare your vector based SVG icons for use with the widest possible range of devices. It takes a [folder of SVG files](example/weather) and processes them to a bunch of files including
 
-*	possibly cleaned versions of the original **SVG icons**,
+*	cleaned versions of the original **SVG icons** (optional),
 *	a single compact **[SVG icon sprite](example/css/weather-16123200/weather-16123200.svg)**,
-*	single **PNG icons**,
+*	single **PNG icons** (optional),
 *	a combined **[PNG icon sprite](example/css/weather-16123200/weather-16123200.png)**,
 *	several **CSS files** with different formats inlcuding
+	*	[SVG single image icons](example/css/weather-svg-single.css) (optional),
 	*	[SVG data URIs](example/css/weather-svg-data.css),
 	*	[SVG sprite references](example/css/weather-svg-sprite.css),
+	*	[PNG single image icons](example/css/weather-png-single.css) (optional),
 	*	[PNG data URIs](example/css/weather-png-data.css) and
 	*	[PNG sprite references](example/css/weather-png-sprite.css),
 *	**[Sass variants](example/sass)** of these CSS files for easy inclusion into your Sass project,
@@ -93,6 +95,12 @@ Usage:
 		<td> </td>
 		<td>If given, iconizr will quantize PNG images (i.e. convert them to 8-bit color depth; please see the <a href="#requirements">requirements</a> for this). The quantized images are only used if they are smaller in file size than their the originals (and this is not necessarily the case for all PNG files). Quantization may also impact the visual image quality, so please make sure to compare the result to the original images.</td>
 	</tr>
+	<tr>
+		<td><code>-r</code></td>
+		<td><code>--root</code></td>
+		<td> </td>
+		<td>If given, iconizr will use the CSS output directory as root-relative path in the stylesheet loader HTML fragment (i.e. <code>/path/to/icons.css</code> instead of <code>path/to/icons.css</code>).</td>
+	</tr>
 	<tr>
 		<td> </td>
 		<td><code>--svg</code></td>
@@ -127,7 +135,7 @@ Usage:
 		<td><code>-k</code></td>
 		<td><code>--keep</code></td>
 		<td> </td>
-		<td>During the compilation of the SVG and PNG sprites, iconizr also creates intermediate SVG and PNG versions of each single icon. Usually, these intermediate files are deleted at the end of the compilation process. If you want to keep these files for some reason, just add this argument.</td>
+		<td>During the compilation of the SVG and PNG sprites, iconizr also creates intermediate SVG and PNG versions of each single icon. Usually, these intermediate files are deleted at the end of the compilation process. If you want to keep these files for some reason, just add this argument.<br/>In this case, also an additional set of stylesheets will be created (both CSS and/or Sass), which uses these single image icons (carrying the suffix <code>-single.html</code>). However, it is not recommended to use these stylesheets for production systems, and you should always prefer the CSS sprite or data URI variants for performance reasons. The single image icon stylesheets will also be ignored by the stylesheet loader JavaScript, but at least you will be able to select them explicitly using the icon kit preview documents.</td>
 	</tr>
 	<tr>
 		<td><code>-v</code></td>

example/css/weather-loader-fragment.html

@@ -1 +1 @@
-<script>/* iconizr | https://github.com/jkphl/iconizr | © 2013 Joschi Kuphal | CC BY 3.0 */(function(){var a=window,b=a.document,c=arguments,d=function(a){var d=b.getElementsByTagName("script")[0],e=b.createElement("link");e.rel="stylesheet",e.type="text/css",e.href=c[1*a|2*(b.createElementNS&&b.createElementNS("http://www.w3.org/2000/svg","svg").createSVGRect&&b.implementation.hasFeature("http://www.w3.org/TR/SVG11/feature#Image","1.1"))],d.parentNode.insertBefore(e,d)},e=new a.Image;e.onerror=function(){d(0)},e.onload=function(){d(1===e.width&&1===e.height)},e.src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///ywAAAAAAQABAAACAUwAOw=="})("css/weather-png-sprite.css","css/weather-png-data.css","css/weather-svg-sprite.css","css/weather-svg-data.css");</script><noscript><link href="css/weather-png-sprite.css" rel="stylesheet"></noscript>
+<script type="text/javascript">/* iconizr | https://github.com/jkphl/iconizr | © 2013 Joschi Kuphal | CC BY 3.0 */(function(){var a=window,b=a.document,c=arguments,d=function(a){var d=b.getElementsByTagName("script")[0],e=b.createElement("link");e.rel="stylesheet",e.type="text/css",e.href=c[1*a|2*(b.createElementNS&&b.createElementNS("http://www.w3.org/2000/svg","svg").createSVGRect&&b.implementation.hasFeature("http://www.w3.org/TR/SVG11/feature#Image","1.1"))],d.parentNode.insertBefore(e,d)},e=new a.Image;e.onerror=function(){d(0)},e.onload=function(){d(1===e.width&&1===e.height)},e.src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///ywAAAAAAQABAAACAUwAOw=="})("/css/weather-png-sprite.css","/css/weather-png-data.css","/css/weather-svg-sprite.css","/css/weather-svg-data.css");</script><noscript><link href="css/weather-png-sprite.css" rel="stylesheet"></noscript>

example/css/weather-png-data-preview.html

@@ -0,0 +1 @@
+<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/><title>Icon kit preview | iconizr.com</title><link href="weather-png-data.css" rel="stylesheet" type="text/css"/><style type="text/css">@CHARSET "UTF-8";body{padding:0;margin:0;color:#666;background:#fafafa;font-family:Arial, Helvetica, sans-serif;font-size:1em;line-height:1.4}header{display:block;padding:3em 3em 2em 3em;background-color:#fff}header p{margin:2em 0 0 0}#logo{font-size:xx-large;font-size:3rem;padding:0;margin:0;height:53px;background:url(data:image/png;base64,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) center left no-repeat;white-space:nowrap;overflow:hidden;text-indent:100%}nav{font-size:.7em;display:block;width:100%;margin:0 0 2em 0}nav a{display:inline-block;text-decoration:none;margin-left:2em;color:#0f7595;white-space:nowrap}nav a:hover{text-decoration:underline}nav a.current{font-weight:bold;text-decoration:underline;color:#666}section{border-top:1px solid #eee;padding:2em 3em 0 3em}ul{margin:0;padding:0}li{display:inline;display:inline-block;background-color:#fff;position:relative;margin:0 2em 2em 0;vertical-align:top;border:1px solid #ccc;padding:1em 1em 3em 1em;cursor:default}.icon-box{margin:0;width:144px;height:144px;position:relative;background:#ccc url(data:image/gif;base64,R0lGODlhDAAMAIAAAMzMzP///yH/C1hNUCBEYXRhWE1QPD94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4gPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iQWRvYmUgWE1QIENvcmUgNS4wLWMwNjEgNjQuMTQwOTQ5LCAyMDEwLzEyLzA3LTEwOjU3OjAxICAgICAgICAiPiA8cmRmOlJERiB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiPiA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtbG5zOnhtcE1NPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvbW0vIiB4bWxuczpzdFJlZj0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL3NUeXBlL1Jlc291cmNlUmVmIyIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgQ1M1LjEgV2luZG93cyIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDozQjk4OTI0MUY5NTIxMUUyQkJDMEI5NEFEM0Y1QTYwQyIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDozQjk4OTI0MkY5NTIxMUUyQkJDMEI5NEFEM0Y1QTYwQyI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOjNCOTg5MjNGRjk1MjExRTJCQkMwQjk0QUQzRjVBNjBDIiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOjNCOTg5MjQwRjk1MjExRTJCQkMwQjk0QUQzRjVBNjBDIi8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+Af/+/fz7+vn49/b19PPy8fDv7u3s6+rp6Ofm5eTj4uHg397d3Nva2djX1tXU09LR0M/OzczLysnIx8bFxMPCwcC/vr28u7q5uLe2tbSzsrGwr66trKuqqainpqWko6KhoJ+enZybmpmYl5aVlJOSkZCPjo2Mi4qJiIeGhYSDgoGAf359fHt6eXh3dnV0c3JxcG9ubWxramloZ2ZlZGNiYWBfXl1cW1pZWFdWVVRTUlFQT05NTEtKSUhHRkVEQ0JBQD8+PTw7Ojk4NzY1NDMyMTAvLi0sKyopKCcmJSQjIiEgHx4dHBsaGRgXFhUUExIREA8ODQwLCgkIBwYFBAMCAQAAIfkEAAAAAAAsAAAAAAwADAAAAhaEH6mHmmzcgzJAUG/NVGrfOZ8YLlABADs=) top left repeat;border:1px solid #ccc;display:table-cell;vertical-align:middle;text-align:center}.icon{display:inline;display:inline-block}h2{margin:0;padding:0;font-size:1em;font-weight:normal;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;position:absolute;left:1em;right:1em;bottom:1em}footer{display:block;margin:0;padding:0 3em 3em 3em}footer p{margin:0;font-size:.7em}footer a{color:#0f7595;margin-left:0}</style></head><body><header><h1 id="logo">iconizr</h1><p>These are the <strong>10 icons</strong> contained in your icon kit, along with their CSS class names.</p></header><section><nav>Icon type:<a href="weather-preview.html">Automatic detection</a><a href="weather-png-single-preview.html">PNG single images</a><a href="weather-png-sprite-preview.html">PNG sprite</a><a href="weather-png-data-preview.html" class="current">PNG data URIs</a><a href="weather-svg-single-preview.html">SVG single images</a><a href="weather-svg-sprite-preview.html">SVG sprite</a><a href="weather-svg-data-preview.html">SVG data URIs</a></nav><ul><li title="icon-weather-clear-night"><div class="icon-box"><div class="icon icon-weather-clear-night icon-weather-clear-night-dims"><!-- icon-weather-clear-night --></div></div><h2>icon-weather-clear-night</h2></li><li title="icon-weather-clear"><div class="icon-box"><div class="icon icon-weather-clear icon-weather-clear-dims"><!-- icon-weather-clear --></div></div><h2>icon-weather-clear</h2></li><li title="icon-weather-few-clouds-night"><div class="icon-box"><div class="icon icon-weather-few-clouds-night icon-weather-few-clouds-night-dims"><!-- icon-weather-few-clouds-night --></div></div><h2>icon-weather-few-clouds-night</h2></li><li title="icon-weather-few-clouds"><div class="icon-box"><div class="icon icon-weather-few-clouds icon-weather-few-clouds-dims"><!-- icon-weather-few-clouds --></div></div><h2>icon-weather-few-clouds</h2></li><li title="icon-weather-overcast"><div class="icon-box"><div class="icon icon-weather-overcast icon-weather-overcast-dims"><!-- icon-weather-overcast --></div></div><h2>icon-weather-overcast</h2></li><li title="icon-weather-severe-alert"><div class="icon-box"><div class="icon icon-weather-severe-alert icon-weather-severe-alert-dims"><!-- icon-weather-severe-alert --></div></div><h2>icon-weather-severe-alert</h2></li><li title="icon-weather-showers-scattered"><div class="icon-box"><div class="icon icon-weather-showers-scattered icon-weather-showers-scattered-dims"><!-- icon-weather-showers-scattered --></div></div><h2>icon-weather-showers-scattered</h2></li><li title="icon-weather-showers"><div class="icon-box"><div class="icon icon-weather-showers icon-weather-showers-dims"><!-- icon-weather-showers --></div></div><h2>icon-weather-showers</h2></li><li title="icon-weather-snow"><div class="icon-box"><div class="icon icon-weather-snow icon-weather-snow-dims"><!-- icon-weather-snow --></div></div><h2>icon-weather-snow</h2></li><li title="icon-weather-storm"><div class="icon-box"><div class="icon icon-weather-storm icon-weather-storm-dims"><!-- icon-weather-storm --></div></div><h2>icon-weather-storm</h2></li></ul></section><footer><p>Generated at Thu, 22 Aug 2013 15:05:22 GMT by <a href="http://iconizr.com" target="_blank">iconizr</a>.</p></footer></body></html>