在 Mermaid 中注册图标包

¥Registering icon pack in mermaid

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

¥The icon packs available can be found at icones.js.org. We use the name defined when registering the icon pack, to override the prefix field of the iconify pack. This allows the user to use shorter names for the icons. It also allows us to load a particular pack only when it is used in a diagram.

直接从 CDN 使用 JSON 文件：

¥Using JSON file directly from 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()),
  },
]);

使用包和打包器：

¥Using packages and a bundler:

npm install @iconify-json/logos@1

使用延迟加载

¥With lazy loading

import mermaid from 'mermaid';

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

不使用延迟加载

¥Without lazy loading

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