Mermaidへのアイコンパックの登録

利用可能なアイコンパックはicones.js.orgで確認できます。アイコンパックを登録する際に定義された名前を使用して、iconifyパックのprefixフィールドを上書きします。これにより、ユーザーはアイコンに対してより短い名前を使用できます。また、特定のパックはダイアグラムで使用されている場合にのみロードされるようになります。

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, // To use the prefix defined in the icon pack
    icons,
  },
]);