slidevjs / slidev

Presentation Slides for Developers
https://sli.dev
MIT License
33.73k stars 1.38k forks source link

Possible to make Mermaid graphs support Icons? #1062

Open patricorgi opened 1 year ago

patricorgi commented 1 year ago

Is your feature request related to a problem? Please describe.

Describe the solution you'd like

I'm hoping one can put Icon html tag in mermaid gitGraph etc. This is extremely helpful for me when I report for status, e.g. check marks show what commits are completed. For instance, the code shows indicate feature 1 and feature 2 work is done, and feature 3 not yet.

gitGraph
    commit
    branch "feature-branch"
    checkout "feature-branch"
    commit id: "<carbon-checkmark-filled/> feature 1"
    commit id: "<carbon-checkmark-filled/> feature 2"
    commit id: "feature 3"
    checkout main
    merge "feature-branch"

Describe alternatives you've considered

I have seen people use font-awesome icons in the following syntax. However, it doesn't seem to work in slidev.

flowchart LR
    D(fa:fa-phone)-->C[fa:fa-house]

Please do consider. Thank you in advance!

martinheidegger commented 3 weeks ago

I managed to get this working by adding following to

./setup/mermaid.ts

import mermaid from 'mermaid/dist/mermaid.esm.mjs'
import { icons } from '@iconify-json/logos'
mermaid.registerIconPacks([
  {
    name: icons.prefix,
    icons,
  },
]);