@massimo-cassandro/minimo 1.8.4 → 1.9.1

package/dev-tools/svg-icons-tools/src/jsx-icon-file-builder.mjs

@@ -0,0 +1,62 @@
+/**
+ * jsx_icon_file_builder
+ *
+ * Function to create JSX icon files
+ *
+ * The `parsed_svg` argument is the object returned by the parse function
+ * and contains:
+ *  - svg: the whole optimized svg markup (including the svg tag),
+ *  - viewbox: the viewbox attribute content,
+ *  - svg_content: the optimized svg markup without the svg tag)
+ *  - classes: the aspect ratio class as per the `non_square_icons_classes` parameter and or
+ *             the 'fill` or `stroke` class as per the `icon_type_class` parameter
+ *  - icon_type: icon type string: `fill` or `stroke`
+ *  - filename: the name of the svg file without extension and with the `remove_prefix` strings removed
+ *  - filename_camel_case: the filename in camel case (nb: dashes follewed ny numbers are converted to underscores)
+ *  - filename_pascal_case: similar to `filename_camel_case` but with the first letter capitalized
+ *
+ * The function must return an object with the following properties:
+ *  - component_name: the name of the component
+ *  - jsx_content: the jsx content of the component
+ *  - filename: the name of the jsx file (including extension) to be saved (default: `component_name` + '.jsx')
+ *
+ *
+ * NB: Since it is assumed that most attributes in the svg content have been removed
+ * during optimization, no further cleanup is performed IN THIS VERSION and therefore it is not guaranteed
+ * that `parsed_svg.content` is valid JSX markup.
+ * If you decide to keep some attributes in the SVGO options, you should check the svg content and, if possible,
+ * modify the function accordingly. In the function below, the `replace` method,
+ * applied to `parsed_svg.svg_content`, is an example of how to temporarily solve this problem.
+ *
+ * NB: this release doesn't include any prettify feature.
+ *
+ * @param {*} parsed_svg
+ * @returns
+ */
+
+// TODO add prettify feature
+// TODO svg to jsx
+
+export function jsx_icon_file_builder(parsed_svg) {
+
+  // adding `Icon` suffix to the component name
+  const component_name = `${parsed_svg.filename_pascal_case}Icon`;
+
+  return {
+    component_name: component_name,
+    filename: `${component_name}.jsx`,
+    jsx_content:
+      `export function ${component_name}({className, role, title, ...rest}) {
+        return <svg viewBox="${parsed_svg.viewbox}"
+          role={role? role : 'image'}
+          aria-hidden={title? null : 'true'}
+          className={['icona', ${parsed_svg.classes.map(cls => `'${cls}'`)?? []}, ...(className? [className] : [])].join(' ') || null}
+          {...rest}
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          {title && <title>{title}</title>}
+          ${parsed_svg.svg_content.replace(/ class=/g, ' className=').replace(/ fill-rule=/g, ' fillRule=')}
+        </svg>;
+      }`
+  };
+}

package/dev-tools/svg-icons-tools/src/parse-svg-filename.mjs

@@ -0,0 +1,19 @@
+import { configManager } from './config-manager.mjs';
+
+// remove extension and normalize filename
+export function parseSvgFilename(filename) {
+
+  const cfg = configManager.getCfg();
+
+  let parsed_filename = filename.split('.').slice(0, -1).join('.') // remove extension
+    .replaceAll(' ', '-'); // replace spaces with hyphens
+
+  // removing filename prefixes
+  cfg.remove_prefix.forEach(prefix => {
+    if(parsed_filename.startsWith(prefix)) {
+      parsed_filename = parsed_filename.slice(prefix.length);
+    }
+  });
+
+  return parsed_filename;
+}

package/dev-tools/svg-icons-tools/src/parse-svg-files.mjs

