Registrierung von Icon-Packs in Mermaid

Die verfügbaren Icon-Packs finden Sie unter icones.js.org. Wir verwenden den Namen, der bei der Registrierung des Icon-Packs definiert ist, um das Feld "prefix" des Iconify-Packs zu überschreiben. Dies ermöglicht es dem Benutzer, kürzere Namen für die Icons zu verwenden. Es erlaubt uns auch, ein bestimmtes Pack nur zu laden, wenn es in einem Diagramm verwendet wird.

Direkte Verwendung einer JSON-Datei von CDN:

import mermaid from 'CDN/mermaid.esm.mjs';
mermaid.registerIconPacks([
  {
    name: 'logos',
    loader: () =>
      fetch('https://unpkg.com/@iconify-json/logos@1/icons.json').then((res) => res.json()),
  },
]);

Verwendung von Paketen und einem Bundler:

npm install @iconify-json/logos@1

Mit Lazy Loading

import mermaid from 'mermaid';

mermaid.registerIconPacks([
  {
    name: 'logos',
    loader: () => import('@iconify-json/logos').then((module) => module.icons),
  },
]);

Ohne Lazy Loading

import mermaid from 'mermaid';
import { icons } from '@iconify-json/logos';
mermaid.registerIconPacks([
  {
    name: icons.prefix, // Um das im Icon-Pack definierte Präfix zu verwenden
    icons,
  },
]);