<!doctype HTML>
<html>
	<head>
		<title>Icons Preview!</title>
		<meta charset="utf-8">
		<style>
			body {
				background-image: linear-gradient(#eee 25%, transparent 25%, transparent), linear-gradient(#eee 25%, transparent 25%, transparent), linear-gradient(transparent 75%, #eee 75%), linear-gradient(transparent 75%, #eee 75%);
				width: auto;
				background-size: 10px 10px;
			}
		</style>
		<script>
			{{{loaderText}}}
			{{{embedText}}}
			{{#with cssFiles}}
			grunticon(["{{svg}}", "{{png}}", "{{fallback}}"], grunticon.svgLoadedCallback);
		</script>
		<noscript><link href="{{fallback}}" rel="stylesheet"></noscript>
{{/with}}
	</head>
	<body>

		<h1>CUSTOM PREVIEW - you can change this in the previewTemplate option</h1>
		{{#each icons}}
			{{#with this}}
			<pre><code>{{prefix}}{{name}}:</code></pre><div {{selectorType}}="{{selectorString}}{{name}}" style="width: {{width}}px; height: {{height}}px;" ></div><hr/>
			{{/with}}
		{{/each}}

		<h2 id="embedded-svg-option">Embedded SVG option</h2>
		<p>(The <code>data-grunticon-embed</code> attribute tells grunticon to inject SVG inline):</p>

		<pre><code>icon-burger:</code></pre><div class="icon-burger" data-grunticon-embed style="width: {{width}}px; height: {{height}}px;" ></div><hr/>

		<style>
			.icon-burger {
				width: 32px;
				height: 30px;
				display: inline-block;
			}
			  .icon-burger.alt .cheese {
		                fill: red;
		            }
				 .icon-burger.alt .buns {
		                fill: orange;
		            }
				  .icon-burger.alt .burger {
		                fill: yellow;
		            }
		 		 .icon-burger.alt .lettuce {
		                fill: green;
		            }

		</style>

		<pre><code>icon-burger (styled variation):</code></pre><div class="icon-burger alt" data-grunticon-embed></div><hr/>



</body>
</html>
