Skip to content

在mermaid中注册图标包

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

直接从CDN使用JSON文件:

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

使用包和打包工具:

bash
npm install @iconify-json/logos@1

使用懒加载

js
import mermaid from 'mermaid';

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

没有懒加载

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