Feature/support fa kit custom icons

[jakobskrym]

:bookmark_tabs: Summary

Extends the current fontawesome support to also handle the case of custom icons being served through the fak prefix.

• Loosely related to https://github.com/mermaid-js/mermaid/issues/1723
• Originally discussed in https://github.com/mermaid-js/mermaid/issues/15

:straight_ruler: Design Decisions

Logic already existed for the basic fontawesome prefixes so mainly extended that and added a section to the flowchart documentation about it.

:clipboard: Tasks

Make sure you

• [x] :book: have read the contribution guidelines
• [x] :computer: have added necessary unit/e2e tests.
• [x] :notebook: have added documentation. Make sure MERMAID_RELEASE_VERSION is used for all new features.
• [x] :bookmark: targeted develop branch

[netlify[bot]]

✅ Deploy Preview for mermaid-js ready!

Name	Link
🔨 Latest commit	38beca11fdb99eaa8afff524d640e348a576c7f9
🔍 Latest deploy log	https://app.netlify.com/sites/mermaid-js/deploys/660cff0cda7fa100095e7163
😎 Deploy Preview	https://deploy-preview-5430--mermaid-js.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[codecov[bot]]

Codecov Report

Attention: Patch coverage is 0% with 21 lines in your changes are missing coverage. Please review.

Project coverage is 5.74%. Comparing base (e852596) to head (38beca1).

Additional details and impacted files

[](https://app.codecov.io/gh/mermaid-js/mermaid/pull/5430?src=pr&el=tree&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=mermaid-js) ```diff @@ Coverage Diff @@ ## develop #5430 +/- ## ======================================= Coverage 5.74% 5.74% ======================================= Files 277 276 -1 Lines 41898 41886 -12 Branches 489 514 +25 ======================================= Hits 2407 2407 + Misses 39491 39479 -12 ``` | [Flag](https://app.codecov.io/gh/mermaid-js/mermaid/pull/5430/flags?src=pr&el=flags&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=mermaid-js) | Coverage Δ | | |---|---|---| | [unit](https://app.codecov.io/gh/mermaid-js/mermaid/pull/5430/flags?src=pr&el=flag&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=mermaid-js) | `5.74% <0.00%> (+<0.01%)` | :arrow_up: | Flags with carried forward coverage won't be shown. [Click here](https://docs.codecov.io/docs/carryforward-flags?utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=mermaid-js#carryforward-flags-in-the-pull-request-comment) to find out more. | [Files](https://app.codecov.io/gh/mermaid-js/mermaid/pull/5430?dropdown=coverage&src=pr&el=tree&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=mermaid-js) | Coverage Δ | | |---|---|---| | [packages/mermaid/src/dagre-wrapper/createLabel.js](https://app.codecov.io/gh/mermaid-js/mermaid/pull/5430?src=pr&el=tree&filepath=packages%2Fmermaid%2Fsrc%2Fdagre-wrapper%2FcreateLabel.js&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=mermaid-js#diff-cGFja2FnZXMvbWVybWFpZC9zcmMvZGFncmUtd3JhcHBlci9jcmVhdGVMYWJlbC5qcw==) | `0.00% <0.00%> (ø)` | | | [...ges/mermaid/src/diagrams/flowchart/flowRenderer.js](https://app.codecov.io/gh/mermaid-js/mermaid/pull/5430?src=pr&el=tree&filepath=packages%2Fmermaid%2Fsrc%2Fdiagrams%2Fflowchart%2FflowRenderer.js&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=mermaid-js#diff-cGFja2FnZXMvbWVybWFpZC9zcmMvZGlhZ3JhbXMvZmxvd2NoYXJ0L2Zsb3dSZW5kZXJlci5qcw==) | `0.00% <0.00%> (ø)` | | | [packages/mermaid/src/rendering-util/createText.ts](https://app.codecov.io/gh/mermaid-js/mermaid/pull/5430?src=pr&el=tree&filepath=packages%2Fmermaid%2Fsrc%2Frendering-util%2FcreateText.ts&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=mermaid-js#diff-cGFja2FnZXMvbWVybWFpZC9zcmMvcmVuZGVyaW5nLXV0aWwvY3JlYXRlVGV4dC50cw==) | `0.00% <0.00%> (ø)` | | ... and [1 file with indirect coverage changes](https://app.codecov.io/gh/mermaid-js/mermaid/pull/5430/indirect-changes?src=pr&el=tree-more&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=mermaid-js)

[jakobskrym]

Changes looks good.

Can you also move the replace function into utils, so that we can avoid duplicating the logic 3 times?

Will do 👍

[jakobskrym]

Done - also added some test cases for the util function and then tried with the demo to make sure it works as intended 👍 (removed it though as it's a bit of an edge case and I didn't want it to be dependent on my fontawesome kit).

[mermaid-bot[bot]]

@jakobskrym, Thank you for the contribution! You are now eligible for a year of Premium account on MermaidChart. Sign up with your GitHub account to activate.

[jakobskrym]

@sidharthv96 any idea when this will make it out to production? Saw that it wasn't included in the latest release 🧐

[jakobskrym]

Another ping regarding this @sidharthv96 - really want to start using it in our projects 🙏