@web-padawan/wc-icons-tool 0.1.0

package/README.md

@@ -0,0 +1,11 @@
+# WC Icons Tool
+
+CLI tool for the [Vaadin web components](https://github.com/vaadin/web-components) monorepo.
+
+## Usage
+
+Create iconset for `packages/icons` and `packages/vaadin-lumo-styles`:
+
+```sh
+npx wc-icons-tool
+```

package/bin/wc-icons-tool

@@ -0,0 +1,18 @@
+#!/usr/bin/env node
+import { generateIcons } from '../tasks/icons.js';
+import { generateLumoFont } from '../tasks/lumo.js';
+
+async function main() {
+  await generateIcons();
+  await generateLumoFont();
+}
+
+main()
+  .then(() => {
+    console.warn('done');
+    process.exit(0);
+  })
+  .catch((e) => {
+    console.error(e);
+    process.exit(1);
+  });

package/package.json

@@ -0,0 +1,27 @@
+{
+  "name": "@web-padawan/wc-icons-tool",
+  "version": "0.1.0",
+  "main": "./bin/wc-icons-tool",
+  "bin": {
+    "wc-icons-tool": "./bin/wc-icons-tool"
+  },
+  "type": "module",
+  "license": "Apache-2.0",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/web-padawan/wc-icons-tool.git"
+  },
+  "author": "Vaadin Ltd",
+  "description": "Tool for building Vaadin icons",
+  "files": [
+    "bin",
+    "tasks"
+  ],
+  "dependencies": {
+    "cheerio": "^1.0.0",
+    "glob": "^13.0.0",
+    "svgicons2svgfont": "^14.0.2",
+    "svg2ttf": "6.0.3",
+    "ttf2woff": "3.0.0"
+  }
+}

package/tasks/icons.js

@@ -0,0 +1,45 @@
+import { globSync } from 'glob';
+import * as cheerio from 'cheerio';
+import { readFileSync, writeFileSync } from 'node:fs';
+import { basename } from 'node:path';
+
+function createCopyright() {
+  return `/**
+ * @license
+ * Copyright (c) 2015 - ${new Date().getFullYear()} Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */`;
+}
+
+export function generateIcons() {
+  const files = globSync(`${process.cwd()}/packages/icons/assets/svg/*.svg`).sort();
+
+  const contents = files
+    .map((file) => {
+      const id = basename(file, '.svg');
+      const content = readFileSync(file, 'utf-8');
+      const svg = cheerio.load(content, { xmlMode: true })('svg');
+      // Remove fill attributes.
+      svg.children('[fill]').removeAttr('fill');
+      // Add closing tags instead of self-closing.
+      const output = svg.children().toString().replace(/"\/>/gu, '"></path>');
+      // Output the "meat" of the SVG as group element.
+      return `<g id="vaadin:${id}">${output}</g>`;
+    })
+    .join('\n');
+
+  const iconset = `${createCopyright()}
+import { Iconset } from '@vaadin/icon/vaadin-iconset.js';
+
+const template = document.createElement('template');
+
+template.innerHTML = \`<svg><defs>\n${contents}\n</defs></svg>\`;
+
+Iconset.register('vaadin', 16, template);\n`;
+
+  writeFileSync(
+    `${process.cwd()}/packages/icons/vaadin-iconset.js`,
+    iconset,
+    'utf-8'
+  );
+}

package/tasks/lumo.js

@@ -0,0 +1,77 @@
+import { execSync } from 'node:child_process';
+import path from 'node:path';
+import { readFileSync,  unlinkSync, writeFileSync } from 'node:fs';
+import * as cheerio from 'cheerio';
+
+function createCopyright() {
+  return `/**
+ * @license
+ * Copyright (c) 2017 - 2025 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */`;
+}
+
+export function generateLumoFont() {
+  const FONT = `${process.cwd()}/packages/vaadin-lumo-styles/lumo-icons`;
+
+  // Create SVG font
+  const svgIcons2Font = path.normalize('./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');
+  execSync(`${svg2TTF} --ts=1 ${FONT}.svg ${FONT}.ttf`);
+
+  // Convert TTF to WOFF
+  const ttf2WOFF = path.normalize('./node_modules/.bin/ttf2woff');
+  execSync(`${ttf2WOFF} ${FONT}.ttf ${FONT}.woff`);
+
+  const content = readFileSync(`${FONT}.svg`, 'utf-8');
+  const svg = cheerio.load(content, { xmlMode: true })('font');
+  const glyphs = svg
+    .children('glyph')
+    .toArray()
+    .map((el) => {
+      return {
+        name: el.attribs['glyph-name'],
+        unicode: el.attribs.unicode,
+      };
+    });
+
+  const lumoIconsWoff = readFileSync(`${FONT}.woff`);
+
+  const glyphCSSProperties = glyphs.map((g) => {
+    const name = g.name.replace(/\s/gu, '-').toLowerCase();
+    const unicode = `\\${g.unicode[0].charCodeAt(0).toString(16)}`;
+    return `--lumo-icons-${name}: '${unicode}';`;
+  });
+
+  const outputCSS = `
+@font-face {
+  font-family: 'lumo-icons';
+  src: url(data:application/font-woff;charset=utf-8;base64,${lumoIconsWoff.toString('base64')})
+    format('woff');
+  font-weight: normal;
+  font-style: normal;
+}
+
+:where(:root),
+:where(:host) {
+  ${glyphCSSProperties.join('\n  ')}
+}
+`;
+
+  // Write the output to src/props/icons.css
+  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));
+
+  // Cleanup temporary font files
+  unlinkSync(`${FONT}.svg`);
+  unlinkSync(`${FONT}.ttf`);
+  unlinkSync(`${FONT}.woff`);
+}