icons sprite

gulpfile.js

@@ -6,6 +6,33 @@ const gulp = require('gulp'),
 
 
 gulp.task('icons-sprite', function (cb) {
+	glob("_site/icons/*.svg", {}, function (er, files) {
+
+		let svgContent = '';
+
+		files.forEach(function (file, i) {
+			let name = path.basename(file, '.svg'),
+				svgFile = fs.readFileSync(file),
+				svgFileContent = svgFile.toString();
+
+			svgFileContent = svgFileContent
+				.replace(/<svg[^>]+>/g, '')
+				.replace(/<\/svg>/g, '')
+				.replace(/\n+/g, '')
+				.replace(/>\s+</g, '><')
+				.trim();
+
+			svgContent += `<symbol id="${name}" viewBox="0 0 24 24">${svgFileContent}</symbol>`
+		});
+
+		let svg = `<svg xmlns="http://www.w3.org/2000/svg"><defs>${svgContent}</defs></svg>`;
+
+		fs.writeFileSync('icons-sprite.svg', svg);
+		cb();
+	});
+});
+
+gulp.task('icons-preview', function (cb) {
 	const columnsCount = 17,
 		padding = 29,
 		paddingOuter = 5,
@@ -46,7 +73,7 @@ gulp.task('icons-sprite', function (cb) {
 
 		const svgContent = `<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 ${width} ${height}" width="${width}" height="${height}" style="color: #354052"><rect x="0" y="0" width="${width}" height="${height}" fill="#fff"></rect>\n${svgContentSymbols}\n${svgContentIcons}\n</svg>`;
 
-		fs.writeFileSync('icons.svg', svgContent);
+		fs.writeFileSync('demo/icons.svg', svgContent);
 		cb();
 	});
 });
@@ -82,7 +109,7 @@ gulp.task('icons-stroke', function (cb) {
 
 	const svgContent = `<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 ${width} ${height}" width="${width}" height="${height}" style="color: #354052"><rect x="0" y="0" width="${width}" height="${height}" fill="#fff"></rect>\n${svgContentSymbols}\n${svgContentIcons}\n</svg>`;
 
-	fs.writeFileSync('icons-stroke.svg', svgContent);
+	fs.writeFileSync('demo/icons-stroke.svg', svgContent);
 	cb();
 });
 
@@ -102,8 +129,6 @@ gulp.task('optimize', function (cb) {
 				.replace(/\s+"/g, '"')
 				.replace(/\n\n+/g, "\n");
 
-			console.log('file', file);
-
 			fs.writeFileSync(file, svgFileContent);
 		});
 

package.json

@@ -14,7 +14,7 @@
   "main": "gulpfile.js",
   "scripts": {
     "optimize": "gulp optimize",
-    "build": "gulp optimize && gulp build && gulp icons-sprite"
+    "build": "gulp optimize && gulp build && gulp icons-preview && gulp icons-sprite"
   },
   "description": "",
   "devDependencies": {

readme.md

@@ -2,8 +2,8 @@
 
 A set of almost 300 free MIT-licensed high-quality SVG icons for you to use in your web projects.
 
-![Tabler icons](./icons.svg)
+![Tabler icons](demo/icons.svg)
 
 ### Multiple strokes
 
-![Tabler icons](./icons-stroke.svg)
+![Tabler icons](demo/icons-stroke.svg)