Gulp: Modify 'svgsprite' task to support generation of multiple sprites

gulp/config/path.js

@@ -20,15 +20,15 @@ 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`,
 		scss: `${srcFolder}/scss/**/*.scss`,
 		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,

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());
+	});
 }

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>