feat: Add iconify support

packages/mermaid/package.json

@@ -68,6 +68,7 @@
   },
   "dependencies": {
     "@braintree/sanitize-url": "^7.0.1",
+    "@iconify/utils": "^2.1.32",
     "@mermaid-js/parser": "workspace:^",
     "cytoscape": "^3.29.2",
     "cytoscape-cose-bilkent": "^4.1.0",
@@ -88,8 +89,9 @@
   },
   "devDependencies": {
     "@adobe/jsonschema2md": "^8.0.0",
-    "@types/cytoscape-fcose": "^2.2.4",
+    "@iconify/types": "^2.0.0",
     "@types/cytoscape": "^3.21.4",
+    "@types/cytoscape-fcose": "^2.2.4",
     "@types/d3": "^7.4.3",
     "@types/d3-sankey": "^0.12.4",
     "@types/d3-scale": "^4.0.8",

packages/mermaid/src/mermaid.ts

@@ -2,6 +2,7 @@
  * Web page integration module for the mermaid framework. It uses the mermaidAPI for mermaid
  * functionality and to render the diagrams to svg code!
  */
+import { registerIconPacks } from '$root/rendering-util/icons.js';
 import { dedent } from 'ts-dedent';
 import type { MermaidConfig } from './config.type.js';
 import { detectType, registerLazyLoadedDiagrams } from './diagram-api/detectType.js';
@@ -435,6 +436,7 @@ export interface Mermaid {
   contentLoaded: typeof contentLoaded;
   setParseErrorHandler: typeof setParseErrorHandler;
   detectType: typeof detectType;
+  registerIconPacks: typeof registerIconPacks;
 }
 
 const mermaid: Mermaid = {
@@ -451,6 +453,7 @@ const mermaid: Mermaid = {
   contentLoaded,
   setParseErrorHandler,
   detectType,
+  registerIconPacks,
 };
 
 export default mermaid;

packages/mermaid/src/rendering-util/icons.ts

@@ -0,0 +1,36 @@
+import { log } from '$root/logger.js';
+import type { IconifyJSON } from '@iconify/types';
+import type { IconifyIconCustomisations } from '@iconify/utils';
+import { getIconData, iconToHTML, iconToSVG, replaceIDs, stringToIcon } from '@iconify/utils';
+
+export const iconsStore = new Map<string, IconifyJSON>();
+
+export const registerIconPacks = (...iconPacks: IconifyJSON[]) => {
+  for (const pack of iconPacks) {
+    iconsStore.set(pack.prefix, pack);
+  }
+};
+
+export const getIconSVG = (iconName: string, customisations?: IconifyIconCustomisations) => {
+  try {
+    const data = stringToIcon(iconName, true, true);
+    if (!data) {
+      throw new Error(`Invalid icon name: ${iconName}`);
+    }
+    const icons = iconsStore.get(data.prefix || 'default');
+    if (!icons) {
+      throw new Error(`Icon set not found: ${data.prefix}`);
+    }
+    const iconData = getIconData(icons, data.name);
+    if (!iconData) {
+      throw new Error(`Icon not found: ${iconName}`);
+    }
+    const renderData = iconToSVG(iconData, customisations);
+    const svg = iconToHTML(replaceIDs(renderData.body), renderData.attributes);
+    return svg;
+  } catch (e) {
+    log.error(e);
+    // Return unknown icon svg.
+    return '<g><rect width="80" height="80" style="fill: #087ebf; stroke-width: 0px;"/><text transform="translate(21.16 64.67)" style="fill: #fff; font-family: ArialMT, Arial; font-size: 67.75px;"><tspan x="0" y="0">?</tspan></text></g>';
+  }
+};

pnpm-lock.yaml

@@ -212,6 +212,9 @@ importers:
       '@braintree/sanitize-url':
         specifier: ^7.0.1
         version: 7.1.0
+      '@iconify/utils':
+        specifier: ^2.1.32
+        version: 2.1.32
       '@mermaid-js/parser':
         specifier: workspace:^
         version: link:../parser
@@ -267,6 +270,9 @@ importers:
       '@adobe/jsonschema2md':
         specifier: ^8.0.0
         version: 8.0.2
+      '@iconify/types':
+        specifier: ^2.0.0
+        version: 2.0.0
       '@types/cytoscape':
         specifier: ^3.21.4
         version: 3.21.5
@@ -612,6 +618,9 @@ packages:
   '@antfu/install-pkg@0.1.1':
     resolution: {integrity: sha512-LyB/8+bSfa0DFGC06zpCEfs89/XoWZwws5ygEa5D+Xsm3OfI+aXQ86VgVG7Acyef+rSZ5HE7J8rrxzrQeM3PjQ==}
 
+  '@antfu/install-pkg@0.4.1':
+    resolution: {integrity: sha512-T7yB5QNG29afhWVkVq7XeIMBa5U/vs9mX69YqayXypPRmYzUmzwnYltplHmPtZ4HPCn+sQKeXW8I47wCbuBOjw==}
+
   '@antfu/utils@0.7.10':
     resolution: {integrity: sha512-+562v9k4aI80m1+VuMHehNJWLOFjBnXn3tdOitzD0il5b7smkSBal4+a3oKiQTbrwMmN/TBUMDvbdoWDehgOww==}
 
@@ -2175,6 +2184,9 @@ packages:
   '@iconify/utils@2.1.30':
     resolution: {integrity: sha512-bY0IO5xLOlbzJBnjWLxknp6Sss3yla03sVY9VeUz9nT6dbc+EGKlLfCt+6uytJnWm5CUvTF/BNotsLWF7kI61A==}
 
+  '@iconify/utils@2.1.32':
+    resolution: {integrity: sha512-LeifFZPPKu28O3AEDpYJNdEbvS4/ojAPyIW+pF/vUpJTYnbTiXUHkCh0bwgFRzKvdpb8H4Fbfd/742++MF4fPQ==}
+
   '@img/sharp-darwin-arm64@0.33.5':
     resolution: {integrity: sha512-UT4p+iz/2H4twwAoLCqfA9UH5pI6DggwKEGuaPy7nCVQ8ZsiY5PIcrRvD1DzuY3qYL07NtIQcWnBSY/heikIFQ==}
     engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
@@ -7147,6 +7159,9 @@ packages:
   package-json-from-dist@1.0.0:
     resolution: {integrity: sha512-dATvCeZN/8wQsGywez1mzHtTlP22H8OEfPrVMLNr4/eGa+ijtLn/6M5f0dY8UKNrC2O9UCU6SSoG3qRKnt7STw==}
 
+  package-manager-detector@0.2.0:
+    resolution: {integrity: sha512-E385OSk9qDcXhcM9LNSe4sdhx8a9mAPrZ4sMLW+tmxl5ZuGtPUcdFu+MPP2jbgiWAZ6Pfe5soGFMd+0Db5Vrog==}
+
   pako@1.0.11:
     resolution: {integrity: sha512-4hLB8Py4zZce5s4yd9XzopqwVv/yGNhV1Bl8NTmCq1763HeK2+EwVTv+leGeL13Dnh2wfbqowVPXCIO0z4taYw==}
 
@@ -8283,6 +8298,9 @@ packages:
   tinybench@2.9.0:
     resolution: {integrity: sha512-0+DUvqWMValLmha6lr4kD8iAMK1HzV0/aKnCtWb9v9641TnP/MFb7Pc2bxoxQjTXAErryXVgUOfv2YqNllqGeg==}
 
+  tinyexec@0.3.0:
+    resolution: {integrity: sha512-tVGE0mVJPGb0chKhqmsoosjsS+qUnJVGJpZgsHYQcGoPlG3B51R3PouqTgEGH2Dc9jjFyOqOpix6ZHNMXp1FZg==}
+
   tinypool@0.8.4:
     resolution: {integrity: sha512-i11VH5gS6IFeLY3gMBQ00/MmLncVP7JLXOw1vlgkytLmJK7QnEr7NXf0LBdxfmNPAeyetukOk0bOYrJrFGjYJQ==}
     engines: {node: '>=14.0.0'}
@@ -9281,6 +9299,11 @@ snapshots:
       execa: 5.1.1
       find-up: 5.0.0
 
+  '@antfu/install-pkg@0.4.1':
+    dependencies:
+      package-manager-detector: 0.2.0
+      tinyexec: 0.3.0
+
   '@antfu/utils@0.7.10': {}
 
   '@apideck/better-ajv-errors@0.3.6(ajv@8.17.1)':
@@ -11249,6 +11272,18 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
+  '@iconify/utils@2.1.32':
+    dependencies:
+      '@antfu/install-pkg': 0.4.1
+      '@antfu/utils': 0.7.10
+      '@iconify/types': 2.0.0
+      debug: 4.3.6(supports-color@8.1.1)
+      kolorist: 1.8.0
+      local-pkg: 0.5.0
+      mlly: 1.7.1
+    transitivePeerDependencies:
+      - supports-color
+
   '@img/sharp-darwin-arm64@0.33.5':
     optionalDependencies:
       '@img/sharp-libvips-darwin-arm64': 1.0.4
@@ -17290,6 +17325,8 @@ snapshots:
 
   package-json-from-dist@1.0.0: {}
 
+  package-manager-detector@0.2.0: {}
+
   pako@1.0.11: {}
 
   parent-module@1.0.1:
@@ -18556,6 +18593,8 @@ snapshots:
 
   tinybench@2.9.0: {}
 
+  tinyexec@0.3.0: {}
+
   tinypool@0.8.4: {}
 
   tinyspy@2.2.1: {}