From e78ef11f3d0a2e88d15859c8901669a3883ef3d3 Mon Sep 17 00:00:00 2001
From: ASTIK <astik.ytt@gmail.com>
Date: Tue, 6 Feb 2024 18:41:59 +0100
Subject: [PATCH] Gulp: Modify 'svgsprite' task to support generation of
 multiple sprites

---
 gulp/config/path.js                      |  4 +--
 gulp/tasks/svgsprite.js                  | 44 +++++++++++++++++-------
 src/components/_footer.html              |  8 ++---
 src/svgicons/{ => socials}/dribbble.svg  |  0
 src/svgicons/{ => socials}/instagram.svg |  0
 src/svgicons/{ => socials}/twitter.svg   |  0
 src/svgicons/{ => socials}/youtube.svg   |  0
 7 files changed, 38 insertions(+), 18 deletions(-)
 rename src/svgicons/{ => socials}/dribbble.svg (100%)
 rename src/svgicons/{ => socials}/instagram.svg (100%)
 rename src/svgicons/{ => socials}/twitter.svg (100%)
 rename src/svgicons/{ => socials}/youtube.svg (100%)

diff --git a/gulp/config/path.js b/gulp/config/path.js
index 7446c31..f9e307b 100644
--- a/gulp/config/path.js
+++ b/gulp/config/path.js
@@ -20,7 +20,7 @@ export const path = {
 		scss: `${srcFolder}/scss/style.scss`,
 		html: `${srcFolder}/*.html`,
 		files: `${srcFolder}/files/**/*.*`,
-		svgicons: `${srcFolder}/svgicons/*.svg`,
+		svgicons: `${srcFolder}/svgicons`,
 	},
 	watch: {
 		js: `${srcFolder}/js/**/*.js`,
@@ -28,7 +28,7 @@ export const path = {
 		html: `${srcFolder}/**/*.html`,
 		images: `${srcFolder}/img/**/*.{jpg,jpeg,png,svg,gif,ico,webp}`,
 		files: `${srcFolder}/files/**/*.*`,
-		svgicons: `${srcFolder}/svgicons/*.svg`,
+		svgicons: `${srcFolder}/svgicons/**/*.svg`,
 	},
 	buildFolder: buildFolder,
 	srcFolder: srcFolder,
diff --git a/gulp/tasks/svgsprite.js b/gulp/tasks/svgsprite.js
index d1eeeb0..c0e615f 100644
--- a/gulp/tasks/svgsprite.js
+++ b/gulp/tasks/svgsprite.js
@@ -1,15 +1,35 @@
 import svgSprite from "gulp-svg-sprite";
+import fs from "fs";
 
-export const svgsprite = () => {
-	return app.gulp.src(app.path.src.svgicons)
-		.pipe(app.plugins.plumber())
-		.pipe(svgSprite({
-			mode: {
-				stack: {
-					sprite: "../icons/icons.svg",
-				}
-			}
-		}))
-		.pipe(app.gulp.dest(app.path.build.images))
-		.pipe(app.plugins.browsersync.stream());
+export const svgsprite = async () => {
+	// Get a list of folders in the source SVG icons directory
+	const folders = fs.readdirSync(app.path.src.svgicons, {withFileTypes: true})
+		.filter(dirent => dirent.isDirectory())
+		.map(dirent => dirent.name);
+
+	// Generate tasks for each folder to create SVG sprites
+	const tasks = folders.map(folder => {
+		const srcPath = `${app.path.src.svgicons}/${folder}/*.svg`;
+		return new Promise ((resolve, reject) => {
+			app.gulp.src(srcPath)
+				.pipe(app.plugins.plumber())
+				.pipe(svgSprite({
+					mode: {
+						stack: {
+							sprite: `../svgsprite/${folder}.svg`,
+						}
+					}
+				}))
+				.pipe(app.gulp.dest(app.path.build.images))
+				.on('end', resolve)
+				.on('error', reject);
+		});
+	});
+
+	// Wait for all sprite generation tasks to complete
+	return Promise.all(tasks).then(() => {
+		// Refresh BrowserSync
+		app.gulp.src(app.path.src.svgicons)
+			.pipe(app.plugins.browsersync.stream());
+	});
 }
\ No newline at end of file
diff --git a/src/components/_footer.html b/src/components/_footer.html
index 14985d3..cba4ae3 100644
--- a/src/components/_footer.html
+++ b/src/components/_footer.html
@@ -12,19 +12,19 @@
             <div class="footer__info-socials">
                 
                 <a href="#" class="footer__info-social">
-                    <img src="img/icons/icons.svg#instagram" alt="Instagram">
+                    <img src="img/svgsprite/socials.svg#instagram" alt="Instagram">
                 </a>
                 
                 <a href="#" class="footer__info-social">
-                    <img src="img/icons/icons.svg#dribbble" alt="Dribbble">
+                    <img src="img/svgsprite/socials.svg#dribbble" alt="Dribbble">
                 </a>
                 
                 <a href="#" class="footer__info-social">
-                    <img src="img/icons/icons.svg#twitter" alt="Twitter">
+                    <img src="img/svgsprite/socials.svg#twitter" alt="Twitter">
                 </a>
                 
                 <a href="#" class="footer__info-social">
-                    <img src="img/icons/icons.svg#youtube" alt="YouTube">
+                    <img src="img/svgsprite/socials.svg#youtube" alt="YouTube">
                 </a>
             
             </div>
diff --git a/src/svgicons/dribbble.svg b/src/svgicons/socials/dribbble.svg
similarity index 100%
rename from src/svgicons/dribbble.svg
rename to src/svgicons/socials/dribbble.svg
diff --git a/src/svgicons/instagram.svg b/src/svgicons/socials/instagram.svg
similarity index 100%
rename from src/svgicons/instagram.svg
rename to src/svgicons/socials/instagram.svg
diff --git a/src/svgicons/twitter.svg b/src/svgicons/socials/twitter.svg
similarity index 100%
rename from src/svgicons/twitter.svg
rename to src/svgicons/socials/twitter.svg
diff --git a/src/svgicons/youtube.svg b/src/svgicons/socials/youtube.svg
similarity index 100%
rename from src/svgicons/youtube.svg
rename to src/svgicons/socials/youtube.svg