mermaid-js / mermaid

Generation of diagrams like flowcharts or sequence diagrams from text in a similar manner as markdown
https://mermaid.js.org
MIT License
68.74k stars 6.07k forks source link

Suggestion: Inline Font Awesome icons #3124

Open theory opened 2 years ago

theory commented 2 years ago

I like having font-awesome support, but unfortunately it's not universally supported. The icons don't appear on GitHub, for example, and integration into something like Material is difficult, since it uses its own Font Awesome syntax.

But taking a cue from Material's integration, would it be possible for Mermaid to embed SVGs and create styles only for the used Font Awesome icons? This would allow it to emit a complete representation regardless of whether Font Awesome is loaded at runtime while still preserving the text-only formatting of the diagrams themselves.

knsv commented 1 year ago

I like the idea, I would also like the option to use other icon sets. I will add this to the backlog. (Going through all issues to make proper plan for the development).

jwyza-pi commented 1 year ago

What icons would actually get embedded? The v4 set that is fairly limited or the bigger v6 free set? or some curated subset therein? (since the full free set of SVGs is 1.8MB (uncompressed) and 2000 icons. Even compressed it's 1.2MB which nearly doubles the output size of MJS's JS atm. (this might be acceptable for the ability to us FA inline without needing to depend on external resources)

Definitely would love to be able to use FA in MJS on GH!