mermaidでアイコンパックを登録する

利用可能なアイコンパックは、icones.js.orgで見つけることができます。アイコンパックを登録する際に定義された名前を使用して、アイコンファイパックのプレフィックスフィールドを上書きします。これにより、ユーザーはアイコンの短い名前を使用できるようになります。また、ダイAGRAMで使用されるときに特定のパックのみを読み込むことができるようになります。

CDNからJSONファイルを直接使用する:

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()),
  },
]);

パッケージとバンドラーを使用する:

npm install @iconify-json/logos@1

レイジーローディングを使用する:

import mermaid from 'mermaid';

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

レイジーローディングなし:

import mermaid from 'mermaid';
import { icons } from '@iconify-json/logos';
mermaid.registerIconPacks([
  {
    name: icons.prefix, // アイコンパックで定義されたプレフィックスを使用するため
    icons,
  },
]);