Registering additional icon sets with Mermaid

[jgosmann]

How do I register additional icon sets with Mermaid?

I tried to put the code snippets from the Mermaid documentation into setup/main.ts and setup/mermaid.ts, but neither did work.

I also had add this vite.config.ts so that I don't get an import error:

import { defineConfig } from 'vite';

export default defineConfig({
    optimizeDeps: {
        include: ['@braintree/sanitize-url', 'dayjs', 'debug']
    }
});

But I'm still seeing this instead of the desired icon:

[jgosmann]

Well, the moment you post a question, you figure it out. Apparently it is important to use exactly the same import path that is also used by Slidev.

With this code in setup/main.ts it works:

import { defineAppSetup } from '@slidev/types';
import mermaid from 'mermaid/dist/mermaid.esm.mjs';
import { icons } from '@iconify-json/logos';

mermaid.registerIconPacks([
    {
        name: icons.prefix,
        icons
    },
])

export default defineAppSetup(() => {})