Extension that allows to import your own icons and visualize them on mermaid online editors.
This extension allows you to extend the usage of mermaid live editor. The official application allows you to add your own icons from icones, however this is only possible if you install the app locally or deploy it yourself, check here.
With the extension you can import your own logos and use them within the live app. Nevertheless, currently it only works on my forked version of it here.
Once you install the app from the marketplace (not yet there), you will have the extension popup just like the image:
- Label: the label that you will use in the app text editor.
- Iconify package The iconify npm package with the icons (Official example, @iconify-json/logos).
You will start without any rows, you can add one by pressing "Add row", and you will need to click on "Save" to save them (There is no animation, to prove it was saved, close and open the popup again, or click outside and open it again). Always locally (on your computer).
And that is all, if you go to my version of it, it will work as documented.
Once you have chosen your icons from the page you need to do the steps specified in the next example:
- Choose Icon pack.
- Click on the npm link. It will open a new tab.
- Copy the package name (the highlighted text).
- Paste the package on the input of the popup (Iconify package).
- Click on save.
- Recharge the page.
- assets folder, it has the images.
- popup folder, it has the functionality for the popup (what appears when you click on the extension)
- content.js: Currently unused.
- inject.js: What is injected in the live editor page.
- It just injects an html div with the content of the popup.