mermaid-js / mermaid-cli

Command line tool for the Mermaid library
MIT License
2.34k stars 224 forks source link

Suggestion for getting fontawesome working #474

Open tstarbow-sfdc opened 1 year ago

tstarbow-sfdc commented 1 year ago

I am not seeing fontawesome icon in the rendered svg files. Rendering the fontawesome example from the mermaid doc only shows the text:

flowchart TD
    B["fab:fa-twitter for peace"]
    B-->C[fa:fa-ban forbidden]
    B-->D(fa:fa-spinner)
    B-->E(A fa:fa-camera-retro perhaps?)

However, if I crack open the generated svg file, and add the following line, the icons show up as expected:

  <link xmlns="http://www.w3.org/1999/xhtml" rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" type="text/css"/>

So I am guessing something like this, added around line 252 of index.js would solve the problem, but I haven't tested it:

      const faStyle = document.createElementNS('http://www.w3.org/2000/svg', 'link')
      faStyle.setAttribute('xmlns', 'http://www.w3.org/1999/xhtml')
      faStyle.setAttribute('rel', 'stylesheet')
      faStyle.setAttribute('type', 'text/css')
      faStyle.setAttribute('href', 'https://use.fontawesome.com/releases/v5.0.13/css/all.css')
      svg.appendChild(faStyle)
aloisklink commented 1 year ago

So I am guessing something like this, added around line 252 of index.js would solve the problem, but I haven't tested it:

:+1: It looks like this will solve the problem (or at least something similar). However, I'm a bit reluctant, since using an external URL means that we need to worry about internet connectivity and breaking European/Californian privacy laws.

(Although we could make that feature opt-in, so that then the user can worry about privacy laws)

Ideally, we should somehow embed that CSS file into the SVG.

aaronnewsome commented 3 months ago

Modifying the index.js does seem to work. Is there a solution for using the css file locally, so images can be rendered without internet connection?