feat(icon-pack-builder): integrate phosphor

apps/client/src/widgets/note_icon.tsx

@@ -72,6 +72,7 @@ function NoteIconList({ note, dropdownRef }: {
 
     useEffect(() => {
         async function loadIcons() {
+            console.time("Load icons for note icon picker");
             // Filter by text and/or category.
             let icons: IconData["icons"] = [
                 ...glob.iconRegistry.sources.flatMap(s => s.icons.map((i) => ({
@@ -113,6 +114,7 @@ function NoteIconList({ note, dropdownRef }: {
                 iconToCount,
                 icons
             });
+            console.timeEnd("Load icons for note icon picker");
         }
 
         loadIcons();

apps/icon-pack-builder/src/index.ts

@@ -4,6 +4,7 @@ import cls from "@triliumnext/server/src/services/cls.js";
 
 import type { IconPackData } from "./provider";
 import mdi from "./providers/mdi";
+import phosphor from "./providers/phosphor";
 
 process.env.TRILIUM_INTEGRATION_TEST = "memory-no-store";
 process.env.TRILIUM_RESOURCE_DIR = "../server/src";
@@ -55,7 +56,8 @@ async function main() {
     }
 
     const builtIconPacks = [
-        mdi()
+        // mdi()
+        phosphor()
     ];
     await Promise.all(builtIconPacks.map(buildIconPack));
 }

apps/icon-pack-builder/src/providers/mdi.ts

@@ -2,10 +2,10 @@ import { readFileSync } from "fs";
 import { join } from "path";
 
 import type { IconPackData } from "../provider";
-import { extractClassNamesFromCss } from "../utils";
+import { extractClassNamesFromCss, getModulePath } from "../utils";
 
 export default function buildIcons(): IconPackData {
-    const baseDir = join(__dirname, "../../../../node_modules/@mdi/font");
+    const baseDir = getModulePath("@mdi/font");
 
     const cssFilePath = join(baseDir, "css", "materialdesignicons.min.css");
     const cssFileContent = readFileSync(cssFilePath, "utf-8");

apps/icon-pack-builder/src/providers/phosphor.ts

@@ -0,0 +1,38 @@
+import { readFileSync } from "node:fs";
+import { join } from "node:path";
+
+import { IconPackData } from "../provider";
+import { getModulePath } from "../utils";
+
+export default function buildIcons(): IconPackData {
+    const packName = "regular";
+    const baseDir = join(getModulePath("@phosphor-icons/web"), "src", packName);
+    const iconIndex = JSON.parse(readFileSync(join(baseDir, "selection.json"), "utf-8"));
+    const icons: IconPackData["manifest"]["icons"] = {};
+
+    for (const icon of iconIndex.icons) {
+        let name = icon.properties.name;
+        if (name.endsWith(`-${packName}`)) {
+            name = name.split("-").slice(0, -1).join("-");
+        }
+
+        const id = `ph-${name}`;
+        icons[id] = {
+            glyph: `${String.fromCharCode(icon.properties.code)}`,
+            terms: [ name ]
+        };
+    }
+
+    return {
+        name: "Phosphor Icons",
+        prefix: "ph",
+        manifest: {
+            icons
+        },
+        fontFile: {
+            name: "phosphor-webfont.woff2",
+            mime: "font/woff2",
+            content: readFileSync(join(baseDir, "Phosphor.woff2"))
+        }
+    };
+}

apps/icon-pack-builder/src/utils.ts

@@ -1,3 +1,5 @@
+import { join } from "path";
+
 import { IconPackManifest } from "../../server/src/services/icon_packs";
 
 export function extractClassNamesFromCss(css: string, prefix: string): IconPackManifest["icons"] {
@@ -18,3 +20,7 @@ export function extractClassNamesFromCss(css: string, prefix: string): IconPackM
     }
     return icons;
 }
+
+export function getModulePath(moduleName: string): string {
+    return join(__dirname, "../../../node_modules", moduleName);
+}

pnpm-lock.yaml

@@ -485,9 +485,9 @@ importers:
 
   apps/icon-pack-builder:
     devDependencies:
-      '@mdi/font':
-        specifier: 7.4.47
-        version: 7.4.47
+      '@phosphor-icons/web':
+        specifier: 2.1.2
+        version: 2.1.2
 
   apps/server:
     dependencies:
@@ -3742,9 +3742,6 @@ packages:
   '@marijn/find-cluster-break@1.0.2':
     resolution: {integrity: sha512-l0h88YhZFyKdXIFNfSWpyjStDjGHwZ/U7iobcK1cQQD8sejsONdQtTVU+1wVN1PBw40PiiHB1vA5S7VTfQiP9g==}
 
-  '@mdi/font@7.4.47':
-    resolution: {integrity: sha512-43MtGpd585SNzHZPcYowu/84Vz2a2g31TvPMTm9uTiCSWzaheQySUcSyUH/46fPnuPQWof2yd0pGBtzee/IQWw==}
-
   '@mdn/browser-compat-data@5.7.6':
     resolution: {integrity: sha512-7xdrMX0Wk7grrTZQwAoy1GkvPMFoizStUoL+VmtUkAxegbCCec+3FKwOM6yc/uGU5+BEczQHXAlWiqvM8JeENg==}
 
@@ -4038,6 +4035,9 @@ packages:
     resolution: {integrity: sha512-dfUnCxiN9H4ap84DvD2ubjw+3vUNpstxa0TneY/Paat8a3R4uQZDLSvWjmznAY/DoahqTHl9V46HF/Zs3F29pg==}
     engines: {node: '>= 10.0.0'}
 
+  '@phosphor-icons/web@2.1.2':
+    resolution: {integrity: sha512-rPAR9o/bEcp4Cw4DEeZHXf+nlGCMNGkNDRizYHM47NLxz9vvEHp/Tt6FMK1NcWadzw/pFDPnRBGi/ofRya958A==}
+
   '@pkgjs/parseargs@0.11.0':
     resolution: {integrity: sha512-+1VkjdD0QBLPodGrJUeqarH8VAIvQODIbwh9XpP5Syisf7YoQgsJKPNFoqqLQlu+VQ/tVSshMR6loPMn8U+dPg==}
     engines: {node: '>=14'}
@@ -15221,8 +15221,6 @@ snapshots:
       '@ckeditor/ckeditor5-core': 47.3.0
       '@ckeditor/ckeditor5-utils': 47.3.0
       ckeditor5: 47.3.0
-    transitivePeerDependencies:
-      - supports-color
 
   '@ckeditor/ckeditor5-code-block@47.3.0(patch_hash=2361d8caad7d6b5bddacc3a3b4aa37dbfba260b1c1b22a450413a79c1bb1ce95)':
     dependencies:
@@ -15440,6 +15438,8 @@ snapshots:
       '@ckeditor/ckeditor5-utils': 47.3.0
       ckeditor5: 47.3.0
       es-toolkit: 1.39.5
+    transitivePeerDependencies:
+      - supports-color
 
   '@ckeditor/ckeditor5-editor-multi-root@47.3.0':
     dependencies:
@@ -15949,8 +15949,6 @@ snapshots:
       '@ckeditor/ckeditor5-ui': 47.3.0
       '@ckeditor/ckeditor5-utils': 47.3.0
       ckeditor5: 47.3.0
-    transitivePeerDependencies:
-      - supports-color
 
   '@ckeditor/ckeditor5-restricted-editing@47.3.0':
     dependencies:
@@ -18122,8 +18120,6 @@ snapshots:
 
   '@marijn/find-cluster-break@1.0.2': {}
 
-  '@mdi/font@7.4.47': {}
-
   '@mdn/browser-compat-data@5.7.6': {}
 
   '@mermaid-js/layout-elk@0.2.0(mermaid@11.12.2)':
@@ -18464,6 +18460,8 @@ snapshots:
       '@parcel/watcher-win32-x64': 2.5.1
     optional: true
 
+  '@phosphor-icons/web@2.1.2': {}
+
   '@pkgjs/parseargs@0.11.0':
     optional: true
 

scripts/icon-packs/phosphor.js

@@ -1,27 +0,0 @@
-import { join } from "node:path";
-import { readFileSync } from "node:fs";
-
-function processIconPack(packName) {
-    const path = join(packName);
-    const selectionMeta = JSON.parse(readFileSync(join(path, "selection.json"), "utf-8"));
-    const icons = {};
-
-    for (const icon of selectionMeta.icons) {
-        let name = icon.properties.name;
-        if (name.endsWith(`-${packName}`)) {
-            name = name.split("-").slice(0, -1).join("-");
-        }
-
-        const id = `ph-${name}`;
-        icons[id] = {
-            glyph: `${String.fromCharCode(icon.properties.code)}`,
-            terms: [ name ]
-        };
-    }
-
-    return JSON.stringify({
-        icons
-    }, null, 2);
-}
-
-console.log(processIconPack("light"));