feat: build svg spritesheet

package.json

@@ -132,7 +132,8 @@
     "ignore": [
       "dist/*",
       "dev/*",
-      "*/stories/*"
+      "*/stories/*",
+      "assets/**/spritesheet.svg"
     ]
   }
 }

src/tools/post-build.ts

@@ -188,6 +188,8 @@ I welcome every contribution on GitHub!
       }
     }
 
+    await createSvgSpritesheet(buildNbr);
+
     console.info([
       "",
       `Successfully built for ${envText} - build number (last commit SHA): ${buildNbr}`,
@@ -501,3 +503,37 @@ function getFileHashSha256(path: string): Promise<string> {
     stream.on("error", rej);
   });
 }
+
+/** Compiles all `icon-*` assets into a single SVG spritesheet file and writes it to `assets/icons/spritesheet.svg` */
+async function createSvgSpritesheet(buildNbr: string) {
+  try {
+    const sprites: string[] = [],
+      promises: Promise<void>[] = [];
+
+    for(const [name, val] of Object.entries(resourcesJson.resources)) {
+      if(!/^icon-/.test(name))
+        continue;
+
+      promises.push(new Promise(async (res) => {
+        const iconPath = resolveResourcePath(typeof val === "string" ? val : val.path);
+        const iconSvg = String(await readFile(iconPath)).replace(/\n/g, "");
+        const viewBox = iconSvg.match(/viewBox="([^"]+)"/)?.[1] ?? "0 0 24 24";
+
+        sprites.push(`<symbol id="bytm-svg-${name}" viewBox="${viewBox}">\n    ${iconSvg}\n  </symbol>`);
+        res();
+      }));
+    }
+
+    await Promise.allSettled(promises);
+
+    await writeFile(resolveResourcePath("icons/spritesheet.svg"), `\
+<svg xmlns="http://www.w3.org/2000/svg" id="bytm-svg-icon-container" data-build="${buildNbr}" style="display: none;" inert="true">
+  ${sprites.join("\n  ")}
+</svg>`
+    );
+  }
+  catch(err) {
+    console.error(k.red("Error while creating SVG spritesheet:"), err);
+    return schedExit(1);
+  }
+}