[WIP] Replace svg-mixer with svg-sprite

build/tasks/styles.js

@@ -1,7 +1,9 @@
 import loconfig from '../../loconfig.json';
 import message from '../utils/message.js';
 import notification from '../utils/notification.js';
-import postcss, { pluginsMap as postcssPluginsMap } from '../utils/postcss.js';
+import postcss, {
+    pluginsMap as postcssPluginsMap
+} from '../utils/postcss.js';
 import template from '../utils/template.js';
 import { writeFile } from 'node:fs/promises';
 import { basename } from 'node:path';

build/tasks/svgs.js

@@ -1,52 +1,100 @@
 import loconfig from '../../loconfig.json';
+import glob from '../utils/glob.js';
 import message from '../utils/message.js';
 import notification from '../utils/notification.js';
 import template from '../utils/template.js';
-import { basename } from 'node:path';
-import mixer from 'svg-mixer';
+import {
+    mkdir,
+    readFile,
+    writeFile
+} from 'node:fs/promises';
+import {
+    basename,
+    dirname,
+    join,
+    resolve
+} from 'node:path';
+import SVGSpriter from 'svg-sprite';
+import Vinyl from 'vinyl';
 
 /**
- * @const {object} defaultMixerOptions     - The default shared Mixer options.
- * @const {object} developmentMixerOptions - The predefined Mixer options for development.
- * @const {object} productionMixerOptions  - The predefined Mixer options for production.
+ * @const {object} defaultSVOOptions     - The default shared SVO options.
+ * @const {object} developmentSVOOptions - The predefined SVO options for development.
+ * @const {object} productionSVOOptions  - The predefined SVO options for production.
  */
