feat: DH Icon Font (#129)

Generation and inclusion of dh icon font.

resolves #13

.vscodeignore

@@ -13,4 +13,5 @@ vsc-extension-quickstart.md
 **/*.ts
 **/__mocks__/**
 e2e/**
-test-reports/**
+test-reports/**
+icons/**

CONTRIBUTING.md

@@ -103,6 +103,17 @@ rsvg-convert -w 128 -h 128 images/dh-community-on-dark-128.svg -o images/dh-comm
 rsvg-convert -w 128 -h 128 images/dh-community-on-light-128.svg -o images/dh-community-on-light-128.png
 ```
 
+## Icon Font Generation
+The extension uses an icon font generated from SVGs in `@deephaven/icons`. Running the generator requires a local checkout of web-client-ui.
+
+The generator can be run via the following script, where `<path-to-dh-icons-directory>` is the location of `packages/icons/src/icons` in `web-client-ui`.
+```sh
+npm run icon:gen -- <path-to-dh-icons-directory>
+```
+
+The script will automatically copy `icons/dist/dh-icons.woff2` file to the `/assets` folder of the extension, but the contents of `icons/dist/dh-contributes-icons.json` has to be manually copied to the `package.json` `contributes/icons` section.
+> Note: All of the icons should be consumed via the `dh-xxx` icon ids, so no code changes should be necessary unless icons have been renamed or removed.
+
 ## Implementation Notes
 
 ### Server Connection

icons/generate.mjs

@@ -0,0 +1,90 @@
+/**
+ * This script generates an icon font + manifest from a directory of SVG files.
+ * Usage:
+ *
+ * npm run icon:gen -- <path-to-dh-icons-directory>
+ */
+
+/* eslint-disable no-console */
+import fs from 'node:fs';
+import path from 'node:path';
+import { generateFonts } from 'fantasticon';
+
+// eslint-disable-next-line @typescript-eslint/naming-convention
+const __dirname = import.meta.dirname;
+
+const inputDir = process.argv[2];
+const outputDir = path.join(__dirname, 'dist');
+const assetsDir = path.join(__dirname, '..', 'assets');
+
+if (inputDir == null) {
+  console.error('No icon directory specified');
+  process.exit(1);
+}
+
+if (!fs.existsSync(inputDir)) {
+  console.error(`Icon directory '${inputDir}' does not exist`);
+  process.exit(1);
+}
+
+// Remove and recreate the output directory
+if (fs.existsSync(outputDir)) {
+  fs.rmSync(outputDir, { recursive: true });
+}
+fs.mkdirSync(outputDir);
+
+console.log(`Generating icons from '${inputDir}'`);
+
+// Using 1000 > than starting character of `vscode-codicons` in case we ever want
+// to bundle them in the same font file.
+// https://github.com/microsoft/vscode-codicons/blob/main/src/template/mapping.json
+const startingCharacter = 61000;
+
+// Map icon file names (without extension) to font character codepoints.
+// Note: We could technically configure `fantasticon` to just read the input
+// directory and generate the mapping for us, but this seems to have inconsistent
+// ordering of the files. Reading explicilty gives us more control over the order
+// of the icons.
+const codepoints = fs
+  .readdirSync(inputDir)
+  .map(name => name.toLowerCase())
+  .filter(name => name.endsWith('.svg'))
+  .reduce((memo, name, i) => {
+    memo[name.slice(0, -4)] = startingCharacter + i;
+    return memo;
+  }, {});
+
+// Generate json that can be used in package.json "contributes/icons" section
+// in vscode extension.
+const contributesIcons = Object.entries(codepoints).reduce(
+  (memo, [name, codepoint]) => {
+    memo[`dh-${name}`] = {
+      description: `Deephaven ${name} icon`,
+      default: {
+        fontPath: 'assets/dh-icons.woff2',
+        fontCharacter: `\\${codepoint.toString(16)}`,
+      },
+    };
+    return memo;
+  },
+  {}
+);
+
+fs.writeFileSync(
+  path.join(outputDir, 'dh-contributes-icons.json'),
+  JSON.stringify(contributesIcons, null, 2)
+);
+
+await generateFonts({
+  name: 'dh-icons',
+  prefix: 'dh',
+  normalize: true,
+  inputDir,
+  outputDir,
+  codepoints,
+});
+
+fs.copyFileSync(
+  path.join(outputDir, 'dh-icons.woff2'),
+  path.join(assetsDir, 'dh-icons.woff2')
+);