Support custom iconpacks

[constja]

Add possibility to register resolved icon packs on mermaid.

• Added a snapshot test case that uses an icon pack
• Created a typescript definition for sync loader (couldn't reuse the SyncIconLoader interface, since it's not exported)
• Added reference in the documentation

solves [#17]

[remcohaszing]

Thanks! I have some remarks, but overall this work is amazing ❤️

[remcohaszing]

Could you take the needed type from mermaid? That case we won’t need an explicit dependency on @iconify/types

Bonus points if you can get the Mermaid team to export this type upstream.

[constja]

I've tried but as you can see here nothing is exported. Only a union type of Sync + Async Loader

Also it's just a dev dependency. I think this way it would neither end up in the distributed package nor would it show up in the npm-graph

[constja]

Would you be ok with accepting this for now + I will create a PR with mermaid and adjust it afterwards?

[constja]

Wait,.. got an Idea.

[constja]

export type IconPack = Extract<
  Parameters<typeof mermaid.registerIconPacks>[0][number],
  {
    /**
     * Include only sync interface
     */
    icons: unknown
  }
>

OK or too hacky?

[remcohaszing]

Let’s give the Mermaid folks a couple of days to merge mermaid-js/mermaid#7352. If they won’t, we’ll figure out some clever way to get it.

[remcohaszing]

Let’s give the Mermaid folks a couple of days to merge mermaid-js/mermaid#7352. If they won’t, we’ll figure out some clever way to get it.

[constja]

Actually it looks like custom icons don’t use fonts, right? So then the order doesn’t matter.

I've played around a little and you can basically insert anything into the chart. It could be a SVG that uses a specific font - but It seems the order doesn't make a difference.

test.ts

    async 'custom-font-iterable.svg'(file) {
      const renderer = createMermaidRenderer()
      const results = await renderer([String(file)], {
        css: [irishGrover, irishGrover],
        mermaidConfig: { fontFamily: '"Irish Grover"' },
        iconPacks: [
          {
            name: 'custom-icons',
            icons: {
              prefix: 'custom-icons',
              icons: {
                alien: {
                  body: `<g>
                  <rect style="fill: #087ebf; stroke-width: 0px" height="80" width="500" />
                  <text
                    style="fill: #fff; font-family: Irish Grover; font-size: 67.75px"
                    transform="translate(21.16 64.67)"
                  >
                    <tspan y="65" x="15">C</tspan>
                  </text>
                </g>`,
                  width: 80,
                  height: 80
                }
              }
            }
          }
        ]
      })

      return testFixtureResults(results)
    },

Creates this png

png

[constja]

OK seems that mermaid has merged it, now we just need to wait till they release?

[remcohaszing]

Yep, now we wait.

[constja]

Could we add my workaround and change it once they release?

[constja]

I've regenerated the fixtures and merged main, so there are no conflicts :)

[codecov]

Welcome to Codecov 🎉

Once you merge this PR into your default branch, you're all set! Codecov will compare coverage reports and display results in all future pull requests.

Thanks for integrating Codecov - We've got you covered ☂️

[remcohaszing]

Yeah, waiting for upstream to release that is taking too long. I’ll merge this as-is.

Thank you for your contribution! ❤️