Get a preview.html going

filamentgroup · Nov 27, 2013 · 44d18ef · 44d18ef
1 parent 6e5724a
commit 44d18ef
Show file tree

Hide file tree

Showing 98 changed files with 1,249 additions and 995 deletions.
diff --git a/Gruntfile.js b/Gruntfile.js
@@ -13,6 +13,16 @@ module.exports = function(grunt) {
 			files: '<config:lint.files>',
 			tasks: 'default'
 		},
+		svgmin: {
+			dist: {
+				files: [{
+					expand: true,
+					cwd: 'example/svgs',
+					src: ['*.svg'],
+					dest: 'example/source'
+				}]
+			}
+		},
 		grunticon: {
 			foo: {
 				options: {
@@ -93,9 +103,10 @@ module.exports = function(grunt) {
 
 	grunt.loadNpmTasks( 'grunt-contrib-jshint' );
 	grunt.loadNpmTasks( 'grunt-contrib-nodeunit' );
+	grunt.loadNpmTasks( 'grunt-svgmin' );
 
 	// Default task.
-	grunt.registerTask('default', ['nodeunit', 'jshint', 'grunticon:foo']);
+	grunt.registerTask('default', ['nodeunit', 'jshint', 'svgmin', 'grunticon:foo']);
 	grunt.registerTask('skip-tests', ['jshint', 'grunticon:foo']);
 	grunt.registerTask('travis', ['nodeunit', 'jshint', 'grunticon:foo']);
 

diff --git a/example/output/Home_Media.png b/example/output/Home_Media.png
diff --git a/example/output/Image_Exchange.png b/example/output/Image_Exchange.png
diff --git a/example/output/Internet-no-width-no-height.png b/example/output/Internet-no-width-no-height.png
diff --git a/example/output/Internet.png b/example/output/Internet.png
diff --git a/example/output/Internet_FP2.png b/example/output/Internet_FP2.png
diff --git a/example/output/Internet_Radio.png b/example/output/Internet_Radio.png
diff --git a/example/output/Internet_Tel.png b/example/output/Internet_Tel.png
diff --git a/example/output/Intranet.png b/example/output/Intranet.png
diff --git a/example/output/arrow-11.png b/example/output/arrow-11.png
diff --git a/example/output/arrow-btn.png b/example/output/arrow-btn.png
diff --git a/example/output/arrow-tiny.png b/example/output/arrow-tiny.png
diff --git a/example/output/bear-2.png b/example/output/bear-2.png
diff --git a/example/output/bear-blue.png b/example/output/bear-blue.png
diff --git a/example/output/bear.colors-primary-blue-aa0000.png b/example/output/bear.colors-primary-blue-aa0000.png
diff --git a/example/output/bear.png b/example/output/bear.png
diff --git a/example/output/cat.png b/example/output/cat.png
diff --git a/example/output/cyrillic.png b/example/output/cyrillic.png
diff --git a/example/output/fishing-hook.png b/example/output/fishing-hook.png
diff --git a/example/output/flag.png b/example/output/flag.png
diff --git a/example/output/gear.png b/example/output/gear.png
diff --git a/example/output/gradients-flat-opacity.png b/example/output/gradients-flat-opacity.png
diff --git a/example/output/gradients.png b/example/output/gradients.png
diff --git a/example/output/grunticon.png b/example/output/grunticon.png
diff --git a/example/output/grunticontest-2.png b/example/output/grunticontest-2.png
diff --git a/example/output/grunticontest-blue.png b/example/output/grunticontest-blue.png
diff --git a/example/output/grunticontest.colors-primary-blue-aa0000.png b/example/output/grunticontest.colors-primary-blue-aa0000.png
diff --git a/example/output/grunticontest.png b/example/output/grunticontest.png
diff --git a/example/output/gummy-bears-1.png b/example/output/gummy-bears-1.png
diff --git a/example/output/gummy-bears-2.png b/example/output/gummy-bears-2.png
diff --git a/example/output/icons.data.svg.css b/example/output/icons.data.svg.css
diff --git a/example/output/map.png b/example/output/map.png
diff --git a/example/output/menu.png b/example/output/menu.png
diff --git a/example/output/over-ie8-data-uri-limit.png b/example/output/over-ie8-data-uri-limit.png
diff --git a/example/output/plus.png b/example/output/plus.png
diff --git a/example/output/preview.html b/example/output/preview.html
@@ -3,47 +3,153 @@
 	<head>
 		<title>Icons Preview!</title>
 		<script>
-	/* grunticon Stylesheet Loader | https://github.com/filamentgroup/grunticon | (c) 2012 Scott Jehl, Filament Group, Inc. | MIT license. */
+			/* grunticon Stylesheet Loader | https://github.com/filamentgroup/grunticon | (c) 2012 Scott Jehl, Filament Group, Inc. | MIT license. */
 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")||window.opera&&-1===navigator.userAgent.indexOf("Chrome")),o=function(o){var r=t.document.createElement("link"),a=t.document.getElementsByTagName("script")[0];r.rel="stylesheet",r.href=e[o&&n?0:o?1:2],a.parentNode.insertBefore(r,a)},r=new t.Image;r.onerror=function(){o(!1)},r.onload=function(){o(1===r.width&&1===r.height)},r.src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///ywAAAAAAQABAAACAUwAOw=="}};
-grunticon( [ "icons.data.svg.css", "icons.data.png.css", "icons.fallback.css" ] );
+			grunticon(["icons.data.svg.css", "icons.data.png.css", "icons.fallback.css"]);
 		</script>
 	<noscript><link href="icons.fallback.css" rel="stylesheet"></noscript>
 	</head>
 	<body>
-	<pre><code>.icon-Home_Media:</code></pre><div class="icon-Home_Media" style="width: 44px; height: 44px"></div><hr/>
-	<pre><code>.icon-Image_Exchange:</code></pre><div class="icon-Image_Exchange" style="width: 44px; height: 44px"></div><hr/>
-	<pre><code>.icon-Internet-no-width-no-height:</code></pre><div class="icon-Internet-no-width-no-height" style="width: 300px; height: 200px"></div><hr/>
-	<pre><code>.icon-Internet:</code></pre><div class="icon-Internet" style="width: 44px; height: 44px"></div><hr/>
-	<pre><code>.icon-Internet_FP2:</code></pre><div class="icon-Internet_FP2" style="width: 44px; height: 44px"></div><hr/>
-	<pre><code>.icon-Internet_Radio:</code></pre><div class="icon-Internet_Radio" style="width: 44px; height: 44px"></div><hr/>
-	<pre><code>.icon-Internet_Tel:</code></pre><div class="icon-Internet_Tel" style="width: 44px; height: 44px"></div><hr/>
-	<pre><code>.icon-Intranet:</code></pre><div class="icon-Intranet" style="width: 44px; height: 44px"></div><hr/>
-	<pre><code>.icon-arrow-11:</code></pre><div class="icon-arrow-11" style="width: 30px; height: 30px"></div><hr/>
-	<pre><code>.icon-arrow-btn:</code></pre><div class="icon-arrow-btn" style="width: 13.777px; height: 20.001px"></div><hr/>
-	<pre><code>.icon-arrow-tiny:</code></pre><div class="icon-arrow-tiny" style="width: 30px; height: 30px"></div><hr/>
-	<pre><code>.icon-cat:</code></pre><div class="icon-cat" style="width: 100px; height: 100px"></div><hr/>
-	<pre><code>.icon-cyrillic:</code></pre><div class="icon-cyrillic" style="width: 650px; height: 347.078px"></div><hr/>
-	<pre><code>.icon-fishing-hook:</code></pre><div class="icon-fishing-hook" style="width: 300px; height: 200px"></div><hr/>
-	<pre><code>.icon-flag:</code></pre><div class="icon-flag" style="width: 36px; height: 26px"></div><hr/>
-	<pre><code>.icon-gear:</code></pre><div class="icon-gear" style="width: 30px; height: 30px"></div><hr/>
-	<pre><code>.icon-gradients-flat-opacity:</code></pre><div class="icon-gradients-flat-opacity" style="width: 84.501px; height: 42px"></div><hr/>
-	<pre><code>.icon-gradients:</code></pre><div class="icon-gradients" style="width: 30px; height: 30px"></div><hr/>
-	<pre><code>.icon-grunticon:</code></pre><div class="icon-grunticon" style="width: 100px; height: 100px"></div><hr/>
-	<pre><code>.icon-gummy-bears-1:</code></pre><div class="icon-gummy-bears-1" style="width: 340px; height: 448px"></div><hr/>
-	<pre><code>.icon-gummy-bears-2:</code></pre><div class="icon-gummy-bears-2" style="width: 340px; height: 449px"></div><hr/>
-	<pre><code>.icon-map:</code></pre><div class="icon-map" style="width: 24px; height: 34px"></div><hr/>
-	<pre><code>.icon-menu:</code></pre><div class="icon-menu" style="width: 20.502px; height: 11.5px"></div><hr/>
-	<pre><code>.icon-over-ie8-data-uri-limit:</code></pre><div class="icon-over-ie8-data-uri-limit" style="width: 440px; height: 230px"></div><hr/>
-	<pre><code>.icon-plus:</code></pre><div class="icon-plus" style="width: 30px; height: 30px"></div><hr/>
-	<pre><code>.icon-search:</code></pre><div class="icon-search" style="width: 15.779px; height: 16.482px"></div><hr/>
-	<pre><code>.icon-star:</code></pre><div class="icon-star" style="width: 42px; height: 42px"></div><hr/>
-	<pre><code>.icon-bear:</code></pre><div class="icon-bear" style="width: 100px; height: 62.905px"></div><hr/>
-	<pre><code>.icon-bear-primary:</code></pre><div class="icon-bear-primary" style="width: 100px; height: 62.905px"></div><hr/>
-	<pre><code>.icon-bear-2:</code></pre><div class="icon-bear-2" style="width: 100px; height: 62.905px"></div><hr/>
-	<pre><code>.icon-bear-3:</code></pre><div class="icon-bear-3" style="width: 100px; height: 62.905px"></div><hr/>
-	<pre><code>.icon-grunticontest:</code></pre><div class="icon-grunticontest" style="width: 200px; height: 200px"></div><hr/>
-	<pre><code>.icon-grunticontest-primary:</code></pre><div class="icon-grunticontest-primary" style="width: 200px; height: 200px"></div><hr/>
-	<pre><code>.icon-grunticontest-2:</code></pre><div class="icon-grunticontest-2" style="width: 200px; height: 200px"></div><hr/>
-	<pre><code>.icon-grunticontest-3:</code></pre><div class="icon-grunticontest-3" style="width: 200px; height: 200px"></div><hr/>
+
+
+			<pre><code>.icon-Home_Media:</code></pre><div class="icon-Home_Media" style="width: 44px; height: 44px;" ></div><hr/>
+
+
+
+			<pre><code>.icon-Image_Exchange:</code></pre><div class="icon-Image_Exchange" style="width: 44px; height: 44px;" ></div><hr/>
+
+
+
+			<pre><code>.icon-Internet-no-width-no-height:</code></pre><div class="icon-Internet-no-width-no-height" style="width: px; height: px;" ></div><hr/>
+
+
+
+			<pre><code>.icon-Internet:</code></pre><div class="icon-Internet" style="width: 44px; height: 44px;" ></div><hr/>
+
+
+
+			<pre><code>.icon-Internet_FP2:</code></pre><div class="icon-Internet_FP2" style="width: 44px; height: 44px;" ></div><hr/>
+
+
+
+			<pre><code>.icon-Internet_Radio:</code></pre><div class="icon-Internet_Radio" style="width: 44px; height: 44px;" ></div><hr/>
+
+
+
+			<pre><code>.icon-Internet_Tel:</code></pre><div class="icon-Internet_Tel" style="width: 44px; height: 44px;" ></div><hr/>
+
+
+
+			<pre><code>.icon-Intranet:</code></pre><div class="icon-Intranet" style="width: 44px; height: 44px;" ></div><hr/>
+
+
+
+			<pre><code>.icon-arrow-11:</code></pre><div class="icon-arrow-11" style="width: 30px; height: 30px;" ></div><hr/>
+
+
+
+			<pre><code>.icon-arrow-btn:</code></pre><div class="icon-arrow-btn" style="width: 13.777px; height: 20.001px;" ></div><hr/>
+
+
+
+			<pre><code>.icon-arrow-tiny:</code></pre><div class="icon-arrow-tiny" style="width: 30px; height: 30px;" ></div><hr/>
+
+
+
+			<pre><code>.icon-bear-2:</code></pre><div class="icon-bear-2" style="width: 100px; height: 62.905px;" ></div><hr/>
+
+
+
+			<pre><code>.icon-bear-blue:</code></pre><div class="icon-bear-blue" style="width: 100px; height: 62.905px;" ></div><hr/>
+
+
+
+			<pre><code>.icon-bear.colors-primary-blue-aa0000:</code></pre><div class="icon-bear.colors-primary-blue-aa0000" style="width: 100px; height: 62.905px;" ></div><hr/>
+
+
+
+			<pre><code>.icon-bear:</code></pre><div class="icon-bear" style="width: 100px; height: 62.905px;" ></div><hr/>
+
+
+
+			<pre><code>.icon-cat:</code></pre><div class="icon-cat" style="width: 100px; height: 100px;" ></div><hr/>
+
+
+
+			<pre><code>.icon-cyrillic:</code></pre><div class="icon-cyrillic" style="width: 650px; height: 347.078px;" ></div><hr/>
+
+
+
+			<pre><code>.icon-fishing-hook:</code></pre><div class="icon-fishing-hook" style="width: px; height: px;" ></div><hr/>
+
+
+
+			<pre><code>.icon-flag:</code></pre><div class="icon-flag" style="width: 36px; height: 26px;" ></div><hr/>
+
+
+
+			<pre><code>.icon-gear:</code></pre><div class="icon-gear" style="width: 30px; height: 30px;" ></div><hr/>
+
+
+
+			<pre><code>.icon-gradients-flat-opacity:</code></pre><div class="icon-gradients-flat-opacity" style="width: 84.501px; height: 42px;" ></div><hr/>
+
+
+
+			<pre><code>.icon-gradients:</code></pre><div class="icon-gradients" style="width: 30px; height: 30px;" ></div><hr/>
+
+
+
+			<pre><code>.icon-grunticon:</code></pre><div class="icon-grunticon" style="width: 100px; height: 100px;" ></div><hr/>
+
+
+
+			<pre><code>.icon-grunticontest-2:</code></pre><div class="icon-grunticontest-2" style="width: 200px; height: 200px;" ></div><hr/>
+
+
+
+			<pre><code>.icon-grunticontest-blue:</code></pre><div class="icon-grunticontest-blue" style="width: 200px; height: 200px;" ></div><hr/>
+
+
+
+			<pre><code>.icon-grunticontest.colors-primary-blue-aa0000:</code></pre><div class="icon-grunticontest.colors-primary-blue-aa0000" style="width: 200px; height: 200px;" ></div><hr/>
+
+
+
+			<pre><code>.icon-grunticontest:</code></pre><div class="icon-grunticontest" style="width: 200px; height: 200px;" ></div><hr/>
+
+
+
+			<pre><code>.icon-gummy-bears-1:</code></pre><div class="icon-gummy-bears-1" style="width: 340px; height: 448px;" ></div><hr/>
+
+
+
+			<pre><code>.icon-gummy-bears-2:</code></pre><div class="icon-gummy-bears-2" style="width: 340px; height: 449px;" ></div><hr/>
+
+
+
+			<pre><code>.icon-map:</code></pre><div class="icon-map" style="width: 24px; height: 34px;" ></div><hr/>
+
+
+
+			<pre><code>.icon-menu:</code></pre><div class="icon-menu" style="width: 20.502px; height: 11.5px;" ></div><hr/>
+
+
+
+			<pre><code>.icon-over-ie8-data-uri-limit:</code></pre><div class="icon-over-ie8-data-uri-limit" style="width: 440px; height: 230px;" ></div><hr/>
+
+
+
+			<pre><code>.icon-plus:</code></pre><div class="icon-plus" style="width: 30px; height: 30px;" ></div><hr/>
+
+
+
+			<pre><code>.icon-search:</code></pre><div class="icon-search" style="width: 15.779px; height: 16.482px;" ></div><hr/>
+
+
+
+			<pre><code>.icon-star:</code></pre><div class="icon-star" style="width: 42px; height: 42px;" ></div><hr/>
+
+
 </body>
-</html>
+</html>
diff --git a/example/output/search.png b/example/output/search.png
diff --git a/example/output/star.png b/example/output/star.png
diff --git a/example/preview.hbs b/example/preview.hbs
@@ -0,0 +1,18 @@
+<!doctype HTML>
+<html>
+	<head>
+		<title>Icons Preview!</title>
+		<script>
+			{{{loaderText}}}
+			grunticon(["icons.data.svg.css", "icons.data.png.css", "icons.fallback.css"]);
+		</script>
+	<noscript><link href="icons.fallback.css" rel="stylesheet"></noscript>
+	</head>
+	<body>
+		{{#each icons}}
+			{{#with this}}
+			<pre><code>.icon-{{name}}:</code></pre><div class="icon-{{name}}" style="width: {{width}}px; height: {{height}}px;" ></div><hr/>
+			{{/with}}
+		{{/each}}
+</body>
+</html>