Update readme.

README.md

@@ -13,6 +13,8 @@ A lazy way to generate sprites and proper CSS with retina support. Feel free to
 
 ## Example
 
+[Demo Example](https://res.devework.com/2018/postcss-lazysprite/html/index.html)
+
 ### Input
 
 ```CSS
@@ -68,7 +70,7 @@ A lazy way to generate sprites and proper CSS with retina support. Feel free to
 > Just a example for above output result, you can dynamic yourself with options.
 
 ```
-.
+.			
 ├── gulpfile.js
 ├── dist
 └── src
@@ -78,12 +80,12 @@ A lazy way to generate sprites and proper CSS with retina support. Feel free to
     │   └── index.html
     └── slice
         └── filetype
-			├── excel.png
-			├── excel_2x.png
-			├── pdf.svg
-			├── ppt.png
-			├── ppt@2x.png
-			└── word.svg
+            ├── excel.png
+            ├── excel_2x.png
+            ├── pdf.svg
+            ├── ppt.png
+            ├── ppt@2x.png
+            └── word.svg
 ```
 
 More examples with different options: [nameSpace](./examples/nameSpace.md), [outputDimensions](./examples/outputDimensions.md), [dynamicClassBlock](./examples/dynamicClassBlock.md), [pseudoClass](./examples/pseudoClass.md)
@@ -94,7 +96,7 @@ More examples with different options: [nameSpace](./examples/nameSpace.md), [out
 
 - Retina support (`@2x`, `@3x`, `_2x`, `_3x` are all available).
 
-- Support SVG Sprites.
+- Support SVG Sprites. [Demo](https://res.devework.com/2018/postcss-lazysprite/html/index.html)
 
 - Fully work well with Source Map.
 

examples/src/html/index.html

@@ -16,25 +16,25 @@
 
 	<p>Tip: the result is in <code>./examples/<strong>dist</strong>/html/index.html</code></p>
 
-	<h2>file-type</h2>
+	<h2>file-type ( PNG + SVG Sprites )</h2>
 	<i class="icon-filetype icon-filetype__excel"></i>
 	<i class="icon-filetype icon-filetype__pdf"></i>
 	<i class="icon-filetype icon-filetype__ppt"></i>
 	<i class="icon-filetype icon-filetype__word"></i>
 
-	<h2>center</h2>
+	<h2>center ( Pure PNG Sprites )</h2>
 	<i class="icon-center icon-center__dl"></i>
 	<i class="icon-center icon-center__gift"></i>
 	<i class="icon-center icon-center__start"></i>
 	<i class="icon-center icon-center__time"></i>
 	<i class="icon-center icon-center__wechat"></i>
 
-	<h3>logo</h3>
+	<h3>logo  ( Pure PNG Sprites )</h3>
 	<i class="icon-branch icon-branch__QQMail"></i>
 	<i class="icon-branch icon-branch__WeRead"></i>
 	<i class="icon-branch icon-branch__WeWork"></i>
-	
-	<h3>apps</h3>
+
+	<h3>apps  ( Pure SVG Sprites )</h3>
 	<i class="icon-branch icon-app__card-big"></i>
 	<i class="icon-branch icon-app__invest"></i>
 	<i class="icon-branch icon-app__notice"></i>

index.js

@@ -204,7 +204,7 @@ function extractImages(css, options) {
 		var files = fs.readdirSync(imageDir);
 		files = _.orderBy(files); // Fix orders issue in mac and win's difference.
 		_.forEach(files, function (filename) {
-			// Have to be png file
+			// Have to be png or svg file
 			var reg = /\.(png|svg)\b/i;
 			if (!reg.test(filename)) {
 				return null;