@@ -0,0 +1,82 @@
+import * as fs from 'fs';
+import * as path from 'path';
+import { parseSvgMarkup } from './parse-svg-markup.mjs';
+import { parseSvgFilename } from './parse-svg-filename.mjs';
+import { configManager } from './config-manager.mjs';
+import { printResult } from './print-result.mjs';
+
+
+export function parseSvgFiles(parseModeKey, callback) {
+  /*
+    parseModeKey: one of 'symbols', 'jsx' or 'optimize' (same keys of config obj)
+  */
+  const cfg = configManager.getCfg();
+  let fileCount = 0;
+
+
+  const parseFolder = (folder, svgType) => {
+    folder = path.resolve(cfg.work_dir, folder);
+
+    if(fs.existsSync(folder)) {
+
+      fs.readdirSync(folder).forEach(file => {
+        if(file.endsWith('.svg')) {
+
+          fileCount++;
+          const filepath = path.resolve(folder, file),
+            parsedSvg = parseSvgMarkup(filepath, svgType, cfg[parseModeKey].svgo_config);
+
+          parsedSvg.filename = parseSvgFilename(file);
+          parsedSvg.filename_camel_case = parsedSvg.filename
+            .replace(/-([a-z])/g, (part) => part[1].toUpperCase())
+            .replace(/-([0-9])/g, (part) => `_${part[1]}`);
+
+          parsedSvg.filename_pascal_case = parsedSvg.filename_camel_case.at(0).toUpperCase() +
+            parsedSvg.filename_camel_case.substring(1);
+
+          callback(parsedSvg);
+        }
+      });
+
+    } else {
+      throw new Error( `Folder “${folder}” doesn't exist` );
+    }
+
+  };
+
+
+  try {
+
+    if(['symbols', 'jsx', 'optimize'].indexOf(parseModeKey) === -1) {
+      throw new Error( `“${parseModeKey}” type is not mapped. It must be one of 'symbols', 'jsx' or 'optimize'` );
+    }
+
+    // source_folders is an array and not an object? (not used in the current version)
+    if(Array.isArray(cfg[parseModeKey].source_folders) ) {
+
+      cfg[parseModeKey].source_folders.forEach(folder => {
+        parseFolder(folder, null);
+      });
+
+    } else {
+
+      for(const svgType in cfg[parseModeKey].source_folders) {
+
+        const foldersArray = cfg[parseModeKey].source_folders[svgType];
+
+        if(!Array.isArray(foldersArray) ) {
+          throw new Error( `“${foldersArray}” must be an array` );
+        }
+
+        foldersArray.forEach(folder => {
+          parseFolder(folder, svgType);
+        });
+      }
+    }
+
+    return fileCount;
+
+  } catch(e) {
+    printResult( e, 'error' );
+  }
+}

package/dev-tools/svg-icons-tools/src/parse-svg-markup.mjs

