feat: Add Iconify support

[VanceVisarisTenenbaum]

📑 Summary

Iconify support added to the live editor.

Resolves #1566

📏 Design Decisions

In config tab you have this by default.

{
  "theme": "dark"
}

Now you can add your icons from iconify like this.

{
  "theme": "dark"
  "liveEditor": {
    "icons" : {
      "name": "npm package@MajorVersion"
    }
  }
}

Using the example from architecture docs your config should be:

{
  "theme": "dark",
  "liveEditor": {
    "icons" : {
      // Package name with major version
      "logos": "@iconify-json/logos@1",
      // Package name with version 
      "flags": "@iconify-json/[email protected]",
      // Direct URL to icons.json
      "material-symbols": "https://unpkg.com/@iconify-json/[email protected]/icons.json"
    }
  }
}

The icons are downloaded from jsdelivr, or the provided URL

📋 Tasks

Make sure you

• 📖 have read the contribution guidelines
• 💻 have added unit/e2e tests (if appropriate)
• 🔖 targeted develop branch

Additional notes

I already tried to add icons using an extension a long time ago. Now I have tried directly using the live editor.

There is some small issue in the editor, that it tells you that "icons" is not a property from MermaidConfig (which is true) and rn idk how to solve, but I would like some feedback from devs for this.

[netlify]

✅ Deploy Preview for mermaidjs ready!

Name	Link
🔨 Latest commit	af6fa76
🔍 Latest deploy log	https://app.netlify.com/projects/mermaidjs/deploys/6890f58c95cede00083d4ddc
😎 Deploy Preview	https://deploy-preview-1731--mermaidjs.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 project configuration.

[sidharthv96]

There is some small issue in the editor, that it tells you that "icons" is not a property from MermaidConfig (which is true) and rn idk how to solve, but I would like some feedback from devs for this.

I've added a script to generate new json schema for live editor, and use that instead of the mermaid schema.

I've also moved the live-editor specific config into a liveEditor property, so it's easier to group.

[Copilot]

Pull Request Overview

This PR adds Iconify support to the live editor, allowing users to configure and use icon packages from Iconify in their Mermaid diagrams through configuration settings.

• Extends MermaidConfig with a new liveEditor.icons configuration section
• Implements icon package loading from npmjs via jsdelivr CDN or direct URLs
• Adds validation for package version specifications and error handling for icon fetching

Reviewed Changes

Copilot reviewed 7 out of 9 changed files in this pull request and generated 2 comments.

Show a summary per file

File	Description
src/lib/util/state.ts	Updates state management to use ExtendedMermaidConfig and includes default icon configuration
src/lib/util/mermaid.ts	Core implementation of Iconify support with icon loading, validation, and registration
src/lib/util/mermaid.test.ts	Comprehensive test suite for package version validation
src/lib/components/View.svelte	Updates render call to pass config parameter and use ExtendedMermaidConfig
src/lib/components/DesktopEditor.svelte	Changes schema URI to use local schema file
package.json	Adds schema generation step to build process
.vscode/settings.json	Adds "Iconify" to spell check dictionary

[VanceVisarisTenenbaum]

I synced my fork with the latest changes, and since It is the same branch I used for the PR, this message appeared, hope there is no issue with it, im still learning git.

Also, I saw the changes, since the review was requested to a mermaid dev I assume I have to to nothing else here.

Sorry for the inconvenience with this little update.

[sidharthv96]

No issues.
We loved the idea of support for icons that we're planning to add it to mermaid.
That's why this PR has not been merged yet.