在 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, // 使用图标包中定义的前缀
    icons,
  },
]);