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