@web-padawan/wc-icons-tool 0.1.1 → 0.1.3

package/README.md

@@ -7,5 +7,5 @@ CLI tool for the [Vaadin web components](https://github.com/vaadin/web-component
 Create iconset for `packages/icons` and `packages/vaadin-lumo-styles`:
 
 ```sh
-npx wc-icons-tool
+npx @web-padawan/wc-icons-tool
 ```

package/bin/wc-icons-tool

@@ -1,9 +1,10 @@
 #!/usr/bin/env node
 import { generateIcons } from '../tasks/icons.js';
-import { generateLumoFont } from '../tasks/lumo.js';
+import { generateLumoFont, generateLumoIconset } from '../tasks/lumo.js';
 
 async function main() {
   await generateIcons();
+  await generateLumoIconset();
   await generateLumoFont();
 }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@web-padawan/wc-icons-tool",
-  "version": "0.1.1",
+  "version": "0.1.3",
   "main": "./bin/wc-icons-tool",
   "bin": {
     "wc-icons-tool": "./bin/wc-icons-tool"
@@ -25,8 +25,9 @@
     "cheerio": "^1.0.0",
     "glob": "^13.0.0",
     "patch-package": "^8.0.1",
-    "svgicons2svgfont": "^14.0.2",
     "svg2ttf": "6.0.3",
+    "svgicons2svgfont": "^14.0.2",
+    "svgpath": "^2.6.0",
     "ttf2woff": "3.0.0"
   }
 }

package/tasks/lumo.js

@@ -1,7 +1,13 @@
 import { execSync } from 'node:child_process';
-import path from 'node:path';
-import { readFileSync,  unlinkSync, writeFileSync } from 'node:fs';
+import { basename, normalize } from 'node:path';
+import { readFileSync, unlinkSync, writeFileSync } from 'node:fs';
+import { dirname } from 'node:path';
+import { fileURLToPath } from 'node:url';
+import { globSync } from 'glob';
 import * as cheerio from 'cheerio';
+import svgpath from 'svgpath';
+
+const __dirname = dirname(fileURLToPath(import.meta.url));
 
 function createCopyright() {
   return `/**
@@ -11,21 +17,93 @@ function createCopyright() {
  */`;
 }
 