-export const defaultMixerOptions = {
-    spriteConfig: {
-        usages: false,
+export const defaultSVOOptions = {
+};
+export const developmentSVOOptions = Object.assign({}, defaultSVOOptions);
+export const productionSVOOptions  = Object.assign({}, defaultSVOOptions);
+
+/**
+ * @const {object} defaultSVGSpriterOptions     - The default shared SVGSpriter options.
+ * @const {object} developmentSVGSpriterOptions - The predefined SVGSpriter options for development.
+ * @const {object} productionSVGSpriterOptions  - The predefined SVGSpriter options for production.
+ */
+export const defaultSVGSpriterOptions = {
+    mode: {},
+    shape: {
+        transform: [],
+    },
+    svg: {
+        doctypeDeclaration: false,
+        xmlDeclaration:     false,
     },
 };
-export const developmentMixerOptions = Object.assign({}, defaultMixerOptions);
-export const productionMixerOptions  = Object.assign({}, defaultMixerOptions);
+export const developmentSVGSpriterOptions = Object.assign({}, defaultSVGSpriterOptions);
+export const productionSVGSpriterOptions  = Object.assign({}, defaultSVGSpriterOptions);
 
 /**
  * @const {object} developmentSVGsArgs - The predefined `compileSVGs()` options for development.
  * @const {object} productionSVGsArgs  - The predefined `compileSVGs()` options for production.
  */
 export const developmentSVGsArgs = [
-    developmentMixerOptions,
+    developmentSVGSpriterOptions,
+    developmentSVOOptions,
 ];
 export const productionSVGsArgs  = [
-    productionMixerOptions,
+    productionSVGSpriterOptions,
+    productionSVOOptions,
 ];
 
 /**
  * Generates and transforms SVG spritesheets.
  *
  * @async
- * @param  {object} [mixerOptions=null] - Customize the Mixer API options.
+ * @param  {object} [spriterOptions=null] - Customize the SVGSpriter API options.
+ *     If `null`, default production options are used.
+ * @param  {object} [svgoOptions=null]    - Customize the SVGO API options.
  *     If `null`, default production options are used.
  * @return {Promise}
  */
-export default async function compileSVGs(mixerOptions = null) {
-    if (mixerOptions == null) {
-        mixerOptions = productionMixerOptions;
+export default async function compileSVGs(spriterOptions = null, svgoOptions = null) {
+    if (spriterOptions == null) {
+        spriterOptions = productionSVGSpriterOptions;
     } else if (
-        mixerOptions !== developmentMixerOptions &&
-        mixerOptions !== productionMixerOptions
+        spriterOptions !== developmentSVGSpriterOptions &&
+        spriterOptions !== productionSVGSpriterOptions
     ) {
-        mixerOptions = Object.assign({}, defaultMixerOptions, mixerOptions);
+        spriterOptions = Object.assign({}, defaultSVGSpriterOptions, spriterOptions);
     }
 
+    if (svgoOptions == null) {
+        svgoOptions = productionSVOOptions;
+    } else if (
+        svgoOptions !== developmentSVOOptions &&
+        svgoOptions !== productionSVOOptions
+    ) {
+        svgoOptions = Object.assign({}, defaultSVOOptions, svgoOptions);
+    }
+
+    if (svgoOptions) {
+        spriterOptions.shape.transform.push({
+            svgo: svgoOptions,
+        });
+    }
+
+    const svgSpriter = new SVGSpriter(spriterOptions);
+
     loconfig.tasks.svgs.forEach(async ({
         includes,
         outfile
@@ -60,9 +108,21 @@ export default async function compileSVGs(mixerOptions = null) {
             includes = includes.map((path) => template(path));
             outfile  = template(outfile);
 
-            const result = await mixer(includes, mixerOptions);
-
-            await result.write(outfile);
+            svgSpriter.compile({
+                symbol: {
+                    dest:   dirname(outfile),
+                    sprite: filename,
+                },
+            }, (error, result) => {
+                for (const mode in result) {
+                    for (const resource in result[mode]) {
+                        await mkdir(path.dirname(result[mode][resource].path), {
+                            recursive: true
+                        });
+                        await writeFile(result[mode][resource].path, result[mode][resource].contents);
+                    }
+                }
+            });
 
             message(`${filename} compiled`, 'success', timeLabel);
         } catch (err) {

build/watch.js

@@ -1,8 +1,14 @@
 import loconfig from '../loconfig.json';
 import concatFiles from './tasks/concats.js';
-import compileScripts, { developmentScriptsArgs } from './tasks/scripts.js';
-import compileStyles, { developmentStylesArgs } from './tasks/styles.js' ;
-import compileSVGs, { developmentSVGsArgs } from './tasks/svgs.js';
+import compileScripts, {
+    developmentScriptsArgs
+} from './tasks/scripts.js';
+import compileStyles, {
+    developmentStylesArgs
+} from './tasks/styles.js' ;
+import compileSVGs, {
+    developmentSVGsArgs
+} from './tasks/svgs.js';
 import template from './utils/template.js';
 import server from 'browser-sync';
 import { join } from 'node:path';
@@ -75,7 +81,7 @@ server.watch(
 // Watch svgs
 server.watch(
     [
-        join(paths.svgs.src, '*.svg'),
+        join(paths.svgs.src, '**/*.svg'),
     ]
 ).on('change', () => {
     compileSVGs(...developmentSVGsArgs);

loconfig.json

@@ -52,7 +52,7 @@
         "svgs": [
             {
                 "includes": [
-                    "{% paths.svgs.src %}/*.svg"
+                    "{% paths.svgs.src %}/**/*.svg"
                 ],
                 "outfile": "{% paths.svgs.dest %}/sprite.svg"
             }

package.json

@@ -29,7 +29,7 @@
         "node-notifier": "^10.0.0",
         "node-sass": "^6.0.1",
         "postcss": "^8.3.11",
-        "svg-mixer": "^2.3.14",
+        "svg-sprite": "^1.5.3",
         "tiny-glob": "^0.2.9"
     }
 }