@@ -0,0 +1,75 @@
+import { optimize } from 'svgo';
+import { configManager } from './config-manager.mjs';
+import * as fs from 'fs';
+
+// https://svgo.dev/docs/introduction/
+export function parseSvgMarkup(filepath, svg_type, custom_svgo_config = null) {
+  const cfg = configManager.getCfg();
+
+  let svgString = fs.readFileSync(filepath, 'utf8');
+
+
+  // remove pallets
+  cfg.pallets.forEach(pallet => {
+    svgString = svgString.replace(pallet, '');
+  });
+
+  // if present, custom_svgo_config ovverrides cfg.svgo_config
+  const optimized = optimize(svgString, custom_svgo_config? custom_svgo_config : cfg.svgo_config),
+    icon_type_class = svg_type? cfg.icon_type_class?.[svg_type]?? null : null,
+    classes = icon_type_class? [icon_type_class] : [];
+
+  // extracting viewbox
+  const viewbox = optimized.data.match(/viewBox=(?:"|')(\d+ \d+ \d+ \d+)(?:"|')/mi)[1];
+
+  // duotone classes
+  if(Object.keys(cfg.opacity_classes?? {}).length) {
+    optimized.data = optimized.data.replace(/(?:fill-)?opacity=(?:'|")0?\.(\d+)(?:'|")/g, (match, p1) => {
+      const opacity_value = Math.round(+((p1 + '000').slice(0, 3)) / 100);
+
+      let opacity_key = Object.keys(cfg.opacity_classes).reduce((prev, curr) => {
+        curr = +curr;
+        return (Math.abs(curr - opacity_value) < Math.abs(prev - opacity_value) ? curr : prev);
+      });
+      return `class='${cfg.opacity_classes[opacity_key]}'`;
+    });
+  }
+
+  // non-square icons
+  if(cfg.non_square_icons_classes.length ) {
+
+    const getAspectRatio = (w, h) => Math.round(w / h * 100) / 100
+      ,[,,width, height] = viewbox.split(' ')
+    ;
+
+    if(width !== height) {
+      const aspect_ratio = getAspectRatio(+width, +height);
+
+      const aspect_ratio_class_idx = cfg.non_square_icons_classes.map(i => getAspectRatio(i[0])).reduce((prev, curr, idx) => {
+        curr = idx;
+        const prev_value = prev !== null? cfg.non_square_icons_classes[prev][0] : 0;
+        return Math.abs(cfg.non_square_icons_classes[curr][0] - aspect_ratio) < Math.abs(prev_value - aspect_ratio) ? curr : prev;
+      }, null);
+
+      classes.push(cfg.non_square_icons_classes[aspect_ratio_class_idx][1]);
+
+    }
+  }
+
+
+  // extra classes are immediately assigned to the optimized svg markup
+  if(classes.length) {
+    optimized.data = optimized.data.replace(/<svg/, `<svg class="${classes.join(' ')}"`);
+  }
+
+  // get svg content
+  const svg_content = optimized.data.match(/<svg(?:.*?)>(.*?)<\/svg>/mi)[1];
+
+  return {
+    svg: optimized.data,
+    viewbox: viewbox,
+    svg_content: svg_content,
+    classes: classes,
+    icon_type: svg_type // fill or stroke
+  };
+}

package/dev-tools/svg-icons-tools/src/print-result.mjs

@@ -0,0 +1,26 @@
+/* eslint-disable no-console */
+import { styleText } from 'node:util';
+import { configManager } from './config-manager.mjs';
+
+
+// https://developer.mozilla.org/en-US/docs/Web/API/console#styling_console_output
+// https://nodejs.org/api/util.html#customizing-utilinspect-colors
+
+export function printResult(text, mode = 'info') {
+  const cfg = configManager.getCfg()
+    ,style = Array.isArray(cfg.console_colors[mode])? cfg.console_colors[mode] : [cfg.console_colors[mode]]
+    ,isBg = style.reduce((acc, val) => acc || /^(bg)/.test(val), false)
+  ;
+
+  if(isBg) {
+    text = ` ${text} `;
+  }
+
+  let message = styleText(cfg.console_colors[mode], text);
+
+  if(isBg) {
+    message = `\n${message}\n`;
+  }
+
+  console.log( message);
+}

package/dev-tools/svg-icons-tools/src/start.mjs

@@ -0,0 +1,23 @@
+import { svg_to_symbols } from './svg-to-symbols.mjs';
+import { svg_to_jsx } from './svg-to-jsx.mjs';
+import { svg_to_optimized } from './svg-to-optimized.mjs';
+import { svg_to_scss } from './svg-to-scss.mjs';
+// import * as fs from 'fs';
+// import { configManager } from './config-manager.mjs';
+
+import { printResult } from './print-result.mjs';
+
+export async function start() {
+
+
+  printResult('SVG-ICONS-TOOLS start...');
+
+  await svg_to_jsx();
+  await svg_to_optimized();
+  svg_to_symbols();
+  svg_to_scss();
+
+  printResult('SVG-ICONS-TOOLS end', 'success');
+
+
+}

package/dev-tools/svg-icons-tools/src/svg-to-jsx.mjs

@@ -0,0 +1,82 @@
+import * as path from 'path';
+import * as fs from 'fs';
+import { configManager } from './config-manager.mjs';
+import { parseSvgFiles } from './parse-svg-files.mjs';
+import { printResult } from './print-result.mjs';
+import { homedir_path_to_tilde } from './homedir-path-to-tilde.mjs';
+import { jsx_icon_file_builder } from './jsx-icon-file-builder.mjs';
+import { create_dest_folder } from './create-dest-folder.mjs';
+
+export async function svg_to_jsx() {
+
+  const cfg = configManager.getCfg(),
+    cfg_obj = cfg.jsx,
+    icon_builder = cfg_obj.custom_icon_builder && typeof cfg_obj.custom_icon_builder === 'function'?
+      cfg_obj.custom_icon_builder : jsx_icon_file_builder;
+
+  let dest_folder = '', fileCount = 0, component_list = [];
+
+  const source_folders_length = Object.keys(cfg_obj.source_folders)
+    .reduce((acc, key) => acc + cfg_obj.source_folders[key].length, 0);
+
+  if (source_folders_length && cfg_obj.dest_folder) {
+
+    dest_folder = path.resolve(cfg.work_dir, cfg_obj.dest_folder);
+
+    // checking output dir for optimized svg files
+    await create_dest_folder(dest_folder, cfg_obj.clearDestFolder);
+
+
+    // parsing and saving JSX files
+    fileCount = parseSvgFiles('jsx',
+      (parsedSvg) => {
+        const result = icon_builder(parsedSvg),
+          dest_filename = result.filename?? `${result.component_name}.jsx`,
+          dest_file_path = path.resolve(dest_folder, dest_filename);
+        fs.writeFileSync(dest_file_path, result.jsx_content);
+        component_list.push({name: result.component_name, path: dest_file_path});
+      }
+    );
+
+    // creating index file
+    let index_file_path = '';
+    if (component_list.length && cfg_obj.index_file) {
+
+      index_file_path = path.resolve(cfg.work_dir, cfg_obj.index_file);
+      const index_file_folder = path.dirname(index_file_path);
+
+      if (!fs.existsSync(index_file_folder)) {
+        fs.mkdirSync(index_file_folder, {recursive: true});
+      }
+
+      const index_file_content = component_list.reduce((acc, component_obj) => {
+        const relative_path = path.relative(path.dirname(index_file_path), component_obj.path);
+        acc.push(`export { ${component_obj.name} } from './${relative_path}';`);
+        return acc;
+      }, []);
+
+      fs.writeFileSync(index_file_path,
+        '// Generated file\n\n' +
+        index_file_content.toSorted((a, b) => a.localeCompare(b)).join('\n')
+      );
+    }
+
+    if(fileCount) {
+      printResult(`\nSVG to JSX: ${fileCount} SVG files processed`);
+      printResult(`JSX files saved to ${homedir_path_to_tilde(dest_folder)}`, 'infoDim');
+
+      if(index_file_path) {
+        printResult(`Index file saved to ${homedir_path_to_tilde(index_file_path)}`, 'infoDim');
+
+      } else {
+        printResult('Index file has not been created', 'infoDim');
+      }
+
+    } else {
+      printResult('\nSVG to JSX: no files processed', 'infoDim');
+    }
+
+  } else {
+    printResult('\nSVG to JSX: no files processed', 'infoDim');
+  }
+}

package/dev-tools/svg-icons-tools/src/svg-to-optimized.mjs

@@ -0,0 +1,44 @@
+import * as path from 'path';
+import * as fs from 'fs';
+import { configManager } from './config-manager.mjs';
+import { parseSvgFiles } from './parse-svg-files.mjs';
+import { printResult } from './print-result.mjs';
+import { homedir_path_to_tilde } from './homedir-path-to-tilde.mjs';
+import { create_dest_folder } from './create-dest-folder.mjs';
+
+
+export async function svg_to_optimized() {
+  const cfg = configManager.getCfg(),
+    cfg_obj = cfg.optimize;
+  let dest_folder = '', fileCount = 0;
+
+  const source_folders_length = Object.keys(cfg_obj.source_folders)
+    .reduce((acc, key) => acc + cfg_obj.source_folders[key].length, 0);
+
+  if (source_folders_length && cfg_obj.dest_folder) {
+
+    dest_folder = path.resolve(cfg.work_dir, cfg_obj.dest_folder);
+
+    // checking output dir for optimized svg files
+    await create_dest_folder(dest_folder, cfg_obj.clearDestFolder);
+
+    // parsing and saving optimized svg files
+    fileCount = parseSvgFiles('optimize',
+      (parsedSvg) => {
+        fs.writeFileSync(path.resolve(dest_folder, `${parsedSvg.filename}.svg`), parsedSvg.svg);
+      }
+    );
+
+    if(fileCount) {
+      printResult(`\nSVG to optimized: ${fileCount} SVG files processed`);
+      printResult(`Optimized files copied to ${homedir_path_to_tilde(dest_folder)}`, 'infoDim');
+
+    } else {
+      printResult('\nSVG to optimized: no files processed', 'infoDim');
+    }
+
+  } else {
+    printResult('\nSVG to optimized: no files processed', 'infoDim');
+  }
+
+}

package/dev-tools/svg-icons-tools/src/svg-to-scss.mjs

@@ -0,0 +1,72 @@
+import * as path from 'path';
+import * as fs from 'fs';
+import { configManager } from './config-manager.mjs';
+import { parseSvgMarkup } from './parse-svg-markup.mjs';
+import { parseSvgFilename } from './parse-svg-filename.mjs';
+import { printResult } from './print-result.mjs';
+import { homedir_path_to_tilde } from './homedir-path-to-tilde.mjs';
+
+export function svg_to_scss() {
+
+  const cfg = configManager.getCfg();
+  let svg_to_scss_array = [], fileCount = 0, skipped = 0;
+
+  if(cfg.svg_to_scss.files.length && cfg.svg_to_scss.scss_icons_file) {
+
+    cfg.svg_to_scss.files.forEach(file => {
+
+      const file_path = path.resolve(cfg.work_dir, file);
+
+      if(fs.existsSync(file_path)) {
+        const parsedSvg = parseSvgMarkup(file_path)
+          ,filename = parseSvgFilename(path.basename(file_path))
+        ;
+
+        let svg_string = parsedSvg.svg;
+
+        if(cfg.svg_to_scss.convert_to_css_url) {
+          svg_string = 'url("data:image/svg+xml;charset=utf8,' +
+            svg_string.replaceAll('"', '\'')
+              .replaceAll('<', '%3C')
+              .replaceAll('>', '%3E')
+              .replaceAll('&', '%26')
+              .replaceAll('#', '%23') +
+            '")';
+
+        } else {
+          svg_string = `'${svg_string.replace(/'/g, '\\\'')}'`;
+        }
+
+
+        svg_to_scss_array.push(`$${cfg.svg_to_scss?.varname_prefix?? ''}${filename}: ${svg_string};`);
+
+        fileCount++;
+
+      } else {
+        skipped++;
+      }
+
+    });
+
+
+
+    const dest = path.resolve(cfg.work_dir, cfg.svg_to_scss.scss_icons_file);
+
+    fs.writeFileSync(
+      dest,
+      '// Generated file, don\'t edit\n\n' +
+      svg_to_scss_array.join('\n')
+    );
+
+    printResult(`\nSVG to scss variables: ${fileCount} SVG files processed`);
+    printResult(`\nSCSS icons variables file saved to ${homedir_path_to_tilde(dest)}`, 'infoDim');
+    if(skipped) {
+      printResult( `SVG to scss variables: ${skipped} SVG file${skipped > 1? 's were' : ' was'} not found`, 'warning' );
+    }
+
+  } else {
+
+    printResult('SVG to scss variables: no files processed', 'infoDim');
+  }
+
+}

package/dev-tools/svg-icons-tools/src/svg-to-symbols.mjs

@@ -0,0 +1,70 @@
+import * as path from 'path';
+import * as fs from 'fs';
+import { configManager } from './config-manager.mjs';
+import { parseSvgFiles } from './parse-svg-files.mjs';
+import { printResult } from './print-result.mjs';
+import { homedir_path_to_tilde } from './homedir-path-to-tilde.mjs';
+
+export function svg_to_symbols() {
+
+  const cfg = configManager.getCfg();
+  let symbols_str = '', fileCount = 0, icons_list = [];
+
+  fileCount = parseSvgFiles('symbols',
+    (parsedSvg) => {
+      symbols_str += `<symbol id="${parsedSvg.filename}" viewBox="${parsedSvg.viewbox}"`+
+        (parsedSvg.classes.length? ` class="${parsedSvg.classes.join(' ')}"` : '') +
+        `>${parsedSvg.svg_content}</symbol>`;
+      icons_list.push(parsedSvg.filename);
+    }
+  );
+
+  // symbols store
+  if (symbols_str) {
+    symbols_str = (cfg.symbols.add_xml_declaration? '<?xml version="1.0" encoding="UTF-8"?>' : '') +
+      (cfg.symbols.add_svg_doctype? '<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">' : '') +
+      '<svg xmlns="http://www.w3.org/2000/svg"' + (cfg.symbols.add_hidden_attribute? ' hidden="hidden"' : '') + '>' +
+        symbols_str +
+      '</svg>';
+    const dest = path.resolve(cfg.work_dir, cfg.symbols.dest_file),
+      folderName = path.dirname(dest);
+    if (!fs.existsSync(folderName)) {
+      fs.mkdirSync(folderName, {recursive: true});
+    }
+    fs.writeFileSync(path.resolve(cfg.work_dir, cfg.symbols.dest_file), symbols_str);
+
+    printResult(`\nSVG to symbols: ${fileCount} SVG files processed`);
+
+  } else {
+    printResult('\nSVG to symbols: no files processed', 'infoDim');
+  }
+
+
+  // icons list
+  const icon_list_var_string = 'const icons_list = ' + JSON.stringify(icons_list.sort(), null, '  ').replace(/"/g, '\'') + ';\n';
+  if(fileCount && cfg.symbols.icons_list_file) {
+    fs.writeFileSync(path.resolve(cfg.work_dir, cfg.symbols.icons_list_file),
+      '// List of icon symbols\n' +
+      '// NB: this is a generated file, any changes will be overwritten\n\n' +
+      'export ' + icon_list_var_string
+    );
+
+    printResult(`Created icon list file: ${homedir_path_to_tilde(cfg.symbols.icons_list_file)}`, 'infoDim');
+  }
+
+  // demo file
+  if(fileCount && cfg.symbols.demo_tpl_path && cfg.symbols.demo_file_path) {
+
+    const tpl = fs.readFileSync(path.resolve(cfg.work_dir, cfg.symbols.demo_tpl_path), 'utf8');
+
+    fs.writeFileSync(
+      path.resolve(cfg.work_dir, cfg.symbols.demo_file_path),
+      tpl.replace(/<!-- ?demo-data ?-->/,
+        `<script>${icon_list_var_string}</script>${symbols_str}`
+      )
+    );
+
+    printResult(`Created demo file: ${homedir_path_to_tilde(cfg.symbols.demo_tpl_path)}`, 'infoDim');
+  }
+
+}

package/dev-tools/svg-icons-tools/src/symbols-demo-tpl.html

@@ -0,0 +1,110 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Icons demo</title>
+    <link rel="icon" href="data:;base64,=">
+    <style type="text/css" media="all">
+      :root {
+        --icon-size: 6rem;
+        --icon-color: #4c4c4c;
+      }
+
+      body {
+        font-family: sans-serif;
+        font-size: 14px;
+        color: #333;
+      }
+
+      h1, h2 {
+        margin-left: 1rem;
+      }
+
+      .icon-wrapper {
+        display: flex;
+        flex-wrap: wrap;
+
+      }
+
+      .icon {
+        flex: 0 0 var(--icon-size);
+        max-width: var(--icon-size);
+        margin: 1rem;
+        text-align: center;
+
+        svg {
+          width: var(--icon-size);
+          aspect-ratio: 1;
+          margin: 0;
+          background: #ddd;
+        }
+      }
+
+      .fill-icon {
+        fill: var(--icon-color);
+        stroke: none;
+      }
+      .stroke-icon {
+        fill: none;
+        stroke: var(--icon-color);
+        stroke-linecap: round;
+        stroke-linejoin: round;
+        stroke-width: 3px;
+      }
+
+      .duotone-light {
+        fill-opacity: .2;
+      }
+      .duotone-medium {
+        fill-opacity: .4;
+      }
+      .duotone-dark {
+        fill-opacity: .7;
+      }
+
+
+      .icon-caption {
+        /* overflow: hidden;
+        white-space: nowrap;
+        text-overflow: ellipsis; */
+        max-width: 100%;
+      }
+    </style>
+
+  </head>
+  <body>
+    <h1>Icons demo</h1>
+
+    <div class="icon-wrapper"></div>
+
+    <!-- demo-data -->
+
+    <script>
+      var wrapper = document.querySelector('.icon-wrapper');
+
+      icons_list.forEach(function (item) {
+        let div_class = ['icon'];
+
+       /*  if (/-line$/.test(item)) {
+          div_class.push('line-icon');
+
+        } else if (/-fill$/.test(item)) {
+          div_class.push('fill-icon');
+        } */
+
+        wrapper.insertAdjacentHTML('beforeend',
+          `<div class="${div_class.join(' ')}">
+            <svg>
+              <title>${item}</title>
+              <use href="#${item}"></use>
+            </svg>
+            <p class="icon-caption" title="${item}"">
+              ${item.replace(/(_|\-)/g, '$1<wbr>')}
+            </p>
+          </div>`
+        );
+      });
+    </script>
+  </body>
+</html>

package/dev-tools/upd@m/README.md

@@ -0,0 +1,9 @@
+# Update packages
+
+Runs `npm update` for all packages installed within `node_modules/@massimo-cassandro`.
+
+Usage:
+
+```bash
+npx upd@m
+```