+/**
+ * Normalize file sort order across platforms (OS X vs Linux, maybe others).
+ *
+ * Before: `[..., 'eye-disabled', 'eye', ...]`
+ * After:  `[..., 'eye', 'eye-disabled', ...]`
+ *
+ * Order of appearance impacts assigned Unicode codepoints, and sometimes build diffs.
+ *
+ * @see https://github.com/nfroidure/svgicons2svgfont/pull/82
+ * @see https://github.com/nfroidure/svgicons2svgfont/blob/master/src/filesorter.js
+ * @see http://support.ecisolutions.com/doc-ddms/help/reportsmenu/ascii_sort_order_chart.htm
+ */
+function sortIconFilesNormalized(file1, file2) {
+  return file1
+    .replace(/-/gu, '~')
+    .localeCompare(file2.replace(/-/gu, '~'), 'en-US');
+}
+
+function createIconset() {
+  const filenames = globSync(
+    `${process.cwd()}/packages/vaadin-lumo-styles/icons/svg/*.svg`
+  );
+
+  filenames.sort(sortIconFilesNormalized);
+
+  let output = `<svg xmlns="http://www.w3.org/2000/svg"><defs>\n`;
+  filenames.forEach((file) => {
+    const content = readFileSync(file, 'utf-8');
+    const path = content.match(
+      /<path( fill-rule="evenodd" clip-rule="evenodd")* d="([^"]*)"/u
+    );
+    const filename = basename(file);
+    if (path) {
+      const newPath = new svgpath(path[2])
+        .scale(1000 / 24, 1000 / 24)
+        .round(0)
+        .toString();
+      const name = filename
+        .replace('.svg', '')
+        .replace(/\s/gu, '-')
+        .toLowerCase();
+      const attrs = path[1] !== undefined ? path[1] : '';
+      output += `<g id="lumo:${name}"><path d="${newPath}"${attrs}></path></g>\n`;
+    } else {
+      throw new Error(`Unexpected SVG content: ${filename}`);
+    }
+  });
+
+  output += `</defs></svg>`;
+  return output;
+}
+
+export function generateLumoIconset() {
+  const iconset = `${createCopyright()}
+import './version.js';
+import { Iconset } from '@vaadin/icon/vaadin-iconset.js';
+
+const template = document.createElement('template');
+
+template.innerHTML = \`${createIconset()}\`;
+
+Iconset.register('lumo', 1000, template);\n`;
+
+  writeFileSync(
+    `${process.cwd()}/packages/vaadin-lumo-styles/vaadin-iconset.js`,
+    iconset,
+    'utf-8'
+  );
+}
+
 export function generateLumoFont() {
   const FONT = `${process.cwd()}/packages/vaadin-lumo-styles/lumo-icons`;
 
   // Create SVG font
-  const svgIcons2Font = path.normalize('./node_modules/.bin/svgicons2svgfont');
+  const svgIcons2Font = normalize(
+    `${__dirname}/../node_modules/.bin/svgicons2svgfont`
+  );
   execSync(
     `${svgIcons2Font} --fontname=lumo-icons --height=1000 --ascent=850 --descent=150 --normalize --fixedWidth --verbose -o ${FONT}.svg ${process.cwd()}/packages/vaadin-lumo-styles/icons/svg/*.svg`
   );
 
   // Convert SVG to TTF
-  const svg2TTF = path.normalize('./node_modules/.bin/svg2ttf');
+  const svg2TTF = normalize(`${__dirname}/../node_modules/.bin/svg2ttf`);
   execSync(`${svg2TTF} --ts=1 ${FONT}.svg ${FONT}.ttf`);
 
   // Convert TTF to WOFF
-  const ttf2WOFF = path.normalize('./node_modules/.bin/ttf2woff');
+  const ttf2WOFF = normalize(`${__dirname}/../node_modules/.bin/ttf2woff`);
   execSync(`${ttf2WOFF} ${FONT}.ttf ${FONT}.woff`);
 
   const content = readFileSync(`${FONT}.svg`, 'utf-8');
@@ -51,7 +129,9 @@ export function generateLumoFont() {
   const outputCSS = `
 @font-face {
   font-family: 'lumo-icons';
-  src: url(data:application/font-woff;charset=utf-8;base64,${lumoIconsWoff.toString('base64')})
+  src: url(data:application/font-woff;charset=utf-8;base64,${lumoIconsWoff.toString(
+    'base64'
+  )})
     format('woff');
   font-weight: normal;
   font-style: normal;
@@ -64,11 +144,17 @@ export function generateLumoFont() {
 `;
 
   // Write the output to src/props/icons.css
-  writeFileSync(`${process.cwd()}/packages/vaadin-lumo-styles/src/props/icons.css`, [createCopyright(), outputCSS.trimStart()].join('\n'));
+  writeFileSync(
+    `${process.cwd()}/packages/vaadin-lumo-styles/src/props/icons.css`,
+    [createCopyright(), outputCSS.trimStart()].join('\n')
+  );
 
   // Write the list of glyphs for visual tests
   const list = glyphs.map((g) => g.name);
-  writeFileSync(`${process.cwd()}/packages/vaadin-lumo-styles/test/glyphs.json`, JSON.stringify(list, null, 2));
+  writeFileSync(
+    `${process.cwd()}/packages/vaadin-lumo-styles/test/glyphs.json`,
+    JSON.stringify(list, null, 2)
+  );
 
   // Cleanup temporary font files
   unlinkSync(`${FONT}.svg`);