在 mermaid 中注册图标包

可在 icones.js.org 找到可用的图标包。我们在注册图标包时使用定义的名称来覆盖 iconify 包的前缀字段。这允许用户使用更短的图标名称。它也允许我们仅在图表中使用图标包时才加载特定包。

直接从 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,
  },
]);