Merge from develop

2025-08-22 01:36:43 +02:00 · 2024-09-03 11:15:24 +02:00
parent 336c3127ed 55aff88e9f
commit 8e0bb994bb
55 changed files with 809 additions and 4155 deletions
--- a/.changeset/famous-bananas-join.md
+++ b/.changeset/famous-bananas-join.md
@@ -1,6 +0,0 @@
---
-'mermaid': patch
---
-
-Fix for self loops in cluster
-Supporting legacy defaultRenderer directive
--- a/.changeset/khaki-items-leave.md
+++ b/.changeset/khaki-items-leave.md
@@ -1,5 +0,0 @@
---
-'mermaid': minor
---
-
-feat(er): allow multi-line relationship labels
--- a/.changeset/nice-flowers-yawn.md
+++ b/.changeset/nice-flowers-yawn.md
@@ -1,9 +0,0 @@
---
-'mermaid': minor
-'@mermaid-js/docs': patch
-'@mermaid-js/parser': minor
---
-
-New Diagram: Architecture
-
-Adds architecture diagrams which allows users to show relations between services.
--- a/.changeset/pants-things-go.md
+++ b/.changeset/pants-things-go.md
@@ -1,6 +0,0 @@
---
-'@mermaid-js/layout-elk': patch
---
-
-fix: Updates to the default elk configuration
-feat: exposing cycleBreakingStrategy to the configuration so that it can be modified suing the configuration.
--- a/.cspell/libraries.txt
+++ b/.cspell/libraries.txt
@@ -30,6 +30,7 @@ Foswiki
 Gitea
 graphlib
 Grav
+icones
 iconify
 Inkdrop
 jiti
--- a/.github/workflows/release.yml
+++ b/.github/workflows/release.yml
@@ -12,9 +12,11 @@ permissions: # added using https://github.com/step-security/secure-repo

 jobs:
  release:
+    if: github.repository == 'mermaid-js/mermaid'
    permissions:
-      contents: write # for changesets/action to push to the repo
-      pull-requests: write # for changesets/action to create PRs
+      contents: write # to create release (changesets/action)
+      id-token: write # OpenID Connect token needed for provenance
+      pull-requests: write # to create pull request (changesets/action)
    name: Release
    runs-on: ubuntu-latest
    steps:
--- a/cypress/helpers/util.ts
+++ b/cypress/helpers/util.ts
@@ -73,7 +73,7 @@ export const imgSnapshotTest = (

 export const urlSnapshotTest = (
  url: string,
-  options: CypressMermaidConfig,
+  options: CypressMermaidConfig = {},
  _api = false,
  validation?: any
 ): void => {
--- a/cypress/integration/rendering/architecture.spec.ts
+++ b/cypress/integration/rendering/architecture.spec.ts
@@ -1,9 +1,9 @@
-import { imgSnapshotTest, renderGraph } from '../../helpers/util.ts';
+import { imgSnapshotTest, urlSnapshotTest } from '../../helpers/util.ts';

-describe('architecture diagram', () => {
+describe.skip('architecture diagram', () => {
  it('should render a simple architecture diagram with groups', () => {
    imgSnapshotTest(
-      `architecture
+      `architecture-beta
                group api(cloud)[API]

                service db(database)[Database] in api
@@ -21,7 +21,7 @@ describe('architecture diagram', () => {
  });
  it('should render an architecture diagram with groups within groups', () => {
    imgSnapshotTest(
-      `architecture
+      `architecture-beta
                group api[API]
                group public[Public API] in api
                group private[Private API] in api
@@ -41,14 +41,14 @@ describe('architecture diagram', () => {
  });
  it('should render an architecture diagram with the fallback icon', () => {
    imgSnapshotTest(
-      `architecture
+      `architecture-beta
                service unknown(iconnamedoesntexist)[Unknown Icon]
            `
    );
  });
  it('should render an architecture diagram with split directioning', () => {
    imgSnapshotTest(
-      `architecture
+      `architecture-beta
                service db(database)[Database]
                service s3(disk)[Storage]
                service serv1(server)[Server 1]
@@ -64,7 +64,7 @@ describe('architecture diagram', () => {
  });
  it('should render an architecture diagram with directional arrows', () => {
    imgSnapshotTest(
-      `architecture
+      `architecture-beta
                service servC(server)[Server 1]
                service servL(server)[Server 2]
                service servR(server)[Server 3]
@@ -85,7 +85,7 @@ describe('architecture diagram', () => {
  });
  it('should render an architecture diagram with group edges', () => {
    imgSnapshotTest(
-      `architecture
+      `architecture-beta
                group left_group(cloud)[Left]
                group right_group(cloud)[Right]
                group top_group(cloud)[Top]
@@ -107,7 +107,7 @@ describe('architecture diagram', () => {
  });
  it('should render an architecture diagram with edge labels', () => {
    imgSnapshotTest(
-      `architecture
+      `architecture-beta
                service servC(server)[Server 1]
                service servL(server)[Server 2]
                service servR(server)[Server 3]
@@ -128,7 +128,7 @@ describe('architecture diagram', () => {
  });
  it('should render an architecture diagram with simple junction edges', () => {
    imgSnapshotTest(
-      `architecture
+      `architecture-beta
                service left_disk(disk)[Disk]
                service top_disk(disk)[Disk]
                service bottom_disk(disk)[Disk]
@@ -148,7 +148,7 @@ describe('architecture diagram', () => {
  });
  it('should render an architecture diagram with complex junction edges', () => {
    imgSnapshotTest(
-      `architecture
+      `architecture-beta
                group left
                group right
                service left_disk(disk)[Disk] in left
@@ -172,3 +172,9 @@ describe('architecture diagram', () => {
    );
  });
 });
+
+describe('architecture - external', () => {
+  it('should allow adding external icons', () => {
+    urlSnapshotTest('http://localhost:9000/architecture-external.html');
+  });
+});
--- a/cypress/platform/architecture-external.html
+++ b/cypress/platform/architecture-external.html
@@ -0,0 +1,52 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <title>Architecture Mermaid Test Page</title>
+    <link rel="icon" type="image/png" href="data:image/png;base64,iVBORw0KGgo=" />
+    <style>
+      div.mermaid {
+        /* font-family: 'trebuchet ms', verdana, arial; */
+        font-family: 'Courier New', Courier, monospace !important;
+      }
+    </style>
+  </head>
+
+  <body>
+    <h2>External Icons Demo</h2>
+    <pre class="mermaid">
+    architecture-beta
+      service s3(logos:aws-s3)[Cloud Store]
+      service ec2(logos:aws-ec2)[Server]
+      service api(logos:aws-api-gateway)[Api Gateway]
+      service fa(fa:image)[Font Awesome Icon]
+    </pre>
+
+    <script type="module">
+      import mermaid from './mermaid.esm.mjs';
+      mermaid.initialize({
+        startOnLoad: false,
+        logLevel: 0,
+      });
+      mermaid.registerIconPacks([
+        {
+          name: 'logos',
+          loader: () =>
+            fetch('https://unpkg.com/@iconify-json/logos/icons.json').then((res) => res.json()),
+        },
+        {
+          name: 'fa',
+          loader: () =>
+            fetch('https://unpkg.com/@iconify-json/fa6-regular/icons.json').then((res) =>
+              res.json()
+            ),
+        },
+      ]);
+      await mermaid.run();
+      if (window.Cypress) {
+        window.rendered = true;
+      }
+    </script>
+  </body>
+</html>
--- a/demos/architecture.html
+++ b/demos/architecture.html
@@ -226,84 +226,31 @@
    </pre>
    <hr />

-    <h2>AWS Icon Demo</h2>
+    <h2>External Icons Demo</h2>
    <pre class="mermaid">
    architecture-beta
-      service s3(aws:s3)[Cloud Store]
-      service ec2(aws:ec2)[Server]
-      service wave(aws:wavelength)[Wave]
-      service droplet(do:droplet)[Droplet]
-      service repo(gh:github)[Repository]
-  </pre
-    >
+      service s3(logos:aws-s3)[Cloud Store]
+      service ec2(logos:aws-ec2)[Server]
+      service api(logos:aws-api-gateway)[Api Gateway]
+      service fa(fa:image)[Font Awesome Icon]
+    </pre>

    <script type="module">
      import mermaid from './mermaid.esm.mjs';
-
-      const ALLOWED_TAGS = [
-        'a',
-        'b',
-        'blockquote',
-        'br',
-        'dd',
-        'div',
-        'dl',
-        'dt',
-        'em',
-        'foreignObject',
-        'h1',
-        'h2',
-        'h3',
-        'h4',
-        'h5',
-        'h6',
-        'h7',
-        'h8',
-        'hr',
-        'i',
-        'li',
-        'ul',
-        'ol',
-        'p',
-        'pre',
-        'span',
-        'strike',
-        'strong',
-        'table',
-        'tbody',
-        'td',
-        'tfoot',
-        'th',
-        'thead',
-        'tr',
-      ];
-      mermaid.parseError = function (err, hash) {
-        // console.error('Mermaid error: ', err);
-      };
-      mermaid.initialize({
-        theme: 'base',
-        startOnLoad: true,
-        logLevel: 0,
-        flowchart: {
-          useMaxWidth: false,
-          htmlLabels: true,
+      mermaid.registerIconPacks([
+        {
+          name: 'logos',
+          loader: () =>
+            fetch('https://unpkg.com/@iconify-json/logos/icons.json').then((res) => res.json()),
        },
-        gantt: {
-          useMaxWidth: false,
+        {
+          name: 'fa',
+          loader: () =>
+            fetch('https://unpkg.com/@iconify-json/fa6-regular/icons.json').then((res) =>
+              res.json()
+            ),
        },
-        architecture: {
-          iconSize: 80,
-        },
-        useMaxWidth: false,
-        iconLibraries: ['aws:common', 'aws:full', 'github', 'digital-ocean'],
-      });
-      function callback() {
-        alert('It worked');
-      }
-      mermaid.parseError = function (err, hash) {
-        console.error('In parse error:');
-        console.error(err);
-      };
+      ]);
    </script>
  </body>
 </html>
--- a/docs/config/icons.md
+++ b/docs/config/icons.md
@@ -1,67 +0,0 @@
-> **Warning**
->
-> ## THIS IS AN AUTOGENERATED FILE. DO NOT EDIT.
->
-> ## Please edit the corresponding file in [/packages/mermaid/src/docs/config/icons.md](../../packages/mermaid/src/docs/config/icons.md).
-
-# SVG Icons (v???+)
-
-SVG Icons can be used with supported diagrams. Alongside the icon packs included with Mermaid, 3rd party libraries can be included in the configuration to cover additional use-cases.
-
-## Supported Diagrams
-
-| Diagram      | Usage                             |
-| ------------ | --------------------------------- |
-| Architecture | Icon names are surrounded by `()` |
-
-## Included Icon Packs
-
-| Icon Pack     | Prefix |
-| ------------- | ------ |
-| default       | N/A    |
-| Amazon AWS    | `aws:` |
-| Digital Ocean | `do:`  |
-| GitHub        | `gh:`  |
-
-Note that in order to use non-generic icons that are provided with Mermaid, the packs must be explicitly loaded when on initialization initialized.
-
-```js
-import sampleIconPack from 'sample-icon-pack';
-
-mermaid.initialize({
-  iconLibraries: ['aws:common', 'aws:full', 'github', 'digital-ocean'],
-});
-```
-
-## Using Custom Icon Packs
-
-Custom icon packs can be used by including them in the `iconLibraries` array on mermaid initialization.
-
-```js
-import sampleIconPack from 'sample-icon-pack';
-
-mermaid.initialize({
-  iconLibraries: [sampleIconPack, 'aws:full', ...],
-});
-```
-
-## Creating Custom Icon Packs
-
-```js
-import { createIcon } from 'mermaid';
-import type { IconLibrary, IconResolver } from 'mermaid';
-
-// type IconLibrary = Record<string, IconResolver>;
-// createIcon: (icon: string, originalSize: number) => IconResolver
-const myIconLibrary: IconLibrary = {
-  defaultCloudExample: createIcon(
-        `<g>
-            <rect width="80" height="80" style="fill: #087ebf; stroke-width: 0px;"/>
-            <path d="..." style="fill: none; stroke: #fff; stroke-miterlimit: 10; stroke-width: 2px;"/>
-        </g>`,
-        80
-    )
-};
-
-export default myIconLibrary
-```
--- a/docs/config/setup/interfaces/mermaid.Mermaid.md
+++ b/docs/config/setup/interfaces/mermaid.Mermaid.md
@@ -28,7 +28,7 @@ page.

 #### Defined in

-[packages/mermaid/src/mermaid.ts:441](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L441)
+[packages/mermaid/src/mermaid.ts:436](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L436)

 ---

@@ -59,7 +59,7 @@ A graph definition key

 #### Defined in

-[packages/mermaid/src/mermaid.ts:443](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L443)
+[packages/mermaid/src/mermaid.ts:438](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L438)

 ---

@@ -89,7 +89,7 @@ Use [initialize](mermaid.Mermaid.md#initialize) and [run](mermaid.Mermaid.md#run

 #### Defined in

-[packages/mermaid/src/mermaid.ts:436](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L436)
+[packages/mermaid/src/mermaid.ts:431](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L431)

 ---

@@ -116,7 +116,7 @@ This function should be called before the run function.

 #### Defined in

-[packages/mermaid/src/mermaid.ts:440](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L440)
+[packages/mermaid/src/mermaid.ts:435](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L435)

 ---

@@ -130,7 +130,7 @@ Use [parse](mermaid.Mermaid.md#parse) and [render](mermaid.Mermaid.md#render) in

 #### Defined in

-[packages/mermaid/src/mermaid.ts:430](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L430)
+[packages/mermaid/src/mermaid.ts:425](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L425)

 ---

@@ -180,7 +180,7 @@ Error if the diagram is invalid and parseOptions.suppressErrors is false or not

 #### Defined in

-[packages/mermaid/src/mermaid.ts:431](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L431)
+[packages/mermaid/src/mermaid.ts:426](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L426)

 ---

@@ -190,7 +190,7 @@ Error if the diagram is invalid and parseOptions.suppressErrors is false or not

 #### Defined in

-[packages/mermaid/src/mermaid.ts:425](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L425)
+[packages/mermaid/src/mermaid.ts:420](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L420)

 ---

@@ -218,6 +218,30 @@ Used to register external diagram types.

 #### Defined in

+[packages/mermaid/src/mermaid.ts:434](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L434)
+
+---
+
+### registerIconPacks
+
+• **registerIconPacks**: (`iconLoaders`: `IconLoader`\[]) => `void`
+
+#### Type declaration
+
+▸ (`iconLoaders`): `void`
+
+##### Parameters
+
+| Name          | Type            |
+| :------------ | :-------------- |
+| `iconLoaders` | `IconLoader`\[] |
+
+##### Returns
+
+`void`
+
+#### Defined in
+
 [packages/mermaid/src/mermaid.ts:439](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L439)

 ---
@@ -242,7 +266,7 @@ Used to register external diagram types.

 #### Defined in

-[packages/mermaid/src/mermaid.ts:438](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L438)
+[packages/mermaid/src/mermaid.ts:433](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L433)

 ---

@@ -268,7 +292,7 @@ Used to register external diagram types.

 #### Defined in

-[packages/mermaid/src/mermaid.ts:432](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L432)
+[packages/mermaid/src/mermaid.ts:427](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L427)

 ---

@@ -316,7 +340,7 @@ Renders the mermaid diagrams

 #### Defined in

-[packages/mermaid/src/mermaid.ts:437](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L437)
+[packages/mermaid/src/mermaid.ts:432](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L432)

 ---

@@ -351,7 +375,7 @@ to it (eg. dart interop wrapper). (Initially there is no parseError member of me

 #### Defined in

-[packages/mermaid/src/mermaid.ts:442](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L442)
+[packages/mermaid/src/mermaid.ts:437](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L437)

 ---

@@ -361,4 +385,4 @@ to it (eg. dart interop wrapper). (Initially there is no parseError member of me

 #### Defined in

-[packages/mermaid/src/mermaid.ts:424](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L424)
+[packages/mermaid/src/mermaid.ts:419](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L419)
--- a/docs/config/setup/interfaces/mermaid.MermaidConfig.md
+++ b/docs/config/setup/interfaces/mermaid.MermaidConfig.md
@@ -26,7 +26,7 @@

 #### Defined in

-[packages/mermaid/src/config.type.ts:203](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L203)
+[packages/mermaid/src/config.type.ts:194](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L194)

 ---

@@ -49,7 +49,7 @@ This matters if you are using base tag settings.

 #### Defined in

-[packages/mermaid/src/config.type.ts:209](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L209)
+[packages/mermaid/src/config.type.ts:200](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L200)

 ---

@@ -59,7 +59,7 @@ This matters if you are using base tag settings.

 #### Defined in

-[packages/mermaid/src/config.type.ts:206](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L206)
+[packages/mermaid/src/config.type.ts:197](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L197)

 ---

@@ -69,7 +69,7 @@ This matters if you are using base tag settings.

 #### Defined in

-[packages/mermaid/src/config.type.ts:196](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L196)
+[packages/mermaid/src/config.type.ts:187](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L187)

 ---

@@ -93,7 +93,7 @@ You can set this attribute to base the seed on a static string.

 #### Defined in

-[packages/mermaid/src/config.type.ts:190](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L190)
+[packages/mermaid/src/config.type.ts:181](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L181)

 ---

@@ -111,7 +111,7 @@ should not change unless content is changed.

 #### Defined in

-[packages/mermaid/src/config.type.ts:183](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L183)
+[packages/mermaid/src/config.type.ts:174](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L174)

 ---

@@ -121,7 +121,7 @@ should not change unless content is changed.

 #### Defined in

-[packages/mermaid/src/config.type.ts:210](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L210)
+[packages/mermaid/src/config.type.ts:201](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L201)

 ---

@@ -149,7 +149,7 @@ should not change unless content is changed.

 #### Defined in

-[packages/mermaid/src/config.type.ts:198](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L198)
+[packages/mermaid/src/config.type.ts:189](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L189)

 ---

@@ -159,7 +159,7 @@ should not change unless content is changed.

 #### Defined in

-[packages/mermaid/src/config.type.ts:191](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L191)
+[packages/mermaid/src/config.type.ts:182](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L182)

 ---

@@ -183,7 +183,7 @@ See <https://developer.mozilla.org/en-US/docs/Web/CSS/font-family>

 #### Defined in

-[packages/mermaid/src/config.type.ts:212](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L212)
+[packages/mermaid/src/config.type.ts:203](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L203)

 ---

@@ -197,7 +197,7 @@ If set to true, ignores legacyMathML.

 #### Defined in

-[packages/mermaid/src/config.type.ts:172](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L172)
+[packages/mermaid/src/config.type.ts:163](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L163)

 ---

@@ -207,7 +207,7 @@ If set to true, ignores legacyMathML.

 #### Defined in

-[packages/mermaid/src/config.type.ts:193](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L193)
+[packages/mermaid/src/config.type.ts:184](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L184)

 ---

@@ -217,7 +217,7 @@ If set to true, ignores legacyMathML.

 #### Defined in

-[packages/mermaid/src/config.type.ts:205](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L205)
+[packages/mermaid/src/config.type.ts:196](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L196)

 ---

@@ -243,26 +243,13 @@ Defines the seed to be used when using handDrawn look. This is important for the

 ---

-### iconLibraries
-
-• `Optional` **iconLibraries**: ([`IconLibrary`](../modules/mermaid.md#iconlibrary) | `"aws:common"` | `"aws:full"` | `"github"` | `"digital-ocean"`)\[]
-
-This option specifies an object contianing a mappig of SVG icon names to a resolver that returns the svg code.
-For supported diagrams (i.e., Architecture), their syntax allows refering to key names in this object to display the corresponding SVG icon in the rendered diagram.
-
-#### Defined in
-
-[packages/mermaid/src/config.type.ts:162](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L162)
-
---
-
 ### journey

 • `Optional` **journey**: `JourneyDiagramConfig`

 #### Defined in

-[packages/mermaid/src/config.type.ts:194](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L194)
+[packages/mermaid/src/config.type.ts:185](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L185)

 ---

@@ -323,7 +310,7 @@ Defines which main look to use for the diagram.

 #### Defined in

-[packages/mermaid/src/config.type.ts:213](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L213)
+[packages/mermaid/src/config.type.ts:204](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L204)

 ---

@@ -357,7 +344,7 @@ The maximum allowed size of the users text diagram

 #### Defined in

-[packages/mermaid/src/config.type.ts:204](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L204)
+[packages/mermaid/src/config.type.ts:195](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L195)

 ---

@@ -367,7 +354,7 @@ The maximum allowed size of the users text diagram

 #### Defined in

-[packages/mermaid/src/config.type.ts:208](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L208)
+[packages/mermaid/src/config.type.ts:199](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L199)

 ---

@@ -377,7 +364,7 @@ The maximum allowed size of the users text diagram

 #### Defined in

-[packages/mermaid/src/config.type.ts:199](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L199)
+[packages/mermaid/src/config.type.ts:190](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L190)

 ---

@@ -387,7 +374,7 @@ The maximum allowed size of the users text diagram

 #### Defined in

-[packages/mermaid/src/config.type.ts:200](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L200)
+[packages/mermaid/src/config.type.ts:191](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L191)

 ---

@@ -397,7 +384,7 @@ The maximum allowed size of the users text diagram

 #### Defined in

-[packages/mermaid/src/config.type.ts:202](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L202)
+[packages/mermaid/src/config.type.ts:193](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L193)

 ---

@@ -407,7 +394,7 @@ The maximum allowed size of the users text diagram

 #### Defined in

-[packages/mermaid/src/config.type.ts:207](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L207)
+[packages/mermaid/src/config.type.ts:198](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L198)

 ---

@@ -443,7 +430,7 @@ Level of trust for parsed diagram

 #### Defined in

-[packages/mermaid/src/config.type.ts:192](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L192)
+[packages/mermaid/src/config.type.ts:183](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L183)

 ---

@@ -465,7 +452,7 @@ Dictates whether mermaid starts on Page load

 #### Defined in

-[packages/mermaid/src/config.type.ts:197](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L197)
+[packages/mermaid/src/config.type.ts:188](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L188)

 ---

@@ -478,7 +465,7 @@ This is useful when you want to control how to handle syntax errors in your appl

 #### Defined in

-[packages/mermaid/src/config.type.ts:219](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L219)
+[packages/mermaid/src/config.type.ts:210](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L210)

 ---

@@ -521,7 +508,7 @@ You may also use `themeCSS` to override this value.

 #### Defined in

-[packages/mermaid/src/config.type.ts:195](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L195)
+[packages/mermaid/src/config.type.ts:186](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L186)

 ---

@@ -531,7 +518,7 @@ You may also use `themeCSS` to override this value.

 #### Defined in

-[packages/mermaid/src/config.type.ts:211](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L211)
+[packages/mermaid/src/config.type.ts:202](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L202)

 ---

@@ -541,4 +528,4 @@ You may also use `themeCSS` to override this value.

 #### Defined in

-[packages/mermaid/src/config.type.ts:201](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L201)
+[packages/mermaid/src/config.type.ts:192](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L192)
--- a/docs/config/setup/interfaces/mermaid.RunOptions.md
+++ b/docs/config/setup/interfaces/mermaid.RunOptions.md
@@ -18,7 +18,7 @@ The nodes to render. If this is set, `querySelector` will be ignored.

 #### Defined in

-[packages/mermaid/src/mermaid.ts:54](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L54)
+[packages/mermaid/src/mermaid.ts:49](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L49)

 ---

@@ -44,7 +44,7 @@ A callback to call after each diagram is rendered.

 #### Defined in

-[packages/mermaid/src/mermaid.ts:58](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L58)
+[packages/mermaid/src/mermaid.ts:53](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L53)

 ---

@@ -56,7 +56,7 @@ The query selector to use when finding elements to render. Default: `".mermaid"`

 #### Defined in

-[packages/mermaid/src/mermaid.ts:50](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L50)
+[packages/mermaid/src/mermaid.ts:45](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L45)

 ---

@@ -68,4 +68,4 @@ If `true`, errors will be logged to the console, but not thrown. Default: `false

 #### Defined in

-[packages/mermaid/src/mermaid.ts:62](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L62)
+[packages/mermaid/src/mermaid.ts:57](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L57)
--- a/docs/config/setup/modules/mermaid.md
+++ b/docs/config/setup/modules/mermaid.md
@@ -26,41 +26,6 @@

 ## Type Aliases

-### IconLibrary
-
-Ƭ **IconLibrary**: `Record`<`string`, [`IconResolver`](mermaid.md#iconresolver)>
-
-#### Defined in
-
-[packages/mermaid/src/rendering-util/svgRegister.ts:7](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/rendering-util/svgRegister.ts#L7)
-
---
-
-### IconResolver
-
-Ƭ **IconResolver**: (`parent`: `Selection`<`SVGGElement`, `unknown`, `Element` | `null`, `unknown`>, `width?`: `number`) => `Selection`<`SVGGElement`, `unknown`, `Element` | `null`, `unknown`>
-
-#### Type declaration
-
-▸ (`parent`, `width?`): `Selection`<`SVGGElement`, `unknown`, `Element` | `null`, `unknown`>
-
-##### Parameters
-
-| Name     | Type                                                                  |
-| :------- | :-------------------------------------------------------------------- |
-| `parent` | `Selection`<`SVGGElement`, `unknown`, `Element` \| `null`, `unknown`> |
-| `width?` | `number`                                                              |
-
-##### Returns
-
-`Selection`<`SVGGElement`, `unknown`, `Element` | `null`, `unknown`>
-
-#### Defined in
-
-[packages/mermaid/src/rendering-util/svgRegister.ts:3](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/rendering-util/svgRegister.ts#L3)
-
---
-
 ### InternalHelpers

 Ƭ **InternalHelpers**: typeof `internalHelpers`
@@ -122,29 +87,4 @@

 #### Defined in

-[packages/mermaid/src/mermaid.ts:446](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L446)
-
-## Functions
-
-### createIcon
-
-▸ **createIcon**(`icon`, `originalSize`): [`IconResolver`](mermaid.md#iconresolver)
-
-Converts an SVG Icon passed as a string into a properly formatted IconResolver
-
-#### Parameters
-
-| Name           | Type     | Description                                                                 |
-| :------------- | :------- | :-------------------------------------------------------------------------- |
-| `icon`         | `string` | html code for the svg icon as a string (the SVG tag should not be included) |
-| `originalSize` | `number` | the original size of the SVG Icon in pixels                                 |
-
-#### Returns
-
-[`IconResolver`](mermaid.md#iconresolver)
-
-IconResolver
-
-#### Defined in
-
-[packages/mermaid/src/rendering-util/svgRegister.ts:15](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/rendering-util/svgRegister.ts#L15)
+[packages/mermaid/src/mermaid.ts:442](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L442)
--- a/docs/ecosystem/integrations-community.md
+++ b/docs/ecosystem/integrations-community.md
@@ -74,6 +74,7 @@ To add an integration to this list, see the [Integrations - create page](./integ
  - [Markdown for mermaid plugin](https://github.com/jamieh-mongolian/markdown-for-mermaid-plugin)
  - [redmine-mermaid](https://github.com/styz/redmine_mermaid)
 - Visual Studio Code [Polyglot Interactive Notebooks](https://github.com/dotnet/interactive#net-interactive)
+- [Microsoft Loop](https://loop.cloud.microsoft) ✅

 ### LLM integrations

--- a/docs/syntax/architecture.md
+++ b/docs/syntax/architecture.md
@@ -4,7 +4,7 @@
 >
 > ## Please edit the corresponding file in [/packages/mermaid/src/docs/syntax/architecture.md](../../packages/mermaid/src/docs/syntax/architecture.md).

-# Architecture Diagrams Documentation (v\<MERMAID_RELEASE_VERSION>+)
+# Architecture Diagrams Documentation (v11.1.0+)

 > In the context of mermaid-js, the architecture diagram is used to show the relationship between services and resources commonly found within the Cloud or CI/CD deployments. In an architecture diagram, services (nodes) are connected by edges. Related services can be placed within groups to better illustrate how they are organized.

@@ -191,4 +191,85 @@ architecture-beta
    bottom_gateway:T -- B:junctionRight
 ```

-## Configuration
+## Icons
+
+By default, architecture diagram supports the following icons: `cloud`, `database`, `disk`, `internet`, `server`.
+Users can use any of the 200,000+ icons available in iconify.design, or add their own custom icons, by following the steps below.
+
+The icon packs available can be found at [icones.js.org](https://icones.js.org/).
+We use the name defined when registering the icon pack, to override the prefix field of the iconify pack. This allows the user to use shorter names for the icons. It also allows us to load a particular pack only when it is used in a diagram.
+
+Using JSON file directly from CDN:
+
+```js
+import mermaid from 'CDN/mermaid.esm.mjs';
+mermaid.registerIconPacks([
+  {
+    name: 'logos',
+    loader: () =>
+      fetch('https://unpkg.com/@iconify-json/logos/icons.json').then((res) => res.json()),
+  },
+]);
+```
+
+Using packages and a bundler:
+
+```bash
+npm install @iconify-json/logos
+```
+
+With lazy loading
+
+```js
+import mermaid from 'mermaid';
+
+mermaid.registerIconPacks([
+  {
+    name: 'logos',
+    loader: () => import('@iconify-json/logos').then((module) => module.icons),
+  },
+]);
+```
+
+Without lazy loading
+
+```js
+import mermaid from 'mermaid';
+import { icons } from '@iconify-json/logos';
+mermaid.registerIconPacks([
+  {
+    name: icons.prefix, // To use the prefix defined in the icon pack
+    icons,
+  },
+]);
+```
+
+After the icons are installed, they can be used in the architecture diagram by using the format "name:icon-name", where name is the value used when registering the icon pack.
+
+```mermaid-example
+architecture-beta
+    group api(logos:aws-lambda)[API]
+
+    service db(logos:aws-aurora)[Database] in api
+    service disk1(logos:aws-glacier)[Storage] in api
+    service disk2(logos:aws-s3)[Storage] in api
+    service server(logos:aws-ec2)[Server] in api
+
+    db:L -- R:server
+    disk1:T -- B:server
+    disk2:T -- B:db
+```
+
+```mermaid
+architecture-beta
+    group api(logos:aws-lambda)[API]
+
+    service db(logos:aws-aurora)[Database] in api
+    service disk1(logos:aws-glacier)[Storage] in api
+    service disk2(logos:aws-s3)[Storage] in api
+    service server(logos:aws-ec2)[Server] in api
+
+    db:L -- R:server
+    disk1:T -- B:server
+    disk2:T -- B:db
+```
--- a/docs/syntax/entityRelationshipDiagram.md
+++ b/docs/syntax/entityRelationshipDiagram.md
@@ -286,7 +286,7 @@ erDiagram

 - If you want the relationship label to be more than one word, you must use double quotes around the phrase
 - If you don't want a label at all on a relationship, you must use an empty double-quoted string
- (v\<MERMAID_RELEASE_VERSION>+) If you want a multi-line label on a relationship, use `<br />` between the two lines (`"first line<br />second line"`)
+- (v11.1.0+) If you want a multi-line label on a relationship, use `<br />` between the two lines (`"first line<br />second line"`)

 ## Styling

--- a/package.json
+++ b/package.json
@@ -4,7 +4,7 @@
  "version": "10.2.4",
  "description": "Markdownish syntax for generating flowcharts, sequence diagrams, class diagrams, gantt charts and git graphs.",
  "type": "module",
-  "packageManager": "pnpm@9.7.1+sha512.faf344af2d6ca65c4c5c8c2224ea77a81a5e8859cbc4e06b1511ddce2f0151512431dd19e6aff31f2c6a8f5f2aced9bd2273e1fed7dd4de1868984059d2c4247",
+  "packageManager": "pnpm@9.9.0+sha512.60c18acd138bff695d339be6ad13f7e936eea6745660d4cc4a776d5247c540d0edee1a563695c183a66eb917ef88f2b4feb1fc25f32a7adcadc7aaf3438e99c1",
  "keywords": [
    "diagram",
    "markdown",
@@ -88,7 +88,7 @@
    "cpy-cli": "^5.0.0",
    "cross-env": "^7.0.3",
    "cspell": "^8.6.0",
-    "cypress": "^13.11.0",
+    "cypress": "^13.14.1",
    "cypress-image-snapshot": "^4.0.1",
    "esbuild": "^0.21.5",
    "eslint": "^9.4.0",
@@ -116,7 +116,6 @@
    "markdown-table": "^3.0.3",
    "nyc": "^15.1.0",
    "path-browserify": "^1.0.1",
-    "pnpm": "^8.15.5",
    "prettier": "^3.2.5",
    "prettier-plugin-jsdoc": "^1.3.0",
    "rimraf": "^5.0.5",
--- a/packages/mermaid-layout-elk/CHANGELOG.md
+++ b/packages/mermaid-layout-elk/CHANGELOG.md
@@ -1,5 +1,14 @@
 # @mermaid-js/layout-elk

+## 0.1.3
+
+### Patch Changes
+
+- [#5810](https://github.com/mermaid-js/mermaid/pull/5810) [`33a809f`](https://github.com/mermaid-js/mermaid/commit/33a809f09a9aa1f84ba06201ab550bad81c3ff65) Thanks [@knsv](https://github.com/knsv)! - fix: Updates to the default elk configuration
+  feat: exposing cycleBreakingStrategy to the configuration so that it can be modified suing the configuration.
+- Updated dependencies [[`6ecdf7b`](https://github.com/mermaid-js/mermaid/commit/6ecdf7be688efdc53c52fea3ba891327242bc890), [`28bd07f`](https://github.com/mermaid-js/mermaid/commit/28bd07fdeb4fc981107d21317ec6160b31f80116), [`8e640da`](https://github.com/mermaid-js/mermaid/commit/8e640da5436e8ae013b11b1c1821a9afcc15d0d3), [`256a148`](https://github.com/mermaid-js/mermaid/commit/256a148bbf484fc7db6c19f94dd69d5d268ee048), [`16faef4`](https://github.com/mermaid-js/mermaid/commit/16faef4613b91a7d3a98a1563c25b57f9238acc7)]:
+  - mermaid@11.1.0
+
 ## 0.1.2

 ### Patch Changes
--- a/packages/mermaid-layout-elk/package.json
+++ b/packages/mermaid-layout-elk/package.json
@@ -1,6 +1,6 @@
 {
  "name": "@mermaid-js/layout-elk",
-  "version": "0.1.2",
+  "version": "0.1.3",
  "description": "ELK layout engine for mermaid",
  "module": "dist/mermaid-layout-elk.core.mjs",
  "types": "dist/layouts.d.ts",
--- a/packages/mermaid/CHANGELOG.md
+++ b/packages/mermaid/CHANGELOG.md
@@ -1,5 +1,27 @@
 # mermaid

+## 11.1.0
+
+### Minor Changes
+
+- [#5793](https://github.com/mermaid-js/mermaid/pull/5793) [`6ecdf7b`](https://github.com/mermaid-js/mermaid/commit/6ecdf7be688efdc53c52fea3ba891327242bc890) Thanks [@sidharthv96](https://github.com/sidharthv96)! - feat: Add support for iconify icons
+
+- [#5711](https://github.com/mermaid-js/mermaid/pull/5711) [`8e640da`](https://github.com/mermaid-js/mermaid/commit/8e640da5436e8ae013b11b1c1821a9afcc15d0d3) Thanks [@NicolasNewman](https://github.com/NicolasNewman)! - feat(er): allow multi-line relationship labels
+
+- [#5452](https://github.com/mermaid-js/mermaid/pull/5452) [`256a148`](https://github.com/mermaid-js/mermaid/commit/256a148bbf484fc7db6c19f94dd69d5d268ee048) Thanks [@NicolasNewman](https://github.com/NicolasNewman)! - New Diagram: Architecture
+
+  Adds architecture diagrams which allows users to show relations between services.
+
+### Patch Changes
+
+- [#5810](https://github.com/mermaid-js/mermaid/pull/5810) [`28bd07f`](https://github.com/mermaid-js/mermaid/commit/28bd07fdeb4fc981107d21317ec6160b31f80116) Thanks [@knsv](https://github.com/knsv)! - Fix for self loops in cluster
+  Supporting legacy defaultRenderer directive
+
+- [#5789](https://github.com/mermaid-js/mermaid/pull/5789) [`16faef4`](https://github.com/mermaid-js/mermaid/commit/16faef4613b91a7d3a98a1563c25b57f9238acc7) Thanks [@sidharthv96](https://github.com/sidharthv96)! - chore: Move icons to architecture, remove full icon sets to reduce bundle size
+
+- Updated dependencies [[`256a148`](https://github.com/mermaid-js/mermaid/commit/256a148bbf484fc7db6c19f94dd69d5d268ee048), [`7d8143b`](https://github.com/mermaid-js/mermaid/commit/7d8143b917ee3562149a0e0a821ed2d6f29cc05d)]:
+  - @mermaid-js/parser@0.3.0
+
 ## 11.0.2

 ### Patch Changes
--- a/packages/mermaid/package.json
+++ b/packages/mermaid/package.json
@@ -1,6 +1,6 @@
 {
  "name": "mermaid",
-  "version": "11.0.2",
+  "version": "11.1.0",
  "description": "Markdown-ish syntax for generating flowcharts, mindmaps, sequence diagrams, class diagrams, gantt charts, git graphs and more.",
  "type": "module",
  "module": "./dist/mermaid.core.mjs",
@@ -68,6 +68,7 @@
  },
  "dependencies": {
    "@braintree/sanitize-url": "^7.0.1",
+    "@iconify/utils": "^2.1.32",
    "@mermaid-js/parser": "workspace:^",
    "cytoscape": "^3.29.2",
    "cytoscape-cose-bilkent": "^4.1.0",
@@ -88,8 +89,9 @@
  },
  "devDependencies": {
    "@adobe/jsonschema2md": "^8.0.0",
-    "@types/cytoscape-fcose": "^2.2.4",
+    "@iconify/types": "^2.0.0",
    "@types/cytoscape": "^3.21.4",
+    "@types/cytoscape-fcose": "^2.2.4",
    "@types/d3": "^7.4.3",
    "@types/d3-sankey": "^0.12.4",
    "@types/d3-scale": "^4.0.8",
--- a/packages/mermaid/src/config.type.ts
+++ b/packages/mermaid/src/config.type.ts
@@ -154,15 +154,6 @@ export interface MermaidConfig {
   *
   */
  legacyMathML?: boolean;
-  /**
-   * This option specifies an object contianing a mappig of SVG icon names to a resolver that returns the svg code.
-   * For supported diagrams (i.e., Architecture), their syntax allows refering to key names in this object to display the corresponding SVG icon in the rendered diagram.
-   *
-   */
-  iconLibraries?: Array<
-    | import('./rendering-util/svgRegister.js').IconLibrary
-    | import('./rendering-util/svg/index.js').IconNamespaceKeys
-  >;
  /**
   * This option forces Mermaid to rely on KaTeX's own stylesheet for rendering MathML. Due to differences between OS
   * fonts and browser's MathML implementation, this option is recommended if consistent rendering is important.
--- a/packages/mermaid/src/diagrams/architecture/architectureDb.ts
+++ b/packages/mermaid/src/diagrams/architecture/architectureDb.ts
@@ -1,18 +1,29 @@
-// TODO remove no-console
-/* eslint-disable no-console */
-import type {
-  ArchitectureState,
-  ArchitectureDB,
-  ArchitectureService,
-  ArchitectureGroup,
-  ArchitectureEdge,
-  ArchitectureDirectionPairMap,
-  ArchitectureDirectionPair,
-  ArchitectureSpatialMap,
-  ArchitectureNode,
-  ArchitectureJunction,
-} from './architectureTypes.js';
+import type { ArchitectureDiagramConfig } from '../../config.type.js';
+import DEFAULT_CONFIG from '../../defaultConfig.js';
 import { getConfig } from '../../diagram-api/diagramAPI.js';
+import type { D3Element } from '../../types.js';
+import { ImperativeState } from '../../utils/imperativeState.js';
+import {
+  clear as commonClear,
+  getAccDescription,
+  getAccTitle,
+  getDiagramTitle,
+  setAccDescription,
+  setAccTitle,
+  setDiagramTitle,
+} from '../common/commonDb.js';
+import type {
+  ArchitectureDB,
+  ArchitectureDirectionPair,
+  ArchitectureDirectionPairMap,
+  ArchitectureEdge,
+  ArchitectureGroup,
+  ArchitectureJunction,
+  ArchitectureNode,
+  ArchitectureService,
+  ArchitectureSpatialMap,
+  ArchitectureState,
+} from './architectureTypes.js';
 import {
  getArchitectureDirectionPair,
  isArchitectureDirection,
@@ -20,19 +31,6 @@ import {
  isArchitectureService,
  shiftPositionByArchitectureDirectionPair,
 } from './architectureTypes.js';
-import {
-  setAccTitle,
-  getAccTitle,
-  setDiagramTitle,
-  getDiagramTitle,
-  getAccDescription,
-  setAccDescription,
-  clear as commonClear,
-} from '../common/commonDb.js';
-import type { ArchitectureDiagramConfig } from '../../config.type.js';
-import DEFAULT_CONFIG from '../../defaultConfig.js';
-import type { D3Element } from '../../types.js';
-import { ImperativeState } from '../../utils/imperativeState.js';

 const DEFAULT_ARCHITECTURE_CONFIG: Required<ArchitectureDiagramConfig> =
  DEFAULT_CONFIG.architecture;
@@ -286,7 +284,6 @@ const getDataStructures = () => {
      adjList,
      spatialMaps,
    };
-    console.log(state.records.dataStructures);
  }
  return state.records.dataStructures;
 };
--- a/packages/mermaid/src/diagrams/architecture/architectureIcons.ts
+++ b/packages/mermaid/src/diagrams/architecture/architectureIcons.ts
@@ -0,0 +1,43 @@
+import { unknownIcon } from '$root/rendering-util/icons.js';
+import type { IconifyJSON } from '@iconify/types';
+
+const wrapIcon = (icon: string) => {
+  return `<g><rect width="80" height="80" style="fill: #087ebf; stroke-width: 0px;"/>${icon}</g>`;
+};
+
+export const architectureIcons: IconifyJSON = {
+  prefix: 'mermaid-architecture',
+  height: 80,
+  width: 80,
+  icons: {
+    database: {
+      body: wrapIcon(
+        '<path id="b" data-name="4" d="m20,57.86c0,3.94,8.95,7.14,20,7.14s20-3.2,20-7.14" style="fill: none; stroke: #fff; stroke-miterlimit: 10; stroke-width: 2px;"/><path id="c" data-name="3" d="m20,45.95c0,3.94,8.95,7.14,20,7.14s20-3.2,20-7.14" style="fill: none; stroke: #fff; stroke-miterlimit: 10; stroke-width: 2px;"/><path id="d" data-name="2" d="m20,34.05c0,3.94,8.95,7.14,20,7.14s20-3.2,20-7.14" style="fill: none; stroke: #fff; stroke-miterlimit: 10; stroke-width: 2px;"/><ellipse id="e" data-name="1" cx="40" cy="22.14" rx="20" ry="7.14" style="fill: none; stroke: #fff; stroke-miterlimit: 10; stroke-width: 2px;"/><line x1="20" y1="57.86" x2="20" y2="22.14" style="fill: none; stroke: #fff; stroke-miterlimit: 10; stroke-width: 2px;"/><line x1="60" y1="57.86" x2="60" y2="22.14" style="fill: none; stroke: #fff; stroke-miterlimit: 10; stroke-width: 2px;"/>'
+      ),
+    },
+    server: {
+      body: wrapIcon(
+        '<rect x="17.5" y="17.5" width="45" height="45" rx="2" ry="2" style="fill: none; stroke: #fff; stroke-miterlimit: 10; stroke-width: 2px;"/><line x1="17.5" y1="32.5" x2="62.5" y2="32.5" style="fill: none; stroke: #fff; stroke-miterlimit: 10; stroke-width: 2px;"/><line x1="17.5" y1="47.5" x2="62.5" y2="47.5" style="fill: none; stroke: #fff; stroke-miterlimit: 10; stroke-width: 2px;"/><g><path d="m56.25,25c0,.27-.45.5-1,.5h-10.5c-.55,0-1-.23-1-.5s.45-.5,1-.5h10.5c.55,0,1,.23,1,.5Z" style="fill: #fff; stroke-width: 0px;"/><path d="m56.25,25c0,.27-.45.5-1,.5h-10.5c-.55,0-1-.23-1-.5s.45-.5,1-.5h10.5c.55,0,1,.23,1,.5Z" style="fill: none; stroke: #fff; stroke-miterlimit: 10;"/></g><g><path d="m56.25,40c0,.27-.45.5-1,.5h-10.5c-.55,0-1-.23-1-.5s.45-.5,1-.5h10.5c.55,0,1,.23,1,.5Z" style="fill: #fff; stroke-width: 0px;"/><path d="m56.25,40c0,.27-.45.5-1,.5h-10.5c-.55,0-1-.23-1-.5s.45-.5,1-.5h10.5c.55,0,1,.23,1,.5Z" style="fill: none; stroke: #fff; stroke-miterlimit: 10;"/></g><g><path d="m56.25,55c0,.27-.45.5-1,.5h-10.5c-.55,0-1-.23-1-.5s.45-.5,1-.5h10.5c.55,0,1,.23,1,.5Z" style="fill: #fff; stroke-width: 0px;"/><path d="m56.25,55c0,.27-.45.5-1,.5h-10.5c-.55,0-1-.23-1-.5s.45-.5,1-.5h10.5c.55,0,1,.23,1,.5Z" style="fill: none; stroke: #fff; stroke-miterlimit: 10;"/></g><g><circle cx="32.5" cy="25" r=".75" style="fill: #fff; stroke: #fff; stroke-miterlimit: 10;"/><circle cx="27.5" cy="25" r=".75" style="fill: #fff; stroke: #fff; stroke-miterlimit: 10;"/><circle cx="22.5" cy="25" r=".75" style="fill: #fff; stroke: #fff; stroke-miterlimit: 10;"/></g><g><circle cx="32.5" cy="40" r=".75" style="fill: #fff; stroke: #fff; stroke-miterlimit: 10;"/><circle cx="27.5" cy="40" r=".75" style="fill: #fff; stroke: #fff; stroke-miterlimit: 10;"/><circle cx="22.5" cy="40" r=".75" style="fill: #fff; stroke: #fff; stroke-miterlimit: 10;"/></g><g><circle cx="32.5" cy="55" r=".75" style="fill: #fff; stroke: #fff; stroke-miterlimit: 10;"/><circle cx="27.5" cy="55" r=".75" style="fill: #fff; stroke: #fff; stroke-miterlimit: 10;"/><circle cx="22.5" cy="55" r=".75" style="fill: #fff; stroke: #fff; stroke-miterlimit: 10;"/></g>'
+      ),
+    },
+    disk: {
+      body: wrapIcon(
+        '<rect x="20" y="15" width="40" height="50" rx="1" ry="1" style="fill: none; stroke: #fff; stroke-miterlimit: 10; stroke-width: 2px;"/><ellipse cx="24" cy="19.17" rx=".8" ry=".83" style="fill: none; stroke: #fff; stroke-miterlimit: 10; stroke-width: 2px;"/><ellipse cx="56" cy="19.17" rx=".8" ry=".83" style="fill: none; stroke: #fff; stroke-miterlimit: 10; stroke-width: 2px;"/><ellipse cx="24" cy="60.83" rx=".8" ry=".83" style="fill: none; stroke: #fff; stroke-miterlimit: 10; stroke-width: 2px;"/><ellipse cx="56" cy="60.83" rx=".8" ry=".83" style="fill: none; stroke: #fff; stroke-miterlimit: 10; stroke-width: 2px;"/><ellipse cx="40" cy="33.75" rx="14" ry="14.58" style="fill: none; stroke: #fff; stroke-miterlimit: 10; stroke-width: 2px;"/><ellipse cx="40" cy="33.75" rx="4" ry="4.17" style="fill: #fff; stroke: #fff; stroke-miterlimit: 10; stroke-width: 2px;"/><path d="m37.51,42.52l-4.83,13.22c-.26.71-1.1,1.02-1.76.64l-4.18-2.42c-.66-.38-.81-1.26-.33-1.84l9.01-10.8c.88-1.05,2.56-.08,2.09,1.2Z" style="fill: #fff; stroke-width: 0px;"/>'
+      ),
+    },
+    internet: {
+      body: wrapIcon(
+        '<circle cx="40" cy="40" r="22.5" style="fill: none; stroke: #fff; stroke-miterlimit: 10; stroke-width: 2px;"/><line x1="40" y1="17.5" x2="40" y2="62.5" style="fill: none; stroke: #fff; stroke-miterlimit: 10; stroke-width: 2px;"/><line x1="17.5" y1="40" x2="62.5" y2="40" style="fill: none; stroke: #fff; stroke-miterlimit: 10; stroke-width: 2px;"/><path d="m39.99,17.51c-15.28,11.1-15.28,33.88,0,44.98" style="fill: none; stroke: #fff; stroke-miterlimit: 10; stroke-width: 2px;"/><path d="m40.01,17.51c15.28,11.1,15.28,33.88,0,44.98" style="fill: none; stroke: #fff; stroke-miterlimit: 10; stroke-width: 2px;"/><line x1="19.75" y1="30.1" x2="60.25" y2="30.1" style="fill: none; stroke: #fff; stroke-miterlimit: 10; stroke-width: 2px;"/><line x1="19.75" y1="49.9" x2="60.25" y2="49.9" style="fill: none; stroke: #fff; stroke-miterlimit: 10; stroke-width: 2px;"/>'
+      ),
+    },
+    cloud: {
+      body: wrapIcon(
+        '<path d="m65,47.5c0,2.76-2.24,5-5,5H20c-2.76,0-5-2.24-5-5,0-1.87,1.03-3.51,2.56-4.36-.04-.21-.06-.42-.06-.64,0-2.6,2.48-4.74,5.65-4.97,1.65-4.51,6.34-7.76,11.85-7.76.86,0,1.69.08,2.5.23,2.09-1.57,4.69-2.5,7.5-2.5,6.1,0,11.19,4.38,12.28,10.17,2.14.56,3.72,2.51,3.72,4.83,0,.03,0,.07-.01.1,2.29.46,4.01,2.48,4.01,4.9Z" style="fill: none; stroke: #fff; stroke-miterlimit: 10; stroke-width: 2px;"/>'
+      ),
+    },
+    unknown: unknownIcon,
+    blank: {
+      body: wrapIcon(''),
+    },
+  },
+};
--- a/packages/mermaid/src/diagrams/architecture/architectureRenderer.ts
+++ b/packages/mermaid/src/diagrams/architecture/architectureRenderer.ts
@@ -1,39 +1,45 @@
-// TODO remove no-console
-/* eslint-disable no-console */
+import { registerIconPacks } from '$root/rendering-util/icons.js';
 import type { Position } from 'cytoscape';
 import cytoscape from 'cytoscape';
-import type { Diagram } from '../../Diagram.js';
 import type { FcoseLayoutOptions } from 'cytoscape-fcose';
 import fcose from 'cytoscape-fcose';
+import { select } from 'd3';
 import type { DrawDefinition, SVG } from '../../diagram-api/types.js';
+import type { Diagram } from '../../Diagram.js';
 import { log } from '../../logger.js';
 import { selectSvgElement } from '../../rendering-util/selectSvgElement.js';
+import { setupGraphViewbox } from '../../setupGraphViewbox.js';
+import { getConfigField } from './architectureDb.js';
+import { architectureIcons } from './architectureIcons.js';
 import type {
  ArchitectureDataStructures,
-  ArchitectureSpatialMap,
-  EdgeSingularData,
-  EdgeSingular,
  ArchitectureJunction,
+  ArchitectureSpatialMap,
+  EdgeSingular,
+  EdgeSingularData,
  NodeSingularData,
 } from './architectureTypes.js';
 import {
  type ArchitectureDB,
  type ArchitectureDirection,
-  type ArchitectureGroup,
  type ArchitectureEdge,
+  type ArchitectureGroup,
  type ArchitectureService,
  ArchitectureDirectionName,
+  edgeData,
  getOppositeArchitectureDirection,
  isArchitectureDirectionXY,
  isArchitectureDirectionY,
  nodeData,
-  edgeData,
 } from './architectureTypes.js';
-import { select } from 'd3';
-import { setupGraphViewbox } from '../../setupGraphViewbox.js';
 import { drawEdges, drawGroups, drawJunctions, drawServices } from './svgDraw.js';
-import { getConfigField } from './architectureDb.js';

+registerIconPacks([
+  {
+    name: architectureIcons.prefix,
+    icons: architectureIcons,
+  },
+]);
 cytoscape.use(fcose);

 function addServices(services: ArchitectureService[], cy: cytoscape.Core) {
@@ -319,13 +325,6 @@ function layoutArchitecture(
    // Create the relative constraints for fcose by using an inverse of the spatial map and performing BFS on it
    const relativePlacementConstraint = getRelativeConstraints(spatialMaps);

-    console.log(`Horizontal Alignments:`);
-    console.log(alignmentConstraint.horizontal);
-    console.log(`Vertical Alignments:`);
-    console.log(alignmentConstraint.vertical);
-    console.log(`Relative Alignments:`);
-    console.log(relativePlacementConstraint);
-
    const layout = cy.layout({
      name: 'fcose',
      quality: 'proof',
@@ -440,9 +439,6 @@ export const draw: DrawDefinition = async (text, id, _version, diagObj: Diagram)
  const groups = db.getGroups();
  const edges = db.getEdges();
  const ds = db.getDataStructures();
-  console.log('Services: ', services);
-  console.log('Edges: ', edges);
-  console.log('Groups: ', groups);

  const svg: SVG = selectSvgElement(id);

@@ -465,8 +461,6 @@ export const draw: DrawDefinition = async (text, id, _version, diagObj: Diagram)
  positionNodes(db, cy);

  setupGraphViewbox(undefined, svg, getConfigField('padding'), getConfigField('useMaxWidth'));
-
-  console.log('==============================================================');
 };

 export const renderer = { draw };
--- a/packages/mermaid/src/diagrams/architecture/svgDraw.ts
+++ b/packages/mermaid/src/diagrams/architecture/svgDraw.ts
@@ -1,26 +1,25 @@
-// TODO remove no-console
-/* eslint-disable no-console */
-import type { D3Element } from '../../types.js';
+import { getIconSVG } from '$root/rendering-util/icons.js';
+import type cytoscape from 'cytoscape';
+import { getConfig } from '../../diagram-api/diagramAPI.js';
 import { createText } from '../../rendering-util/createText.js';
+import type { D3Element } from '../../types.js';
+import { db, getConfigField } from './architectureDb.js';
+import { architectureIcons } from './architectureIcons.js';
 import {
  ArchitectureDirectionArrow,
-  type ArchitectureDB,
-  type ArchitectureService,
  ArchitectureDirectionArrowShift,
-  isArchitectureDirectionX,
-  isArchitectureDirectionY,
  edgeData,
-  nodeData,
-  isArchitectureDirectionXY,
  getArchitectureDirectionPair,
  getArchitectureDirectionXYFactors,
+  isArchitectureDirectionX,
+  isArchitectureDirectionXY,
+  isArchitectureDirectionY,
  isArchitecturePairXY,
+  nodeData,
+  type ArchitectureDB,
  type ArchitectureJunction,
+  type ArchitectureService,
 } from './architectureTypes.js';
-import type cytoscape from 'cytoscape';
-import { getIcon } from '../../rendering-util/svgRegister.js';
-import { db, getConfigField } from './architectureDb.js';
-import { getConfig } from '../../diagram-api/diagramAPI.js';

 export const drawEdges = async function (edgesEl: D3Element, cy: cytoscape.Core) {
  const padding = getConfigField('padding');
@@ -198,7 +197,6 @@ export const drawGroups = async function (groupsEl: D3Element, cy: cytoscape.Cor
      const data = nodeData(node);
      if (data.type === 'group') {
        const { h, w, x1, y1 } = node.boundingBox();
-        console.log(`Draw group (${data.id}): pos=(${x1}, ${y1}), dim=(${w}, ${h})`);

        groupsEl
          .append('rect')
@@ -213,7 +211,9 @@ export const drawGroups = async function (groupsEl: D3Element, cy: cytoscape.Cor
        let shiftedY1 = y1;
        if (data.icon) {
          const bkgElem = groupLabelContainer.append('g');
-          getIcon(data.icon)?.(bkgElem, groupIconSize);
+          bkgElem.html(
+            `<g>${await getIconSVG(data.icon, { height: groupIconSize, width: groupIconSize, fallbackPrefix: architectureIcons.prefix })}</g>`
+          );
          bkgElem.attr(
            'transform',
            'translate(' +
@@ -290,15 +290,19 @@ export const drawServices = async function (
      textElem.attr('transform', 'translate(' + iconSize / 2 + ', ' + iconSize + ')');
    }

-    let bkgElem = serviceElem.append('g');
+    const bkgElem = serviceElem.append('g');
    if (service.icon) {
      // TODO: should a warning be given to end-users saying which icon names are available?
      // if (!isIconNameInUse(service.icon)) {
      //   throw new Error(`Invalid SVG Icon name: "${service.icon}"`);
      // }
-      bkgElem = getIcon(service.icon)?.(bkgElem, iconSize);
+      bkgElem.html(
+        `<g>${await getIconSVG(service.icon, { height: iconSize, width: iconSize, fallbackPrefix: architectureIcons.prefix })}</g>`
+      );
    } else if (service.iconText) {
-      bkgElem = getIcon('blank')?.(bkgElem, iconSize);
+      bkgElem.html(
+        `<g>${await getIconSVG('blank', { height: iconSize, width: iconSize, fallbackPrefix: architectureIcons.prefix })}</g>`
+      );
      const textElemContainer = bkgElem.append('g');
      const fo = textElemContainer
        .append('foreignObject')
--- a/packages/mermaid/src/docs/.vitepress/config.ts
+++ b/packages/mermaid/src/docs/.vitepress/config.ts
@@ -177,7 +177,6 @@ function sidebarConfig() {
        { text: 'Directives', link: '/config/directives' },
        { text: 'Theming', link: '/config/theming' },
        { text: 'Math', link: '/config/math' },
-        { text: 'Icons', link: '/config/icons' },
        { text: 'Accessibility', link: '/config/accessibility' },
        { text: 'Mermaid CLI', link: '/config/mermaidCLI' },
        { text: 'FAQ', link: '/config/faq' },
--- a/packages/mermaid/src/docs/.vitepress/theme/mermaid.ts
+++ b/packages/mermaid/src/docs/.vitepress/theme/mermaid.ts
@@ -2,6 +2,13 @@ import mermaid, { type MermaidConfig } from 'mermaid';
 import zenuml from '../../../../../mermaid-zenuml/dist/mermaid-zenuml.core.mjs';

 const init = mermaid.registerExternalDiagrams([zenuml]);
+mermaid.registerIconPacks([
+  {
+    name: 'logos',
+    loader: () =>
+      fetch('https://unpkg.com/@iconify-json/logos/icons.json').then((res) => res.json()),
+  },
+]);

 export const render = async (id: string, code: string, config: MermaidConfig): Promise<string> => {
  await init;
--- a/packages/mermaid/src/docs/config/icons.md
+++ b/packages/mermaid/src/docs/config/icons.md
@@ -1,61 +0,0 @@
-# SVG Icons (v???+)
-
-SVG Icons can be used with supported diagrams. Alongside the icon packs included with Mermaid, 3rd party libraries can be included in the configuration to cover additional use-cases.
-
-## Supported Diagrams
-
-| Diagram      | Usage                             |
-| ------------ | --------------------------------- |
-| Architecture | Icon names are surrounded by `()` |
-
-## Included Icon Packs
-
-| Icon Pack     | Prefix |
-| ------------- | ------ |
-| default       | N/A    |
-| Amazon AWS    | `aws:` |
-| Digital Ocean | `do:`  |
-| GitHub        | `gh:`  |
-
-Note that in order to use non-generic icons that are provided with Mermaid, the packs must be explicitly loaded when on initialization initialized.
-
-```js
-import sampleIconPack from 'sample-icon-pack';
-
-mermaid.initialize({
-  iconLibraries: ['aws:common', 'aws:full', 'github', 'digital-ocean'],
-});
-```
-
-## Using Custom Icon Packs
-
-Custom icon packs can be used by including them in the `iconLibraries` array on mermaid initialization.
-
-```js
-import sampleIconPack from 'sample-icon-pack';
-
-mermaid.initialize({
-  iconLibraries: [sampleIconPack, 'aws:full', ...],
-});
-```
-
-## Creating Custom Icon Packs
-
-```js
-import { createIcon } from 'mermaid';
-import type { IconLibrary, IconResolver } from 'mermaid';
-
-// type IconLibrary = Record<string, IconResolver>;
-// createIcon: (icon: string, originalSize: number) => IconResolver
-const myIconLibrary: IconLibrary = {
-  defaultCloudExample: createIcon(
-        `<g>
-            <rect width="80" height="80" style="fill: #087ebf; stroke-width: 0px;"/>
-            <path d="..." style="fill: none; stroke: #fff; stroke-miterlimit: 10; stroke-width: 2px;"/>
-        </g>`,
-        80
-    )
-};
-
-export default myIconLibrary
-```
--- a/packages/mermaid/src/docs/ecosystem/integrations-community.md
+++ b/packages/mermaid/src/docs/ecosystem/integrations-community.md
@@ -69,6 +69,7 @@ To add an integration to this list, see the [Integrations - create page](./integ
  - [Markdown for mermaid plugin](https://github.com/jamieh-mongolian/markdown-for-mermaid-plugin)
  - [redmine-mermaid](https://github.com/styz/redmine_mermaid)
 - Visual Studio Code [Polyglot Interactive Notebooks](https://github.com/dotnet/interactive#net-interactive)
+- [Microsoft Loop](https://loop.cloud.microsoft) ✅

 ### LLM integrations

--- a/packages/mermaid/src/docs/syntax/architecture.md
+++ b/packages/mermaid/src/docs/syntax/architecture.md
@@ -1,4 +1,4 @@
-# Architecture Diagrams Documentation (v<MERMAID_RELEASE_VERSION>+)
+# Architecture Diagrams Documentation (v11.1.0+)

 > In the context of mermaid-js, the architecture diagram is used to show the relationship between services and resources commonly found within the Cloud or CI/CD deployments. In an architecture diagram, services (nodes) are connected by edges. Related services can be placed within groups to better illustrate how they are organized.

@@ -153,4 +153,71 @@ architecture-beta
    bottom_gateway:T -- B:junctionRight
 ```

-## Configuration
+## Icons
+
+By default, architecture diagram supports the following icons: `cloud`, `database`, `disk`, `internet`, `server`.
+Users can use any of the 200,000+ icons available in iconify.design, or add their own custom icons, by following the steps below.
+
+The icon packs available can be found at [icones.js.org](https://icones.js.org/).
+We use the name defined when registering the icon pack, to override the prefix field of the iconify pack. This allows the user to use shorter names for the icons. It also allows us to load a particular pack only when it is used in a diagram.
+
+Using JSON file directly from CDN:
+
+```js
+import mermaid from 'CDN/mermaid.esm.mjs';
+mermaid.registerIconPacks([
+  {
+    name: 'logos',
+    loader: () =>
+      fetch('https://unpkg.com/@iconify-json/logos/icons.json').then((res) => res.json()),
+  },
+]);
+```
+
+Using packages and a bundler:
+
+```bash
+npm install @iconify-json/logos
+```
+
+With lazy loading
+
+```js
+import mermaid from 'mermaid';
+
+mermaid.registerIconPacks([
+  {
+    name: 'logos',
+    loader: () => import('@iconify-json/logos').then((module) => module.icons),
+  },
+]);
+```
+
+Without lazy loading
+
+```js
+import mermaid from 'mermaid';
+import { icons } from '@iconify-json/logos';
+mermaid.registerIconPacks([
+  {
+    name: icons.prefix, // To use the prefix defined in the icon pack
+    icons,
+  },
+]);
+```
+
+After the icons are installed, they can be used in the architecture diagram by using the format "name:icon-name", where name is the value used when registering the icon pack.
+
+```mermaid-example
+architecture-beta
+    group api(logos:aws-lambda)[API]
+
+    service db(logos:aws-aurora)[Database] in api
+    service disk1(logos:aws-glacier)[Storage] in api
+    service disk2(logos:aws-s3)[Storage] in api
+    service server(logos:aws-ec2)[Server] in api
+
+    db:L -- R:server
+    disk1:T -- B:server
+    disk2:T -- B:db
+```
--- a/packages/mermaid/src/docs/syntax/entityRelationshipDiagram.md
+++ b/packages/mermaid/src/docs/syntax/entityRelationshipDiagram.md
@@ -192,7 +192,7 @@ erDiagram

 - If you want the relationship label to be more than one word, you must use double quotes around the phrase
 - If you don't want a label at all on a relationship, you must use an empty double-quoted string
- (v<MERMAID_RELEASE_VERSION>+) If you want a multi-line label on a relationship, use `<br />` between the two lines (`"first line<br />second line"`)
+- (v11.1.0+) If you want a multi-line label on a relationship, use `<br />` between the two lines (`"first line<br />second line"`)

 ## Styling

--- a/packages/mermaid/src/mermaid.ts
+++ b/packages/mermaid/src/mermaid.ts
@@ -2,6 +2,7 @@
 * Web page integration module for the mermaid framework. It uses the mermaidAPI for mermaid
 * functionality and to render the diagrams to svg code!
 */
+import { registerIconPacks } from '$root/rendering-util/icons.js';
 import { dedent } from 'ts-dedent';
 import type { MermaidConfig } from './config.type.js';
 import { detectType, registerLazyLoadedDiagrams } from './diagram-api/detectType.js';
@@ -19,8 +20,6 @@ import type { LayoutData } from './rendering-util/types.js';
 import type { ParseOptions, ParseResult, RenderResult } from './types.js';
 import type { DetailedError } from './utils.js';
 import utils, { isDetailedError } from './utils.js';
-import type { IconLibrary, IconResolver } from './rendering-util/svgRegister.js';
-import { createIcon } from './rendering-util/svgRegister.js';

 export type {
  DetailedError,
@@ -37,12 +36,8 @@ export type {
  SVG,
  SVGGroup,
  UnknownDiagramError,
-  IconLibrary,
-  IconResolver,
 };

-export { createIcon };
-
 export interface RunOptions {
  /**
   * The query selector to use when finding elements to render. Default: `".mermaid"`.
@@ -441,6 +436,7 @@ export interface Mermaid {
  contentLoaded: typeof contentLoaded;
  setParseErrorHandler: typeof setParseErrorHandler;
  detectType: typeof detectType;
+  registerIconPacks: typeof registerIconPacks;
 }

 const mermaid: Mermaid = {
@@ -457,6 +453,7 @@ const mermaid: Mermaid = {
  contentLoaded,
  setParseErrorHandler,
  detectType,
+  registerIconPacks,
 };

 export default mermaid;
--- a/packages/mermaid/src/mermaidAPI.ts
+++ b/packages/mermaid/src/mermaidAPI.ts
@@ -6,29 +6,26 @@
 import { select } from 'd3';
 import { compile, serialize, stringify } from 'stylis';
 // @ts-ignore: TODO Fix ts errors
+import DOMPurify from 'dompurify';
+import isEmpty from 'lodash-es/isEmpty.js';
 import { version } from '../package.json';
+import { addSVGa11yTitleDescription, setA11yDiagramInfo } from './accessibility.js';
+import assignWithDepth from './assignWithDepth.js';
 import * as configApi from './config.js';
+import type { MermaidConfig } from './config.type.js';
 import { addDiagrams } from './diagram-api/diagram-orchestration.js';
+import type { DiagramMetadata, DiagramStyleClassDef } from './diagram-api/types.js';
 import { Diagram } from './Diagram.js';
+import { evaluate } from './diagrams/common/common.js';
 import errorRenderer from './diagrams/error/errorRenderer.js';
 import { attachFunctions } from './interactionDb.js';
 import { log, setLogLevel } from './logger.js';
+import { preprocessDiagram } from './preprocess.js';
 import getStyles from './styles.js';
 import theme from './themes/index.js';
-import DOMPurify from 'dompurify';
-import type { MermaidConfig } from './config.type.js';
-import { evaluate } from './diagrams/common/common.js';
-import isEmpty from 'lodash-es/isEmpty.js';
-import { setA11yDiagramInfo, addSVGa11yTitleDescription } from './accessibility.js';
-import type { DiagramMetadata, DiagramStyleClassDef } from './diagram-api/types.js';
-import { preprocessDiagram } from './preprocess.js';
-import { decodeEntities } from './utils.js';
-import type { IconLibrary } from './rendering-util/svgRegister.js';
-import { registerIcons } from './rendering-util/svgRegister.js';
-import defaultIconLibrary from './rendering-util/svg/index.js';
-import { toBase64 } from './utils/base64.js';
 import type { D3Element, ParseOptions, ParseResult, RenderResult } from './types.js';
-import assignWithDepth from './assignWithDepth.js';
+import { decodeEntities } from './utils.js';
+import { toBase64 } from './utils/base64.js';

 const MAX_TEXTLENGTH = 50_000;
 const MAX_TEXTLENGTH_EXCEEDED_MSG =
@@ -492,29 +489,6 @@ function initialize(userOptions: MermaidConfig = {}) {
  // Set default options
  configApi.saveConfigFromInitialize(options);

-  registerIcons(defaultIconLibrary);
-  if (options?.iconLibraries) {
-    // TODO: find a better way to handle this, assumed to be resolved by the time diagrams are being generated
-    // eslint-disable-next-line @typescript-eslint/no-misused-promises
-    options.iconLibraries.forEach(async (library) => {
-      if (typeof library === 'string') {
-        let lib: IconLibrary = {};
-        if (library === 'aws:common') {
-          lib = (await import('./rendering-util/svg/aws/awsCommon.js')).default;
-        } else if (library === 'aws:full') {
-          lib = (await import('./rendering-util/svg/aws/awsFull.js')).default;
-        } else if (library === 'digital-ocean') {
-          lib = (await import('./rendering-util/svg/digital-ocean/digitalOcean.js')).default;
-        } else if (library === 'github') {
-          lib = (await import('./rendering-util/svg/github/github.js')).default;
-        }
-        registerIcons(lib);
-      } else {
-        registerIcons(library);
-      }
-    });
-  }
-
  if (options?.theme && options.theme in theme) {
    // Todo merge with user options
    options.themeVariables = theme[options.theme as keyof typeof theme].getThemeVariables(
--- a/packages/mermaid/src/rendering-util/icons.ts
+++ b/packages/mermaid/src/rendering-util/icons.ts
@@ -0,0 +1,100 @@
+import { log } from '$root/logger.js';
+import type { ExtendedIconifyIcon, IconifyIcon, IconifyJSON } from '@iconify/types';
+import type { IconifyIconCustomisations } from '@iconify/utils';
+import { getIconData, iconToHTML, iconToSVG, replaceIDs, stringToIcon } from '@iconify/utils';
+
+interface AsyncIconLoader {
+  name: string;
+  loader: () => Promise<IconifyJSON>;
+}
+
+interface SyncIconLoader {
+  name: string;
+  icons: IconifyJSON;
+}
+
+export type IconLoader = AsyncIconLoader | SyncIconLoader;
+
+export const unknownIcon: IconifyIcon = {
+  body: '<g><rect width="80" height="80" style="fill: #087ebf; stroke-width: 0px;"/><text transform="translate(21.16 64.67)" style="fill: #fff; font-family: ArialMT, Arial; font-size: 67.75px;"><tspan x="0" y="0">?</tspan></text></g>',
+  height: 80,
+  width: 80,
+};
+
+const iconsStore = new Map<string, IconifyJSON>();
+const loaderStore = new Map<string, AsyncIconLoader['loader']>();
+
+export const registerIconPacks = (iconLoaders: IconLoader[]) => {
+  for (const iconLoader of iconLoaders) {
+    if (!iconLoader.name) {
+      throw new Error(
+        'Invalid icon loader. Must have a "name" property with non-empty string value.'
+      );
+    }
+    log.debug('Registering icon pack:', iconLoader.name);
+    if ('loader' in iconLoader) {
+      loaderStore.set(iconLoader.name, iconLoader.loader);
+    } else if ('icons' in iconLoader) {
+      iconsStore.set(iconLoader.name, iconLoader.icons);
+    } else {
+      log.error('Invalid icon loader:', iconLoader);
+      throw new Error('Invalid icon loader. Must have either "icons" or "loader" property.');
+    }
+  }
+};
+
+const getRegisteredIconData = async (iconName: string, fallbackPrefix?: string) => {
+  const data = stringToIcon(iconName, true, fallbackPrefix !== undefined);
+  if (!data) {
+    throw new Error(`Invalid icon name: ${iconName}`);
+  }
+  const prefix = data.prefix || fallbackPrefix;
+  if (!prefix) {
+    throw new Error(`Icon name must contain a prefix: ${iconName}`);
+  }
+  let icons = iconsStore.get(prefix);
+  if (!icons) {
+    const loader = loaderStore.get(prefix);
+    if (!loader) {
+      throw new Error(`Icon set not found: ${data.prefix}`);
+    }
+    try {
+      const loaded = await loader();
+      icons = { ...loaded, prefix };
+      iconsStore.set(prefix, icons);
+    } catch (e) {
+      log.error(e);
+      throw new Error(`Failed to load icon set: ${data.prefix}`);
+    }
+  }
+  const iconData = getIconData(icons, data.name);
+  if (!iconData) {
+    throw new Error(`Icon not found: ${iconName}`);
+  }
+  return iconData;
+};
+
+export const isIconAvailable = async (iconName: string) => {
+  try {
+    await getRegisteredIconData(iconName);
+    return true;
+  } catch {
+    return false;
+  }
+};
+
+export const getIconSVG = async (
+  iconName: string,
+  customisations?: IconifyIconCustomisations & { fallbackPrefix?: string }
+) => {
+  let iconData: ExtendedIconifyIcon;
+  try {
+    iconData = await getRegisteredIconData(iconName, customisations?.fallbackPrefix);
+  } catch (e) {
+    log.error(e);
+    iconData = unknownIcon;
+  }
+  const renderData = iconToSVG(iconData, customisations);
+  const svg = iconToHTML(replaceIDs(renderData.body), renderData.attributes);
+  return svg;
+};
--- a/packages/mermaid/src/rendering-util/svg/aws/awsCommon.ts
+++ b/packages/mermaid/src/rendering-util/svg/aws/awsCommon.ts
--- a/packages/mermaid/src/rendering-util/svg/aws/awsFull.ts
+++ b/packages/mermaid/src/rendering-util/svg/aws/awsFull.ts
--- a/packages/mermaid/src/rendering-util/svg/default/blank.ts
+++ b/packages/mermaid/src/rendering-util/svg/default/blank.ts
@@ -1,11 +0,0 @@
-/**
- * Designer: Nicolas Newman
- */
-import { createIcon } from '../../svgRegister.js';
-
-export default createIcon(
-  `<g>
-    <rect width="80" height="80" style="fill: #087ebf; stroke-width: 0px;"/>
-</g>`,
-  80
-);
--- a/packages/mermaid/src/rendering-util/svg/default/cloud.ts
+++ b/packages/mermaid/src/rendering-util/svg/default/cloud.ts
@@ -1,13 +0,0 @@
-/**
- * Designer: Nicolas Newman
- * @see https://github.com/NicolasNewman/IconLibrary
- */
-import { createIcon } from '../../svgRegister.js';
-
-export default createIcon(
-  `<g>
-    <rect width="80" height="80" style="fill: #087ebf; stroke-width: 0px;"/>
-    <path d="m65,47.5c0,2.76-2.24,5-5,5H20c-2.76,0-5-2.24-5-5,0-1.87,1.03-3.51,2.56-4.36-.04-.21-.06-.42-.06-.64,0-2.6,2.48-4.74,5.65-4.97,1.65-4.51,6.34-7.76,11.85-7.76.86,0,1.69.08,2.5.23,2.09-1.57,4.69-2.5,7.5-2.5,6.1,0,11.19,4.38,12.28,10.17,2.14.56,3.72,2.51,3.72,4.83,0,.03,0,.07-.01.1,2.29.46,4.01,2.48,4.01,4.9Z" style="fill: none; stroke: #fff; stroke-miterlimit: 10; stroke-width: 2px;"/>
-  </g>`,
-  80
-);
--- a/packages/mermaid/src/rendering-util/svg/default/database.ts
+++ b/packages/mermaid/src/rendering-util/svg/default/database.ts
@@ -1,18 +0,0 @@
-/**
- * Designer: Nicolas Newman
- * @see https://github.com/NicolasNewman/IconLibrary
- */
-import { createIcon } from '../../svgRegister.js';
-
-export default createIcon(
-  `<g>
-      <rect width="80" height="80" style="fill: #087ebf; stroke-width: 0px;"/>
-      <path id="b" data-name="4" d="m20,57.86c0,3.94,8.95,7.14,20,7.14s20-3.2,20-7.14" style="fill: none; stroke: #fff; stroke-miterlimit: 10; stroke-width: 2px;"/>
-      <path id="c" data-name="3" d="m20,45.95c0,3.94,8.95,7.14,20,7.14s20-3.2,20-7.14" style="fill: none; stroke: #fff; stroke-miterlimit: 10; stroke-width: 2px;"/>
-      <path id="d" data-name="2" d="m20,34.05c0,3.94,8.95,7.14,20,7.14s20-3.2,20-7.14" style="fill: none; stroke: #fff; stroke-miterlimit: 10; stroke-width: 2px;"/>
-      <ellipse id="e" data-name="1" cx="40" cy="22.14" rx="20" ry="7.14" style="fill: none; stroke: #fff; stroke-miterlimit: 10; stroke-width: 2px;"/>
-      <line x1="20" y1="57.86" x2="20" y2="22.14" style="fill: none; stroke: #fff; stroke-miterlimit: 10; stroke-width: 2px;"/>
-      <line x1="60" y1="57.86" x2="60" y2="22.14" style="fill: none; stroke: #fff; stroke-miterlimit: 10; stroke-width: 2px;"/>
-</g>`,
-  80
-);
--- a/packages/mermaid/src/rendering-util/svg/default/disk.ts
+++ b/packages/mermaid/src/rendering-util/svg/default/disk.ts
@@ -1,20 +0,0 @@
-/**
- * Designer: Nicolas Newman
- * @see https://github.com/NicolasNewman/IconLibrary
- */
-import { createIcon } from '../../svgRegister.js';
-
-export default createIcon(
-  `<g>
-    <rect width="80" height="80" style="fill: #087ebf; stroke-width: 0px;"/>
-    <rect x="20" y="15" width="40" height="50" rx="1" ry="1" style="fill: none; stroke: #fff; stroke-miterlimit: 10; stroke-width: 2px;"/>
-    <ellipse cx="24" cy="19.17" rx=".8" ry=".83" style="fill: none; stroke: #fff; stroke-miterlimit: 10; stroke-width: 2px;"/>
-    <ellipse cx="56" cy="19.17" rx=".8" ry=".83" style="fill: none; stroke: #fff; stroke-miterlimit: 10; stroke-width: 2px;"/>
-    <ellipse cx="24" cy="60.83" rx=".8" ry=".83" style="fill: none; stroke: #fff; stroke-miterlimit: 10; stroke-width: 2px;"/>
-    <ellipse cx="56" cy="60.83" rx=".8" ry=".83" style="fill: none; stroke: #fff; stroke-miterlimit: 10; stroke-width: 2px;"/>
-    <ellipse cx="40" cy="33.75" rx="14" ry="14.58" style="fill: none; stroke: #fff; stroke-miterlimit: 10; stroke-width: 2px;"/>
-    <ellipse cx="40" cy="33.75" rx="4" ry="4.17" style="fill: #fff; stroke: #fff; stroke-miterlimit: 10; stroke-width: 2px;"/>
-    <path d="m37.51,42.52l-4.83,13.22c-.26.71-1.1,1.02-1.76.64l-4.18-2.42c-.66-.38-.81-1.26-.33-1.84l9.01-10.8c.88-1.05,2.56-.08,2.09,1.2Z" style="fill: #fff; stroke-width: 0px;"/>
-</g>`,
-  80
-);
--- a/packages/mermaid/src/rendering-util/svg/default/internet.ts
+++ b/packages/mermaid/src/rendering-util/svg/default/internet.ts
@@ -1,19 +0,0 @@
-/**
- * Designer: Nicolas Newman
- * @see https://github.com/NicolasNewman/IconLibrary
- */
-import { createIcon } from '../../svgRegister.js';
-
-export default createIcon(
-  `<g>
-    <rect width="80" height="80" style="fill: #087ebf; stroke-width: 0px;"/>
-    <circle cx="40" cy="40" r="22.5" style="fill: none; stroke: #fff; stroke-miterlimit: 10; stroke-width: 2px;"/>
-    <line x1="40" y1="17.5" x2="40" y2="62.5" style="fill: none; stroke: #fff; stroke-miterlimit: 10; stroke-width: 2px;"/>
-    <line x1="17.5" y1="40" x2="62.5" y2="40" style="fill: none; stroke: #fff; stroke-miterlimit: 10; stroke-width: 2px;"/>
-    <path d="m39.99,17.51c-15.28,11.1-15.28,33.88,0,44.98" style="fill: none; stroke: #fff; stroke-miterlimit: 10; stroke-width: 2px;"/>
-    <path d="m40.01,17.51c15.28,11.1,15.28,33.88,0,44.98" style="fill: none; stroke: #fff; stroke-miterlimit: 10; stroke-width: 2px;"/>
-    <line x1="19.75" y1="30.1" x2="60.25" y2="30.1" style="fill: none; stroke: #fff; stroke-miterlimit: 10; stroke-width: 2px;"/>
-    <line x1="19.75" y1="49.9" x2="60.25" y2="49.9" style="fill: none; stroke: #fff; stroke-miterlimit: 10; stroke-width: 2px;"/>
-</g>`,
-  80
-);
--- a/packages/mermaid/src/rendering-util/svg/default/server.ts
+++ b/packages/mermaid/src/rendering-util/svg/default/server.ts
@@ -1,42 +0,0 @@
-/**
- * Designer: Nicolas Newman
- * @see https://github.com/NicolasNewman/IconLibrary
- */
-import { createIcon } from '../../svgRegister.js';
-
-export default createIcon(
-  `<g>
-    <rect width="80" height="80" style="fill: #087ebf; stroke-width: 0px;"/>
-    <rect x="17.5" y="17.5" width="45" height="45" rx="2" ry="2" style="fill: none; stroke: #fff; stroke-miterlimit: 10; stroke-width: 2px;"/>
-    <line x1="17.5" y1="32.5" x2="62.5" y2="32.5" style="fill: none; stroke: #fff; stroke-miterlimit: 10; stroke-width: 2px;"/>
-    <line x1="17.5" y1="47.5" x2="62.5" y2="47.5" style="fill: none; stroke: #fff; stroke-miterlimit: 10; stroke-width: 2px;"/>
-    <g>
-    <path d="m56.25,25c0,.27-.45.5-1,.5h-10.5c-.55,0-1-.23-1-.5s.45-.5,1-.5h10.5c.55,0,1,.23,1,.5Z" style="fill: #fff; stroke-width: 0px;"/>
-    <path d="m56.25,25c0,.27-.45.5-1,.5h-10.5c-.55,0-1-.23-1-.5s.45-.5,1-.5h10.5c.55,0,1,.23,1,.5Z" style="fill: none; stroke: #fff; stroke-miterlimit: 10;"/>
-    </g>
-    <g>
-    <path d="m56.25,40c0,.27-.45.5-1,.5h-10.5c-.55,0-1-.23-1-.5s.45-.5,1-.5h10.5c.55,0,1,.23,1,.5Z" style="fill: #fff; stroke-width: 0px;"/>
-    <path d="m56.25,40c0,.27-.45.5-1,.5h-10.5c-.55,0-1-.23-1-.5s.45-.5,1-.5h10.5c.55,0,1,.23,1,.5Z" style="fill: none; stroke: #fff; stroke-miterlimit: 10;"/>
-    </g>
-    <g>
-    <path d="m56.25,55c0,.27-.45.5-1,.5h-10.5c-.55,0-1-.23-1-.5s.45-.5,1-.5h10.5c.55,0,1,.23,1,.5Z" style="fill: #fff; stroke-width: 0px;"/>
-    <path d="m56.25,55c0,.27-.45.5-1,.5h-10.5c-.55,0-1-.23-1-.5s.45-.5,1-.5h10.5c.55,0,1,.23,1,.5Z" style="fill: none; stroke: #fff; stroke-miterlimit: 10;"/>
-    </g>
-    <g>
-    <circle cx="32.5" cy="25" r=".75" style="fill: #fff; stroke: #fff; stroke-miterlimit: 10;"/>
-    <circle cx="27.5" cy="25" r=".75" style="fill: #fff; stroke: #fff; stroke-miterlimit: 10;"/>
-    <circle cx="22.5" cy="25" r=".75" style="fill: #fff; stroke: #fff; stroke-miterlimit: 10;"/>
-    </g>
-    <g>
-    <circle cx="32.5" cy="40" r=".75" style="fill: #fff; stroke: #fff; stroke-miterlimit: 10;"/>
-    <circle cx="27.5" cy="40" r=".75" style="fill: #fff; stroke: #fff; stroke-miterlimit: 10;"/>
-    <circle cx="22.5" cy="40" r=".75" style="fill: #fff; stroke: #fff; stroke-miterlimit: 10;"/>
-    </g>
-    <g>
-    <circle cx="32.5" cy="55" r=".75" style="fill: #fff; stroke: #fff; stroke-miterlimit: 10;"/>
-    <circle cx="27.5" cy="55" r=".75" style="fill: #fff; stroke: #fff; stroke-miterlimit: 10;"/>
-    <circle cx="22.5" cy="55" r=".75" style="fill: #fff; stroke: #fff; stroke-miterlimit: 10;"/>
-    </g>
-</g>`,
-  80
-);
--- a/packages/mermaid/src/rendering-util/svg/default/unknown.ts
+++ b/packages/mermaid/src/rendering-util/svg/default/unknown.ts
@@ -1,13 +0,0 @@
-/**
- * Designer: Nicolas Newman
- * @see https://github.com/NicolasNewman/IconLibrary
- */
-import { createIcon } from '../../svgRegister.js';
-
-export default createIcon(
-  `<g>
-    <rect width="80" height="80" style="fill: #087ebf; stroke-width: 0px;"/>
-    <text transform="translate(21.16 64.67)" style="fill: #fff; font-family: ArialMT, Arial; font-size: 67.75px;"><tspan x="0" y="0">?</tspan></text>
-</g>`,
-  80
-);
--- a/packages/mermaid/src/rendering-util/svg/digital-ocean/digitalOcean.ts
+++ b/packages/mermaid/src/rendering-util/svg/digital-ocean/digitalOcean.ts
@@ -1,321 +0,0 @@
-import { createIcon } from '../../svgRegister.js';
-// cSpell:disable
-const digitalOceanIcons = {
-  'do:api': createIcon(
-    `<g>
-    <defs>
-        <style>
-            .cls-1,.cls-3{fill:none;}.cls-1{stroke:#000;stroke-miterlimit:10;}.cls-2{fill:#0069ff;}.cls-3{stroke:#fff;stroke-width:1.49px;}.cls-4{font-size:16px;fill:#fff;font-family:ProximaNova-Extrabld,
-            Proxima
-            Nova;}.cls-5{letter-spacing:0em;}.cls-6{letter-spacing:-0.01em;}.cls-7{letter-spacing:0em;}.cls-8{letter-spacing:0em;}.cls-9{letter-spacing:0em;}.cls-10{letter-spacing:0em;}.cls-11{letter-spacing:0em;}.cls-12{letter-spacing:0em;}.cls-13{letter-spacing:0em;}.cls-14{letter-spacing:-0.01em;}.cls-15{letter-spacing:-0.02em;}.cls-16{letter-spacing:0em;}.cls-17{letter-spacing:0em;}.cls-18{letter-spacing:0em;}.cls-19{letter-spacing:0em;}.cls-20{letter-spacing:-0.08em;}.cls-21{letter-spacing:0em;}.cls-22{letter-spacing:0em;}.cls-23{letter-spacing:0em;}.cls-24{letter-spacing:0em;}.cls-25{letter-spacing:0em;}.cls-26{letter-spacing:0em;}.cls-27{letter-spacing:0em;}.cls-28{letter-spacing:-0.01em;}.cls-29{letter-spacing:0em;}</style>
-    </defs>
-    <g>
-        <circle class="cls-2" cx="21" cy="21" r="20.79" />
-        <path class="cls-3"
-            d="M32.8,22.44V19.65l-3.09-1a9.47,9.47,0,0,0-.89-2.1l1.51-2.9-2-2-2.88,1.45h0a9.45,9.45,0,0,0-2-.88h0l-1-3.07H19.59l-1,3.11a9.39,9.39,0,0,0-2.09.89h0l-2.89-1.5-2,2,1.5,2.89h0a8.91,8.91,0,0,0-.88,2L9.2,19.65v2.83l3.1,1h0a9.07,9.07,0,0,0,.82,2h0l-1.46,2.87,2,2,2.9-1.51a9,9,0,0,0,2,.89l1,3.11H22.4l1-3.08h0a8.65,8.65,0,0,0,2-.82h0l2.89,1.51,2-2.06L28.8,25.49a9.48,9.48,0,0,0,.88-2.07Zm-11.8,2A3.45,3.45,0,1,1,24.44,21v0A3.44,3.44,0,0,1,21,24.42Z" />
-    </g>
-</g>`,
-    41.61
-  ),
-  'do:cli': createIcon(
-    `<g>
-    <defs>
-        <style>
-            .cls-1,.cls-3{fill:none;}.cls-1{stroke:#000;stroke-miterlimit:10;}.cls-2{fill:#0069ff;}.cls-3{stroke:#fff;stroke-width:1.49px;}</style>
-    </defs>
-    <g>
-        <circle class="cls-2" cx="21" cy="21" r="20.79" />
-        <rect class="cls-3" x="9.89" y="14.16" width="22.22" height="13.68" />
-        <polyline class="cls-3" points="14.34 24.5 17.84 21 14.34 17.5" />
-        <line class="cls-3" x1="20.13" y1="23.89" x2="27.53" y2="23.89" />
-    </g>
-</g>`,
-    41.61
-  ),
-  'do:dns': createIcon(
-    `<g>
-    <defs>
-        <style>
-            .cls-1,.cls-3{fill:none;}.cls-1{stroke:#000;stroke-miterlimit:10;}.cls-2{fill:#0069ff;}.cls-3{stroke:#fff;stroke-width:1.49px;}</style>
-    </defs>
-    <g>
-        <circle class="cls-2" cx="21" cy="21" r="20.79" />
-        <circle class="cls-3" cx="21" cy="21" r="11.87" />
-        <line class="cls-3" x1="21" y1="9.13" x2="21" y2="32.87" />
-        <line class="cls-3" x1="9.81" y1="17.04" x2="32.19" y2="17.04" />
-        <line class="cls-3" x1="9.81" y1="24.96" x2="32.19" y2="24.96" />
-        <path class="cls-3" d="M21,32.87c-3.27,0-5.93-8.6-5.93-11.87S17.73,9.13,21,9.13" />
-        <path class="cls-3" d="M21.09,9.13C24.36,9.13,27,17.73,27,21s-2.66,11.87-5.93,11.87" />
-    </g>
-</g>`,
-    41.61
-  ),
-  'do:droplet': createIcon(
-    `<g>
-    <defs>
-        <style>
-            .cls-1,.cls-3{fill:none;}.cls-1{stroke:#000;stroke-miterlimit:10;}.cls-2{fill:#0069ff;}.cls-3{stroke:#fff;stroke-width:1.49px;}</style>
-    </defs>
-    <g>
-        <circle class="cls-2" cx="21" cy="21" r="20.79" />
-        <path class="cls-3"
-            d="M21,33.06A10.2,10.2,0,0,1,10.83,23C10.83,14.61,21,8.94,21,8.94s10.17,5.87,10.17,14.15A10.14,10.14,0,0,1,21,33.06Z" />
-        <path class="cls-3"
-            d="M21,26.28a3.37,3.37,0,0,1-3.39-3.39c0-2.61,3.39-5.09,3.39-5.09s3.39,2.42,3.39,5.09A3.37,3.37,0,0,1,21,26.28Z" />
-    </g>
-</g>`,
-    41.61
-  ),
-  'do:kubernetes': createIcon(
-    `<g>
-    <defs>
-        <style>
-            .cls-1,.cls-3{fill:none;}.cls-1{stroke:#000;stroke-miterlimit:10;}.cls-2{fill:#0069ff;}.cls-3{stroke:#fff;stroke-width:1.49px;}</style>
-    </defs>
-    <g>
-        <circle class="cls-2" cx="21" cy="21" r="20.79" />
-        <path class="cls-3"
-            d="M31.15,21.18A10.19,10.19,0,1,1,21,11,10.19,10.19,0,0,1,31.15,21.18Zm-6.51,0A3.64,3.64,0,1,1,21,17.56,3.64,3.64,0,0,1,24.64,21.2ZM21,17.47v0ZM10.1,12.33,18,18.79Zm21.79,0L24,18.79ZM34.72,24.2,24.75,22Zm-27.44,0,10-2.18Zm19.93,9.62-4.53-9.43Zm-12.41,0,4.45-9.43Z" />
-    </g>
-</g>`,
-    41.61
-  ),
-  'do:local-ssd': createIcon(
-    `<g>
-    <defs>
-        <style>
-            .cls-1,.cls-3{fill:none;}.cls-1{stroke:#000;stroke-miterlimit:10;}.cls-2{fill:#0069ff;}.cls-3{stroke:#fff;stroke-width:1.49px;}</style>
-    </defs>
-    <g>
-        <circle class="cls-2" cx="21" cy="21" r="20.79" />
-        <path class="cls-3"
-            d="M21,33.06A10.2,10.2,0,0,1,10.83,23C10.83,14.61,21,8.94,21,8.94s10.17,5.87,10.17,14.15A10.14,10.14,0,0,1,21,33.06Z" />
-        <path class="cls-3"
-            d="M21,26.28a3.37,3.37,0,0,1-3.39-3.39c0-2.61,3.39-5.09,3.39-5.09s3.39,2.42,3.39,5.09A3.37,3.37,0,0,1,21,26.28Z" />
-    </g>
-</g>`,
-    41.61
-  ),
-  'do:mysql': createIcon(
-    `<g>
-    <defs>
-        <style>
-            .cls-1,.cls-4{fill:none;}.cls-1{stroke:#000;stroke-miterlimit:10;}.cls-2{fill:#0069ff;}.cls-3,.cls-5{fill:#fff;}.cls-4{stroke:#fff;stroke-width:1.49px;}.cls-5{font-size:16px;font-family:ProximaNova-Extrabld,
-            Proxima
-            Nova;}.cls-6{letter-spacing:0em;}.cls-7{letter-spacing:-0.01em;}.cls-8{letter-spacing:0em;}.cls-9{letter-spacing:0em;}.cls-10{letter-spacing:0em;}.cls-11{letter-spacing:0em;}.cls-12{letter-spacing:0em;}.cls-13{letter-spacing:0em;}.cls-14{letter-spacing:0em;}.cls-15{letter-spacing:-0.01em;}.cls-16{letter-spacing:-0.02em;}.cls-17{letter-spacing:0em;}.cls-18{letter-spacing:0em;}.cls-19{letter-spacing:0em;}.cls-20{letter-spacing:0em;}.cls-21{letter-spacing:-0.08em;}.cls-22{letter-spacing:0em;}.cls-23{letter-spacing:0em;}.cls-24{letter-spacing:0em;}.cls-25{letter-spacing:0em;}.cls-26{letter-spacing:0em;}.cls-27{letter-spacing:0em;}.cls-28{letter-spacing:0em;}.cls-29{letter-spacing:-0.01em;}.cls-30{letter-spacing:0em;}</style>
-    </defs>
-    <g>
-        <circle class="cls-2" cx="21" cy="21" r="20.79" />
-        <path class="cls-3"
-            d="M22.15,29V21.86a.63.63,0,0,1,.59-.58.86.86,0,0,1,.84.33c.2.36.43.72.64,1.08.37.62.84,1.36,1.21,2,.37-.6.85-1.34,1.21-2,.2-.36.43-.72.64-1.08a.86.86,0,0,1,.84-.33.65.65,0,0,1,.61.58V29a.69.69,0,0,1-.77.59A.68.68,0,0,1,27.2,29v-4.5c-.28.44-.55.88-.75,1.22l-.35.56a.81.81,0,0,1-.69.35.76.76,0,0,1-.7-.35l-.35-.56c-.2-.34-.48-.78-.73-1.22V29a.71.71,0,0,1-.77.59A.69.69,0,0,1,22.15,29Z" />
-        <path class="cls-4" d="M9.65,20.87v4.34c0,1.43,4,2.59,8.89,2.59" />
-        <path class="cls-4" d="M27.41,19V16.57" />
-        <path class="cls-4" d="M9.65,16.57v4.34c0,1.43,4,2.58,8.89,2.58H19" />
-        <path class="cls-4"
-            d="M27.41,12.24c0-1.42-4-2.58-8.87-2.58s-8.89,1.16-8.89,2.58v4.33c0,1.43,4,2.59,8.89,2.59s8.87-1.16,8.87-2.59Z" />
-        <ellipse class="cls-4" cx="18.54" cy="12.24" rx="8.88" ry="2.58" />
-        <path class="cls-4"
-            d="M27.41,12.24c0-1.42-4-2.58-8.87-2.58s-8.89,1.16-8.89,2.58v4.33c0,1.43,4,2.59,8.89,2.59s8.87-1.16,8.87-2.59Z" />
-        <path class="cls-4"
-            d="M13.89,14.44c-2.54-.46-4.23-1.27-4.23-2.2,0-1.43,4-2.58,8.88-2.58s8.87,1.15,8.87,2.58-4,2.58-8.87,2.58a27,27,0,0,1-4.65-.38" />
-        <circle class="cls-4" cx="25.44" cy="25.43" r="6.91" />
-    </g>
-</g>`,
-    41.61
-  ),
-  'do:redis-copy': createIcon(
-    `<g>
-    <defs>
-        <style>
-            .cls-1,.cls-3{fill:none;}.cls-1{stroke:#000;stroke-miterlimit:10;}.cls-2{fill:#0069ff;}.cls-3{stroke:#fff;stroke-width:1.49px;}.cls-4{fill:#fff;}</style>
-    </defs>
-    <g>
-        <circle class="cls-2" cx="21" cy="21" r="20.79" />
-        <path class="cls-3" d="M11.59,23.14v4.34c0,1.43,4,2.59,8.89,2.59" />
-        <path class="cls-3" d="M29.35,23.14V18.85" />
-        <path class="cls-3" d="M11.59,23.14V18.85" />
-        <path class="cls-3"
-            d="M29.35,14.51c0-1.42-4-2.58-8.87-2.58s-8.89,1.16-8.89,2.58v4.34c0,1.43,4,2.59,8.89,2.59s8.87-1.16,8.87-2.59Z" />
-        <ellipse class="cls-3" cx="20.48" cy="14.51" rx="8.88" ry="2.58" />
-        <path class="cls-3"
-            d="M29.35,14.51c0-1.42-4-2.58-8.87-2.58s-8.89,1.16-8.89,2.58v4.34c0,1.43,4,2.59,8.89,2.59s8.87-1.16,8.87-2.59Z" />
-        <path class="cls-3"
-            d="M15.83,16.71c-2.54-.45-4.23-1.27-4.23-2.2,0-1.43,4-2.58,8.88-2.58s8.87,1.15,8.87,2.58-4,2.58-8.87,2.58a27,27,0,0,1-4.65-.38" />
-        <path class="cls-3" d="M11.59,23.14v4.34c0,1.43,4,2.59,8.89,2.59s8.87-1.16,8.87-2.59V23.14" />
-        <path class="cls-3" d="M29.35,23.14c0,1.43-4,2.58-8.87,2.58a26,26,0,0,1-4.65-.38" />
-        <path class="cls-3" d="M15.83,25.34c-2.54-.45-4.23-1.27-4.23-2.2" />
-        <path class="cls-3" d="M29.35,27.49c0,1.43-4,2.58-8.87,2.58a27,27,0,0,1-4.65-.38" />
-        <path class="cls-3" d="M15.83,29.69c-2.54-.45-4.23-1.27-4.23-2.2" />
-        <path class="cls-4" d="M30.41,26.2v0Z" />
-    </g>
-</g>`,
-    41.61
-  ),
-  'do:redis': createIcon(
-    `<g>
-    <defs>
-        <style>
-            .cls-1,.cls-3{fill:none;}.cls-1{stroke:#000;stroke-miterlimit:10;}.cls-2{fill:#0069ff;}.cls-3{stroke:#fff;stroke-width:1.49px;}.cls-4{fill:#fff;}</style>
-    </defs>
-    <g>
-        <circle class="cls-2" cx="21" cy="21" r="20.79" />
-        <path class="cls-3" d="M9.65,20.87v4.34c0,1.43,4,2.59,8.89,2.59" />
-        <path class="cls-3" d="M27.41,19V16.57" />
-        <path class="cls-3" d="M9.65,16.57v4.34c0,1.43,4,2.58,8.89,2.58H19" />
-        <path class="cls-3"
-            d="M27.41,12.24c0-1.42-4-2.58-8.87-2.58s-8.89,1.16-8.89,2.58v4.33c0,1.43,4,2.59,8.89,2.59s8.87-1.16,8.87-2.59Z" />
-        <ellipse class="cls-3" cx="18.54" cy="12.24" rx="8.88" ry="2.58" />
-        <path class="cls-3"
-            d="M27.41,12.24c0-1.42-4-2.58-8.87-2.58s-8.89,1.16-8.89,2.58v4.33c0,1.43,4,2.59,8.89,2.59s8.87-1.16,8.87-2.59Z" />
-        <path class="cls-3"
-            d="M13.89,14.44c-2.54-.46-4.23-1.27-4.23-2.2,0-1.43,4-2.58,8.88-2.58s8.87,1.15,8.87,2.58-4,2.58-8.87,2.58a27,27,0,0,1-4.65-.38" />
-        <circle class="cls-3" cx="25.44" cy="25.43" r="6.91" />
-        <path class="cls-4" d="M28.47,23.93v0Z" />
-        <path class="cls-4"
-            d="M28.47,24a2.68,2.68,0,0,0-2.68-2.65H23.88a.75.75,0,0,0-.57.21.77.77,0,0,0-.23.57v6.73a.77.77,0,0,0,1.53,0V26.62h.53l1.5,2.58a.76.76,0,0,0,.66.37.75.75,0,0,0,.38-.1.76.76,0,0,0,.27-1l-1.17-2a2.78,2.78,0,0,0,.9-.58A2.72,2.72,0,0,0,28.47,24Zm-3.86-1.12h1.14a1.18,1.18,0,0,1,.82.33,1.11,1.11,0,0,1,0,1.58,1.14,1.14,0,0,1-.82.33H24.61Z" />
-    </g>
-</g>`,
-    41.61
-  ),
-  'do:monitoring': createIcon(
-    `<g>
-    <defs>
-        <style>
-            .cls-1,.cls-3{fill:none;}.cls-1{stroke:#000;stroke-miterlimit:10;}.cls-2{fill:#0069ff;}.cls-3{stroke:#fff;stroke-width:1.49px;}</style>
-    </defs>
-    <g>
-        <circle class="cls-2" cx="21" cy="21" r="20.79" />
-        <path class="cls-3" d="M29.6,14.92v12.7a1.5,1.5,0,0,1-1.51,1.51H14.79" />
-        <path class="cls-3" d="M12.4,26.74V14.38a1.51,1.51,0,0,1,1.51-1.51H27.47" />
-        <line class="cls-3" x1="29.57" y1="21" x2="12.36" y2="21" />
-        <path class="cls-3"
-            d="M13.5,27l5-9.82a.33.33,0,0,1,.45-.14.32.32,0,0,1,.14.14l3.74,7.61a.33.33,0,0,0,.45.13.29.29,0,0,0,.14-.13l5.09-9.88" />
-        <circle class="cls-3" cx="12.4" cy="29.13" r="2.39" />
-        <circle class="cls-3" cx="29.6" cy="12.87" r="2.39" />
-    </g>
-</g>`,
-    41.61
-  ),
-  'do:projects': createIcon(
-    `<g>
-    <defs>
-        <style>
-            .cls-1{fill:none;stroke:#000;stroke-miterlimit:10;}.cls-2{fill:#0069ff;}.cls-3{fill:#fff;}</style>
-    </defs>
-    <g>
-        <circle class="cls-2" cx="21" cy="21" r="20.79" />
-        <path class="cls-3"
-            d="M28.45,12.75H25.76A2.79,2.79,0,0,0,23,10.41h0a2.26,2.26,0,0,0,.27-1h0a2.27,2.27,0,0,0-4.53,0,2.39,2.39,0,0,0,.27,1h0a2.79,2.79,0,0,0-2.75,2.34h-2.7A1.68,1.68,0,0,0,12,14.52V31a1.68,1.68,0,0,0,1.6,1.74H28.45A1.68,1.68,0,0,0,30,31V14.5A1.68,1.68,0,0,0,28.45,12.75ZM20,9.37a1,1,0,0,1,2.09,0h0a1,1,0,0,1-1,1H21A1,1,0,0,1,20,9.37Zm-1,2.26h4a1.57,1.57,0,0,1,1.51,1.12h-7A1.57,1.57,0,0,1,19,11.63ZM28.82,31c0,.29-.17.53-.37.53H13.56c-.2,0-.38-.24-.38-.53V14.5c0-.28.18-.53.38-.53H28.45c.2,0,.37.25.37.53Z" />
-        <rect class="cls-3" x="19.02" y="18.88" width="6.77" height="1.22" />
-        <rect class="cls-3" x="19.02" y="22.18" width="6.77" height="1.22" />
-        <rect class="cls-3" x="19.02" y="25.49" width="6.77" height="1.22" />
-        <rect class="cls-3" x="16.21" y="18.88" width="1.18" height="1.22" />
-        <rect class="cls-3" x="16.21" y="22.18" width="1.18" height="1.22" />
-        <rect class="cls-3" x="16.21" y="25.49" width="1.18" height="1.22" />
-    </g>
-</g>`,
-    41.61
-  ),
-  'do:spaces-cdn': createIcon(
-    `<g>
-    <defs>
-        <style>
-            .cls-1{fill:none;stroke:#000;stroke-miterlimit:10;}.cls-2{fill:#0069ff;}.cls-3{fill:#fff;}</style>
-    </defs>
-    <g>
-        <circle class="cls-2" cx="21" cy="21" r="20.79" />
-        <path class="cls-3"
-            d="M12.7,13.49a1.22,1.22,0,0,0,.66-.2,1,1,0,0,0,.33-.68,1.22,1.22,0,0,0-.19-.69.88.88,0,0,0-.69-.33h0a1,1,0,0,0-1,.86,1.16,1.16,0,0,0,.21.68A.91.91,0,0,0,12.7,13.49Zm-2.6,3.89a1,1,0,0,0,1-.87,1.26,1.26,0,0,0-.2-.68.85.85,0,0,0-.69-.34h-.06a1,1,0,0,0-.95.87,1.12,1.12,0,0,0,.21.68,1.09,1.09,0,0,0,.67.34ZM10.17,21a1.26,1.26,0,0,0-.2-.68A.9.9,0,0,0,9.28,20H9.22a1,1,0,0,0-.62.21.87.87,0,0,0-.33.69,1.08,1.08,0,0,0,.2.67.84.84,0,0,0,.68.35.87.87,0,0,0,1-.7.61.61,0,0,0,0-.19Zm0,3.61a1.07,1.07,0,0,0-.69.21.88.88,0,0,0-.34.69,1.16,1.16,0,0,0,.21.67.87.87,0,0,0,.68.35,1.15,1.15,0,0,0,.72-.21.84.84,0,0,0,.34-.68.87.87,0,0,0-.69-1Zm2.67,3.9a1,1,0,0,0-1,.86,1.2,1.2,0,0,0,.21.69.89.89,0,0,0,.68.34,1.21,1.21,0,0,0,.66-.19.85.85,0,0,0,.33-.68,1.22,1.22,0,0,0-.19-.69A1.13,1.13,0,0,0,12.84,28.51ZM16.72,31a1,1,0,0,0-.68.18.86.86,0,0,0-.34.68,1.12,1.12,0,0,0,.21.68.83.83,0,0,0,.68.34,1.11,1.11,0,0,0,.68-.2.86.86,0,0,0,.34-.68,1.12,1.12,0,0,0-.2-.69A1,1,0,0,0,16.72,31Z" />
-        <circle class="cls-3" cx="25.39" cy="26.73" r="0.95" />
-        <circle class="cls-3" cx="27.92" cy="23.18" r="0.95" />
-        <circle class="cls-3" cx="27.99" cy="18.88" r="0.95" />
-        <circle class="cls-3" cx="25.32" cy="15.2" r="0.95" />
-        <path class="cls-3"
-            d="M16.66,10.9a1,1,0,0,0,1-.87.94.94,0,0,0-.86-1h-.1a.92.92,0,0,0-.61.2.88.88,0,0,0-.34.69,1.08,1.08,0,0,0,.19.65A.84.84,0,0,0,16.66,10.9ZM21,28.84V27.2a6.27,6.27,0,0,1,0-12.54V13a7.92,7.92,0,0,0,0,15.83Zm.42-20.53V10a11.05,11.05,0,0,1,0,22.1v1.64a12.69,12.69,0,0,0,0-25.38Z" />
-    </g>
-</g>`,
-    41.61
-  ),
-  'do:spaces-object-storage': createIcon(
-    `<g>
-    <defs>
-        <style>
-            .cls-1{fill:none;stroke:#000;stroke-miterlimit:10;}.cls-2{font-size:16px;font-family:ProximaNova-Extrabld,
-            Proxima
-            Nova;}.cls-2,.cls-20{fill:#fff;}.cls-3{letter-spacing:0em;}.cls-4{letter-spacing:0em;}.cls-5{letter-spacing:0em;}.cls-6{letter-spacing:0em;}.cls-7{letter-spacing:0em;}.cls-8{letter-spacing:-0.01em;}.cls-9{letter-spacing:0em;}.cls-10{letter-spacing:-0.01em;}.cls-11{letter-spacing:0em;}.cls-12{letter-spacing:0em;}.cls-13{letter-spacing:0.02em;}.cls-14{letter-spacing:-0.01em;}.cls-15{letter-spacing:-0.01em;}.cls-16{letter-spacing:0em;}.cls-17{letter-spacing:0em;}.cls-18{letter-spacing:0em;}.cls-19{fill:#0069ff;}</style>
-    </defs>
-    <g>
-        <circle class="cls-19" cx="21" cy="21" r="20.79" />
-        <path class="cls-20"
-            d="M12.7,13.49a1.22,1.22,0,0,0,.66-.2,1,1,0,0,0,.33-.68,1.22,1.22,0,0,0-.19-.69.88.88,0,0,0-.69-.33h0a1,1,0,0,0-1,.86,1.16,1.16,0,0,0,.21.68A.91.91,0,0,0,12.7,13.49Zm-2.6,3.89a1,1,0,0,0,1-.87,1.26,1.26,0,0,0-.2-.68.85.85,0,0,0-.69-.34h-.06a1,1,0,0,0-.95.87,1.12,1.12,0,0,0,.21.68,1.09,1.09,0,0,0,.67.34ZM10.17,21a1.26,1.26,0,0,0-.2-.68A.9.9,0,0,0,9.28,20H9.22a1,1,0,0,0-.62.21.87.87,0,0,0-.33.69,1.08,1.08,0,0,0,.2.67.84.84,0,0,0,.68.35.87.87,0,0,0,1-.7.61.61,0,0,0,0-.19Zm0,3.61a1.07,1.07,0,0,0-.69.21.88.88,0,0,0-.34.69,1.16,1.16,0,0,0,.21.67.87.87,0,0,0,.68.35,1.15,1.15,0,0,0,.72-.21.84.84,0,0,0,.34-.68.87.87,0,0,0-.69-1Zm2.67,3.9a1,1,0,0,0-1,.86,1.2,1.2,0,0,0,.21.69.89.89,0,0,0,.68.34,1.21,1.21,0,0,0,.66-.19.85.85,0,0,0,.33-.68,1.22,1.22,0,0,0-.19-.69A1.13,1.13,0,0,0,12.84,28.51ZM16.72,31a1,1,0,0,0-.68.18.86.86,0,0,0-.34.68,1.12,1.12,0,0,0,.21.68.83.83,0,0,0,.68.34,1.11,1.11,0,0,0,.68-.2.86.86,0,0,0,.34-.68,1.12,1.12,0,0,0-.2-.69A1,1,0,0,0,16.72,31Z" />
-        <circle class="cls-20" cx="25.39" cy="26.73" r="0.95" />
-        <circle class="cls-20" cx="27.92" cy="23.18" r="0.95" />
-        <circle class="cls-20" cx="27.99" cy="18.88" r="0.95" />
-        <circle class="cls-20" cx="25.32" cy="15.2" r="0.95" />
-        <path class="cls-20"
-            d="M16.66,10.9a1,1,0,0,0,1-.87.94.94,0,0,0-.86-1h-.1a.92.92,0,0,0-.61.2.88.88,0,0,0-.34.69,1.08,1.08,0,0,0,.19.65A.84.84,0,0,0,16.66,10.9ZM21,28.84V27.2a6.27,6.27,0,0,1,0-12.54V13a7.92,7.92,0,0,0,0,15.83Zm.42-20.53V10a11.05,11.05,0,0,1,0,22.1v1.64a12.69,12.69,0,0,0,0-25.38Z" />
-    </g>
-</g>`,
-    41.61
-  ),
-  'do:teams': createIcon(
-    `<g>
-    <defs>
-        <style>
-            .cls-1,.cls-3{fill:none;}.cls-1{stroke:#000;stroke-miterlimit:10;}.cls-2{fill:#0069ff;}.cls-3{stroke:#fff;stroke-width:1.49px;}</style>
-    </defs>
-    <g>
-        <circle class="cls-2" cx="21" cy="21" r="20.79" />
-        <path class="cls-3" d="M33.83,23.9a5.13,5.13,0,0,0-4.94-5.29h-.41a5.1,5.1,0,0,0-5.3,4.9v.39" />
-        <circle class="cls-3" cx="28.48" cy="15.86" r="2.7" />
-        <path class="cls-3"
-            d="M18.82,23.9a5.11,5.11,0,0,0-4.92-5.29h-.42a5.1,5.1,0,0,0-5.3,4.91,2.41,2.41,0,0,0,0,.38" />
-        <circle class="cls-3" cx="13.48" cy="15.86" r="2.7" />
-        <path class="cls-3"
-            d="M26.33,28.79a5.1,5.1,0,0,0-4.92-5.29,2.94,2.94,0,0,0-.42,0,5.12,5.12,0,0,0-5.3,4.94,2.67,2.67,0,0,0,0,.4" />
-        <circle class="cls-3" cx="20.99" cy="20.8" r="2.7" />
-    </g>
-</g>`,
-    41.61
-  ),
-  'do:terraform-provider': createIcon(
-    `<g>
-    <defs>
-        <style>
-            .cls-1,.cls-3{fill:none;stroke-miterlimit:10;}.cls-1{stroke:#000;}.cls-2{fill:#0069ff;}.cls-3{stroke:#fff;stroke-width:1.49px;}</style>
-    </defs>
-    <g>
-        <circle class="cls-2" cx="21" cy="21" r="20.79" />
-        <path class="cls-3" d="M10.89,17.53l4.61,2.64V14.93l-4.61-2.64Z" />
-        <path class="cls-3" d="M18.63,21.94l4.62,2.65V19.34L18.63,16.7Z" />
-        <path class="cls-3" d="M26.5,19.34v5.25l4.61-2.65V16.7Z" />
-        <path class="cls-3" d="M18.63,31l4.62,2.64V28.43l-4.6-2.62Z" />
-    </g>
-</g>`,
-    41.61
-  ),
-  'do:volumes-block-storage': createIcon(
-    `<g>
-    <defs>
-        <style>.cls-1,.cls-3,.cls-4,.cls-5,.cls-6,.cls-7{fill:none;}.cls-1{stroke:#000;stroke-miterlimit:10;}.cls-2{fill:#0069ff;}.cls-3,.cls-4,.cls-5,.cls-6,.cls-7{stroke:#fff;stroke-width:1.49px;}.cls-3,.cls-4,.cls-5,.cls-6{stroke-linecap:round;}.cls-4{stroke-dasharray:0
-            3.11;}.cls-5{stroke-dasharray:0 2.94;}.cls-6{stroke-dasharray:0 2.95;}</style>
-    </defs>
-    <g>
-        <circle class="cls-2" cx="21" cy="21" r="20.79" />
-        <line class="cls-3" x1="20.98" y1="21.2" x2="20.98" y2="21.2" />
-        <line class="cls-4" x1="20.98" y1="18.09" x2="20.98" y2="10.32" />
-        <line class="cls-3" x1="20.98" y1="8.76" x2="20.98" y2="8.76" />
-        <line class="cls-3" x1="10.92" y1="27.22" x2="10.92" y2="27.22" />
-        <line class="cls-5" x1="13.42" y1="25.66" x2="19.68" y2="21.78" />
-        <line class="cls-3" x1="20.93" y1="21" x2="20.93" y2="21" />
-        <line class="cls-6" x1="23.44" y1="22.54" x2="29.72" y2="26.4" />
-        <line class="cls-3" x1="30.98" y1="27.17" x2="30.98" y2="27.17" />
-        <path class="cls-7"
-            d="M21,21V33.44M21,21.2,11,15m20.11,0L21,21.2m-10.1-6.42V27.17l10,6.22L31,27.17V14.73l-10-6.17Z" />
-    </g>
-</g>`,
-    41.61
-  ),
-};
-
-export default digitalOceanIcons;
--- a/packages/mermaid/src/rendering-util/svg/github/github.ts
+++ b/packages/mermaid/src/rendering-util/svg/github/github.ts
@@ -1,26 +0,0 @@
-import { createIcon } from '../../svgRegister.js';
-
-const githubIcons = {
-  'gh:action': createIcon(
-    `<g>  
-  <path d="M46.62.3c23.51,2.97,39.85,24.77,36.41,48.15-3.04,18.63-19.42,34.09-38.47,34.89-2.09-.07-2.23,1.19-1.34,3.21,3.19,9.13,13.37,14.89,22.82,13.27.55-.09,1.02-.48,1.21-1,.05-.14.1-.3.13-.46.58-2.8,1.67-5.54,3.04-8.07,13.28-23.34,47.81-18.65,53.98,7.57.23,1.5,1.13,2.27,2.52,2.22,4.21.01,8.46,0,12.72,0,2.24.2,2.74-1.22,3.06-3.18.01-.07.03-.14.04-.2,3.26-11.55,14-20.72,26.11-21.53,15.8-1.4,30.54,11.69,31.32,27.5,1.12,23.22-23.72,38.33-43.92,26.85-6.53-3.98-12-11.09-13.56-18.62-.17-.77-.35-1.65-1.02-2.1-.14-.09-.31-.15-.47-.19-2.48-.57-5.2-.08-7.73-.23-2.53.16-5.21-.34-7.66.23-.16.04-.33.09-.47.19-.58.4-.78,1.14-.91,1.82-.3,2.05-1.09,4.03-1.95,5.94-12.63,25.63-49.17,20.91-55.28-6.89-.04-.2-.11-.4-.24-.55-.43-.54-1.08-.72-1.84-.76-7.29.43-14.77-1.31-20.49-6.1,0,0-.01,0-.02-.01-1.06-.63-2.41,0-2.47,1.23-.61,12.63-.33,23.57-.18,36.22s10.41,26.21,22.99,27.03c1.25.15,2.22-.37,2.48-1.7,8.11-33.08,54.11-29.65,57.79,4.14,1.2,17.3-14.66,32.64-31.85,30.93-12.42-1.1-23.31-10.88-25.89-23.1-.21-1.05-.98-1.78-2.06-1.83-19.33-.73-32.03-16.21-32.03-35.45,0-.04,0-3.67,0-3.71-.06-17.49-.02-33.52-.02-50.98.27-2.06-1.33-2.74-3.05-3.06C10.77,76.56-2.44,56.23.38,36.18,3.55,14.18,24.38-2.44,46.62.3ZM41.85,75.27c44.21-2.12,44.37-64.72-.02-66.93-.08,0-.17,0-.25,0-3.69.33-7.43.81-10.96,1.98C-4.29,23.25,4.48,74.43,41.68,75.27c.05,0,.11,0,.17,0ZM75.05,171.2c-.09,13.85,14.54,24.2,27.55,19.6,17.62-6.27,19.43-30.16,2.64-38.57-13.49-6.81-30.67,3.69-30.19,18.97ZM95.82,125.2c16.03.11,25.96-16.9,18.54-30.94-9.48-16.62-34.24-13.51-38.65,5.26-3.3,12.67,7.01,25.63,20.11,25.68ZM171.09,125.19c14.62.2,24.97-15.63,19.18-28.94-6.98-16.77-30.91-17.13-38.28-.53-6.29,13.76,3.91,29.61,19.1,29.47Z" style="fill: #228afe; stroke-width: 0px;"/>
-  <path d="M167.78,199.97c-12.35-1.36-23-11.04-25.4-23.25-.2-1.05-.9-1.59-1.92-1.59-1.75-.08-3.65.24-5.12-.7-1.86-1.06-2.38-3.51-1.36-5.35,1.26-2.51,4.42-1.98,6.72-2.25,1.71-.19,1.68-2.06,2.04-3.37.67-2.29,1.52-4.67,2.84-6.84,10.46-18.3,36.75-19.95,48.97-2.66,15.1,20.27-1.86,48.47-26.61,46.02l-.16-.03ZM170.33,150.06c-17.86.92-26.76,21.77-14.72,35.12,9.48,9.89,25.18,8.64,32.89-2.69,9.06-14.11-1.07-32.64-17.99-32.43h-.18Z" style="fill: #79b9fe; stroke-width: 0px;"/>
-  <path d="M33.52,20.07c1.33.07,2.9.44,4.08,1.22,5.34,3.05,10.44,6.45,15.62,9.75,2.96,2.15,6.82,3.53,8.76,6.78,1.35,2.66,1.34,6.21-.33,8.69-3.01,3.94-7.92,5.77-11.91,8.56-3.01,1.8-6.09,3.62-8.95,5.47-2,1.19-4.26,2.93-6.62,2.9-3.05.04-6.36-1.31-7.78-4-1.18-2.06-1.35-4.27-1.24-6.57,0-3.35,0-6.7,0-10.05,0-4.56,0-9.12,0-13.67-.4-4.71,3.69-8.75,8.22-9.07h.15ZM54.58,42.18c-6.35-5-13.46-9.01-20.07-13.33-.28-.17-.83-.49-1.02-.22-.48,8.53-.04,17.15-.16,25.79.04.62.33.8.89.52,6.79-4.13,13.78-8.4,20.36-12.66v-.09Z" style="fill: #228afe; stroke-width: 0px;"/>
-  <path d="M108.23,100.28c-4.18,4.75-8.97,9.06-13.33,13.56-2.84,3.36-6.28.73-8.56-1.87-2.21-2.49-6.33-4.87-4.58-8.69.72-2.09,4.24-3.27,6.04-1.56,1.12,1,2.06,2.04,3.1,2.97.21.13.46.27.71.24.44-.04.8-.42,1.13-.73,2.63-2.6,5.29-5.23,7.87-7.91,1.01-1.05,2.4-1.92,3.86-2.01,2.98.03,4.95,3.08,3.84,5.82l-.08.17Z" style="fill: #228afe; stroke-width: 0px;"/>
-  <path d="M165.95,115.32c-3.16-.96-4.95-4-7.45-6.2-.66-.71-1.43-1.39-1.85-2.28-.71-2.11-.09-4.52,2.07-5.54,2.51-1.22,4.14.35,5.81,2.09.76.65,1.59,1.81,2.35,1.5,3.09-2.55,5.82-5.72,8.72-8.56,1.5-1.51,3.64-2.72,5.72-1.63,1.55.67,1.99,1.84,2.36,3.2.29,1.28-.44,2.53-1.3,3.43-4.22,4.25-8.49,8.52-12.73,12.76-.9.97-2.21,1.52-3.53,1.26l-.18-.04Z" style="fill: #228afe; stroke-width: 0px;"/>
-  <circle cx="87.78" cy="170.74" r="5" style="fill: #79b9fe; stroke-width: 0px;"/>
-  <circle cx="104.28" cy="170.74" r="5" style="fill: #79b9fe; stroke-width: 0px;"/>
-</g>`,
-    200
-  ),
-  'gh:github': createIcon(
-    `<g>
-  <path fill-rule="evenodd" clip-rule="evenodd"
-  d="M48.854 0C21.839 0 0 22 0 49.217c0 21.756 13.993 40.172 33.405 46.69 2.427.49 3.316-1.059 3.316-2.362 0-1.141-.08-5.052-.08-9.127-13.59 2.934-16.42-5.867-16.42-5.867-2.184-5.704-5.42-7.17-5.42-7.17-4.448-3.015.324-3.015.324-3.015 4.934.326 7.523 5.052 7.523 5.052 4.367 7.496 11.404 5.378 14.235 4.074.404-3.178 1.699-5.378 3.074-6.6-10.839-1.141-22.243-5.378-22.243-24.283 0-5.378 1.94-9.778 5.014-13.2-.485-1.222-2.184-6.275.486-13.038 0 0 4.125-1.304 13.426 5.052a46.97 46.97 0 0 1 12.214-1.63c4.125 0 8.33.571 12.213 1.63 9.302-6.356 13.427-5.052 13.427-5.052 2.67 6.763.97 11.816.485 13.038 3.155 3.422 5.015 7.822 5.015 13.2 0 18.905-11.404 23.06-22.324 24.283 1.78 1.548 3.316 4.481 3.316 9.126 0 6.6-.08 11.897-.08 13.526 0 1.304.89 2.853 3.316 2.364 19.412-6.52 33.405-24.935 33.405-46.691C97.707 22 75.788 0 48.854 0z"
-  fill="#24292f" />
-</g>`,
-    98
-  ),
-};
-
-export default githubIcons;
--- a/packages/mermaid/src/rendering-util/svg/index.ts
+++ b/packages/mermaid/src/rendering-util/svg/index.ts
@@ -1,32 +0,0 @@
-import type { IconLibrary } from '../svgRegister.js';
-import database from './default/database.js';
-import server from './default/server.js';
-import disk from './default/disk.js';
-import internet from './default/internet.js';
-import cloud from './default/cloud.js';
-import unknown from './default/unknown.js';
-import blank from './default/blank.js';
-
-/** Creates a resolver to the path to lazy-load included icon packs */
-const getIconNamespaces = (basePath: string) => ({
-  'aws:common': `${basePath}/aws/awsCommon.js`,
-  'aws:full': `${basePath}/aws/awsFull.js`,
-  github: `${basePath}/github/github.js`,
-  'digital-ocean': `${basePath}/digital-ocean/digitalOcean.js`,
-});
-
-type IconNamespaceKeys = keyof ReturnType<typeof getIconNamespaces>;
-
-const defaultIconLibrary: IconLibrary = {
-  database: database,
-  server: server,
-  disk: disk,
-  internet: internet,
-  cloud: cloud,
-  unknown: unknown,
-  blank: blank,
-};
-
-export default defaultIconLibrary;
-export { getIconNamespaces };
-export type { IconNamespaceKeys };
--- a/packages/mermaid/src/rendering-util/svgRegister.ts
+++ b/packages/mermaid/src/rendering-util/svgRegister.ts
@@ -1,60 +0,0 @@
-import type { Selection } from 'd3-selection';
-
-type IconResolver = (
-  parent: Selection<SVGGElement, unknown, Element | null, unknown>,
-  width?: number
-) => Selection<SVGGElement, unknown, Element | null, unknown>;
-type IconLibrary = Record<string, IconResolver>;
-
-/**
- * Converts an SVG Icon passed as a string into a properly formatted IconResolver
- * @param icon - html code for the svg icon as a string (the SVG tag should not be included)
- * @param originalSize - the original size of the SVG Icon in pixels
- * @returns IconResolver
- */
-const createIcon: (icon: string, originalSize: number) => IconResolver = (icon, originalSize) => {
-  return (
-    parent: Selection<SVGGElement, unknown, Element | null, unknown>,
-    size: number = originalSize
-  ) => {
-    parent.html(`<g style="transform: scale(${size / originalSize})">${icon}</g>`);
-    return parent;
-  };
-};
-
-const icons: IconLibrary = {};
-
-const isIconNameInUse = (name: string): boolean => {
-  return icons[name] !== undefined;
-};
-
-const registerIcon = (name: string, resolver: IconResolver) => {
-  if (!isIconNameInUse(name)) {
-    icons[name] = resolver;
-  }
-};
-
-const registerIcons = (library: IconLibrary) => {
-  Object.entries(library).forEach(([name, resolver]) => {
-    if (!isIconNameInUse(name)) {
-      icons[name] = resolver;
-    }
-  });
-};
-
-const getIcon = (name: string): IconResolver | null => {
-  if (isIconNameInUse(name)) {
-    return icons[name];
-  }
-  return icons.unknown;
-};
-
-export {
-  registerIcon,
-  registerIcons,
-  getIcon,
-  isIconNameInUse,
-  createIcon,
-  IconLibrary,
-  IconResolver,
-};
--- a/packages/mermaid/src/schemas/config.schema.yaml
+++ b/packages/mermaid/src/schemas/config.schema.yaml
@@ -227,11 +227,6 @@ properties:
      fall back to legacy rendering for KaTeX.
    type: boolean
    default: false
-  iconLibraries:
-    description: |
-      This option specifies an object contianing a mappig of SVG icon names to a resolver that returns the svg code.
-      For supported diagrams (i.e., Architecture), their syntax allows refering to key names in this object to display the corresponding SVG icon in the rendered diagram.
-    tsType: Array<import('./rendering-util/svgRegister.js').IconLibrary | import('./rendering-util/svg/index.js').IconNamespaceKeys>
  forceLegacyMathML:
    description: |
      This option forces Mermaid to rely on KaTeX's own stylesheet for rendering MathML. Due to differences between OS
--- a/packages/parser/CHANGELOG.md
+++ b/packages/parser/CHANGELOG.md
@@ -1,5 +1,17 @@
 # @mermaid-js/parser

+## 0.3.0
+
+### Minor Changes
+
+- [#5452](https://github.com/mermaid-js/mermaid/pull/5452) [`256a148`](https://github.com/mermaid-js/mermaid/commit/256a148bbf484fc7db6c19f94dd69d5d268ee048) Thanks [@NicolasNewman](https://github.com/NicolasNewman)! - New Diagram: Architecture
+
+  Adds architecture diagrams which allows users to show relations between services.
+
+### Patch Changes
+
+- [#5793](https://github.com/mermaid-js/mermaid/pull/5793) [`7d8143b`](https://github.com/mermaid-js/mermaid/commit/7d8143b917ee3562149a0e0a821ed2d6f29cc05d) Thanks [@sidharthv96](https://github.com/sidharthv96)! - feat: Support - in architecture icons
+
 ## 0.2.0

 ### Minor Changes
--- a/packages/parser/package.json
+++ b/packages/parser/package.json
@@ -1,6 +1,6 @@
 {
  "name": "@mermaid-js/parser",
-  "version": "0.2.0",
+  "version": "0.3.0",
  "description": "MermaidJS parser",
  "author": "Yokozuna59",
  "contributors": [
--- a/packages/parser/src/language/architecture/architecture.langium
+++ b/packages/parser/src/language/architecture/architecture.langium
@@ -49,7 +49,7 @@ Edge:
 terminal ARROW_DIRECTION: 'L' | 'R' | 'T' | 'B';
 terminal ARCH_ID: /[\w]+/;
 terminal ARCH_TEXT_ICON: /\("[^"]+"\)/;
-terminal ARCH_ICON: /\([\w:]+\)/;
+terminal ARCH_ICON: /\([\w-:]+\)/;
 terminal ARCH_TITLE: /\[[\w ]+\]/;
 terminal ARROW_GROUP: /\{group\}/;
 terminal ARROW_INTO: /<|>/;
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -13,7 +13,7 @@ importers:
        version: 3.44.7(encoding@0.1.13)(typescript@5.4.5)
      '@argos-ci/cypress':
        specifier: ^2.1.0
-        version: 2.1.2(cypress@13.14.0)
+        version: 2.1.2(cypress@13.14.1)
      '@changesets/changelog-github':
        specifier: ^0.5.0
        version: 0.5.0(encoding@0.1.13)
@@ -25,7 +25,7 @@ importers:
        version: 8.13.3(eslint@9.8.0)
      '@cypress/code-coverage':
        specifier: ^3.12.30
-        version: 3.12.45(@babel/core@7.25.2)(@babel/preset-env@7.25.4(@babel/core@7.25.2))(babel-loader@9.1.3(@babel/core@7.25.2)(webpack@5.93.0(esbuild@0.21.5)))(cypress@13.14.0)(webpack@5.93.0(esbuild@0.21.5))
+        version: 3.12.45(@babel/core@7.25.2)(@babel/preset-env@7.25.4(@babel/core@7.25.2))(babel-loader@9.1.3(@babel/core@7.25.2)(webpack@5.93.0(esbuild@0.21.5)))(cypress@13.14.1)(webpack@5.93.0(esbuild@0.21.5))
      '@eslint/js':
        specifier: ^9.4.0
        version: 9.8.0
@@ -87,11 +87,11 @@ importers:
        specifier: ^8.6.0
        version: 8.14.2
      cypress:
-        specifier: ^13.11.0
-        version: 13.14.0
+        specifier: ^13.14.1
+        version: 13.14.1
      cypress-image-snapshot:
        specifier: ^4.0.1
-        version: 4.0.1(cypress@13.14.0)(jest@29.7.0(@types/node@20.16.2))
+        version: 4.0.1(cypress@13.14.1)(jest@29.7.0(@types/node@20.16.2))
      esbuild:
        specifier: ^0.21.5
        version: 0.21.5
@@ -170,9 +170,6 @@ importers:
      path-browserify:
        specifier: ^1.0.1
        version: 1.0.1
-      pnpm:
-        specifier: ^8.15.5
-        version: 8.15.9
      prettier:
        specifier: ^3.2.5
        version: 3.3.3
@@ -212,6 +209,9 @@ importers:
      '@braintree/sanitize-url':
        specifier: ^7.0.1
        version: 7.1.0
+      '@iconify/utils':
+        specifier: ^2.1.32
+        version: 2.1.32
      '@mermaid-js/parser':
        specifier: workspace:^
        version: link:../parser
@@ -267,6 +267,9 @@ importers:
      '@adobe/jsonschema2md':
        specifier: ^8.0.0
        version: 8.0.2
+      '@iconify/types':
+        specifier: ^2.0.0
+        version: 2.0.0
      '@types/cytoscape':
        specifier: ^3.21.4
        version: 3.21.5
@@ -500,6 +503,67 @@ importers:
        specifier: ^7.0.0
        version: 7.1.0

+  packages/mermaid/src/vitepress:
+    dependencies:
+      '@mdi/font':
+        specifier: ^7.0.0
+        version: 7.4.47
+      '@vueuse/core':
+        specifier: ^10.9.0
+        version: 10.11.1(vue@3.4.38(typescript@5.4.5))
+      font-awesome:
+        specifier: ^4.7.0
+        version: 4.7.0
+      jiti:
+        specifier: ^1.21.0
+        version: 1.21.6
+      mermaid:
+        specifier: workspace:^
+        version: link:../..
+      vue:
+        specifier: ^3.4.21
+        version: 3.4.38(typescript@5.4.5)
+    devDependencies:
+      '@iconify-json/carbon':
+        specifier: ^1.1.31
+        version: 1.1.37
+      '@unocss/reset':
+        specifier: ^0.59.0
+        version: 0.59.4
+      '@vite-pwa/vitepress':
+        specifier: ^0.4.0
+        version: 0.4.0(vite-plugin-pwa@0.19.8(vite@5.4.2(@types/node@22.5.1)(terser@5.31.6))(workbox-build@7.1.1(@types/babel__core@7.20.5))(workbox-window@7.1.0))
+      '@vitejs/plugin-vue':
+        specifier: ^5.0.0
+        version: 5.1.2(vite@5.4.2(@types/node@22.5.1)(terser@5.31.6))(vue@3.4.38(typescript@5.4.5))
+      fast-glob:
+        specifier: ^3.3.2
+        version: 3.3.2
+      https-localhost:
+        specifier: ^4.7.1
+        version: 4.7.1
+      pathe:
+        specifier: ^1.1.2
+        version: 1.1.2
+      unocss:
+        specifier: ^0.59.0
+        version: 0.59.4(postcss@8.4.41)(rollup@4.21.1)(vite@5.4.2(@types/node@22.5.1)(terser@5.31.6))
+      unplugin-vue-components:
+        specifier: ^0.26.0
+        version: 0.26.0(@babel/parser@7.25.4)(rollup@4.21.1)(vue@3.4.38(typescript@5.4.5))
+      vite:
+        specifier: ^5.0.0
+        version: 5.4.2(@types/node@22.5.1)(terser@5.31.6)
+      vite-plugin-pwa:
+        specifier: ^0.19.7
+        version: 0.19.8(vite@5.4.2(@types/node@22.5.1)(terser@5.31.6))(workbox-build@7.1.1(@types/babel__core@7.20.5))(workbox-window@7.1.0)
+      vitepress:
+        specifier: 1.1.4
+        version: 1.1.4(@algolia/client-search@4.24.0)(@types/node@22.5.1)(axios@1.7.5)(postcss@8.4.41)(search-insights@2.15.0)(terser@5.31.6)(typescript@5.4.5)
+      workbox-window:
+        specifier: ^7.0.0
+        version: 7.1.0
+
  packages/parser:
    dependencies:
      langium:
@@ -612,6 +676,9 @@ packages:
  '@antfu/install-pkg@0.1.1':
    resolution: {integrity: sha512-LyB/8+bSfa0DFGC06zpCEfs89/XoWZwws5ygEa5D+Xsm3OfI+aXQ86VgVG7Acyef+rSZ5HE7J8rrxzrQeM3PjQ==}

+  '@antfu/install-pkg@0.4.1':
+    resolution: {integrity: sha512-T7yB5QNG29afhWVkVq7XeIMBa5U/vs9mX69YqayXypPRmYzUmzwnYltplHmPtZ4HPCn+sQKeXW8I47wCbuBOjw==}
+
  '@antfu/utils@0.7.10':
    resolution: {integrity: sha512-+562v9k4aI80m1+VuMHehNJWLOFjBnXn3tdOitzD0il5b7smkSBal4+a3oKiQTbrwMmN/TBUMDvbdoWDehgOww==}

@@ -2175,6 +2242,9 @@ packages:
  '@iconify/utils@2.1.30':
    resolution: {integrity: sha512-bY0IO5xLOlbzJBnjWLxknp6Sss3yla03sVY9VeUz9nT6dbc+EGKlLfCt+6uytJnWm5CUvTF/BNotsLWF7kI61A==}

+  '@iconify/utils@2.1.32':
+    resolution: {integrity: sha512-LeifFZPPKu28O3AEDpYJNdEbvS4/ojAPyIW+pF/vUpJTYnbTiXUHkCh0bwgFRzKvdpb8H4Fbfd/742++MF4fPQ==}
+
  '@img/sharp-darwin-arm64@0.33.5':
    resolution: {integrity: sha512-UT4p+iz/2H4twwAoLCqfA9UH5pI6DggwKEGuaPy7nCVQ8ZsiY5PIcrRvD1DzuY3qYL07NtIQcWnBSY/heikIFQ==}
    engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
@@ -4354,8 +4424,8 @@ packages:
  cypress-wait-until@3.0.2:
    resolution: {integrity: sha512-iemies796dD5CgjG5kV0MnpEmKSH+s7O83ZoJLVzuVbZmm4lheMsZqAVT73hlMx4QlkwhxbyUzhOBUOZwoOe0w==}

-  cypress@13.14.0:
-    resolution: {integrity: sha512-r0+nhd033x883YL6068futewUsl02Q7rWiinyAAIBDW/OOTn+UMILWgNuCiY3vtJjd53efOqq5R9dctQk/rKiw==}
+  cypress@13.14.1:
+    resolution: {integrity: sha512-Wo+byPmjps66hACEH5udhXINEiN3qS3jWNGRzJOjrRJF3D0+YrcP2LVB1T7oYaVQM/S+eanqEvBWYc8cf7Vcbg==}
    engines: {node: ^16.0.0 || ^18.0.0 || >=20.0.0}
    hasBin: true

@@ -7147,6 +7217,9 @@ packages:
  package-json-from-dist@1.0.0:
    resolution: {integrity: sha512-dATvCeZN/8wQsGywez1mzHtTlP22H8OEfPrVMLNr4/eGa+ijtLn/6M5f0dY8UKNrC2O9UCU6SSoG3qRKnt7STw==}

+  package-manager-detector@0.2.0:
+    resolution: {integrity: sha512-E385OSk9qDcXhcM9LNSe4sdhx8a9mAPrZ4sMLW+tmxl5ZuGtPUcdFu+MPP2jbgiWAZ6Pfe5soGFMd+0Db5Vrog==}
+
  pako@1.0.11:
    resolution: {integrity: sha512-4hLB8Py4zZce5s4yd9XzopqwVv/yGNhV1Bl8NTmCq1763HeK2+EwVTv+leGeL13Dnh2wfbqowVPXCIO0z4taYw==}

@@ -7325,11 +7398,6 @@ packages:
    resolution: {integrity: sha512-TRzzuFRRmEoSW/p1KVAmiOgPco2Irlah+bGFCeNfJXxxYGwSw7YwAOAcd7X28K/m5bjBWKsC29KyoMfHbypayg==}
    engines: {node: '>=12.13.0'}

-  pnpm@8.15.9:
-    resolution: {integrity: sha512-SZQ0ydj90aJ5Tr9FUrOyXApjOrzuW7Fee13pDzL0e1E6ypjNXP0AHDHw20VLw4BO3M1XhQHkyik6aBYWa72fgQ==}
-    engines: {node: '>=16.14'}
-    hasBin: true
-
  points-on-curve@0.2.0:
    resolution: {integrity: sha512-0mYKnYYe9ZcqMCWhUjItv/oHjvgEsfKvnUTg8sAtnHr3GVy7rGkXCb6d5cSyqrWqL4k81b9CPg3urd+T7aop3A==}

@@ -8283,6 +8351,9 @@ packages:
  tinybench@2.9.0:
    resolution: {integrity: sha512-0+DUvqWMValLmha6lr4kD8iAMK1HzV0/aKnCtWb9v9641TnP/MFb7Pc2bxoxQjTXAErryXVgUOfv2YqNllqGeg==}

+  tinyexec@0.3.0:
+    resolution: {integrity: sha512-tVGE0mVJPGb0chKhqmsoosjsS+qUnJVGJpZgsHYQcGoPlG3B51R3PouqTgEGH2Dc9jjFyOqOpix6ZHNMXp1FZg==}
+
  tinypool@0.8.4:
    resolution: {integrity: sha512-i11VH5gS6IFeLY3gMBQ00/MmLncVP7JLXOw1vlgkytLmJK7QnEr7NXf0LBdxfmNPAeyetukOk0bOYrJrFGjYJQ==}
    engines: {node: '>=14.0.0'}
@@ -9281,6 +9352,11 @@ snapshots:
      execa: 5.1.1
      find-up: 5.0.0

+  '@antfu/install-pkg@0.4.1':
+    dependencies:
+      package-manager-detector: 0.2.0
+      tinyexec: 0.3.0
+
  '@antfu/utils@0.7.10': {}

  '@apideck/better-ajv-errors@0.3.6(ajv@8.17.1)':
@@ -9554,12 +9630,12 @@ snapshots:
    transitivePeerDependencies:
      - supports-color

-  '@argos-ci/cypress@2.1.2(cypress@13.14.0)':
+  '@argos-ci/cypress@2.1.2(cypress@13.14.1)':
    dependencies:
      '@argos-ci/browser': 2.1.3
      '@argos-ci/core': 2.5.0
      '@argos-ci/util': 2.1.1
-      cypress: 13.14.0
+      cypress: 13.14.1
      cypress-wait-until: 3.0.2
    transitivePeerDependencies:
      - supports-color
@@ -10906,14 +10982,14 @@ snapshots:

  '@cspell/url@8.14.2': {}

-  '@cypress/code-coverage@3.12.45(@babel/core@7.25.2)(@babel/preset-env@7.25.4(@babel/core@7.25.2))(babel-loader@9.1.3(@babel/core@7.25.2)(webpack@5.93.0(esbuild@0.21.5)))(cypress@13.14.0)(webpack@5.93.0(esbuild@0.21.5))':
+  '@cypress/code-coverage@3.12.45(@babel/core@7.25.2)(@babel/preset-env@7.25.4(@babel/core@7.25.2))(babel-loader@9.1.3(@babel/core@7.25.2)(webpack@5.93.0(esbuild@0.21.5)))(cypress@13.14.1)(webpack@5.93.0(esbuild@0.21.5))':
    dependencies:
      '@babel/core': 7.25.2
      '@babel/preset-env': 7.25.4(@babel/core@7.25.2)
      '@cypress/webpack-preprocessor': 6.0.2(@babel/core@7.25.2)(@babel/preset-env@7.25.4(@babel/core@7.25.2))(babel-loader@9.1.3(@babel/core@7.25.2)(webpack@5.93.0(esbuild@0.21.5)))(webpack@5.93.0(esbuild@0.21.5))
      babel-loader: 9.1.3(@babel/core@7.25.2)(webpack@5.93.0(esbuild@0.21.5))
      chalk: 4.1.2
-      cypress: 13.14.0
+      cypress: 13.14.1
      dayjs: 1.11.12
      debug: 4.3.6(supports-color@8.1.1)
      execa: 4.1.0
@@ -11249,6 +11325,18 @@ snapshots:
    transitivePeerDependencies:
      - supports-color

+  '@iconify/utils@2.1.32':
+    dependencies:
+      '@antfu/install-pkg': 0.4.1
+      '@antfu/utils': 0.7.10
+      '@iconify/types': 2.0.0
+      debug: 4.3.6(supports-color@8.1.1)
+      kolorist: 1.8.0
+      local-pkg: 0.5.0
+      mlly: 1.7.1
+    transitivePeerDependencies:
+      - supports-color
+
  '@img/sharp-darwin-arm64@0.33.5':
    optionalDependencies:
      '@img/sharp-libvips-darwin-arm64': 1.0.4
@@ -12301,6 +12389,16 @@ snapshots:
    transitivePeerDependencies:
      - rollup

+  '@unocss/astro@0.59.4(rollup@4.21.1)(vite@5.4.2(@types/node@22.5.1)(terser@5.31.6))':
+    dependencies:
+      '@unocss/core': 0.59.4
+      '@unocss/reset': 0.59.4
+      '@unocss/vite': 0.59.4(rollup@4.21.1)(vite@5.4.2(@types/node@22.5.1)(terser@5.31.6))
+    optionalDependencies:
+      vite: 5.4.2(@types/node@22.5.1)(terser@5.31.6)
+    transitivePeerDependencies:
+      - rollup
+
  '@unocss/cli@0.59.4(rollup@2.79.1)':
    dependencies:
      '@ampproject/remapping': 2.3.0
@@ -12319,6 +12417,24 @@ snapshots:
    transitivePeerDependencies:
      - rollup

+  '@unocss/cli@0.59.4(rollup@4.21.1)':
+    dependencies:
+      '@ampproject/remapping': 2.3.0
+      '@rollup/pluginutils': 5.1.0(rollup@4.21.1)
+      '@unocss/config': 0.59.4
+      '@unocss/core': 0.59.4
+      '@unocss/preset-uno': 0.59.4
+      cac: 6.7.14
+      chokidar: 3.6.0
+      colorette: 2.0.20
+      consola: 3.2.3
+      fast-glob: 3.3.2
+      magic-string: 0.30.11
+      pathe: 1.1.2
+      perfect-debounce: 1.0.0
+    transitivePeerDependencies:
+      - rollup
+
  '@unocss/config@0.59.4':
    dependencies:
      '@unocss/core': 0.59.4
@@ -12444,6 +12560,22 @@ snapshots:
    transitivePeerDependencies:
      - rollup

+  '@unocss/vite@0.59.4(rollup@4.21.1)(vite@5.4.2(@types/node@22.5.1)(terser@5.31.6))':
+    dependencies:
+      '@ampproject/remapping': 2.3.0
+      '@rollup/pluginutils': 5.1.0(rollup@4.21.1)
+      '@unocss/config': 0.59.4
+      '@unocss/core': 0.59.4
+      '@unocss/inspector': 0.59.4
+      '@unocss/scope': 0.59.4
+      '@unocss/transformer-directives': 0.59.4
+      chokidar: 3.6.0
+      fast-glob: 3.3.2
+      magic-string: 0.30.11
+      vite: 5.4.2(@types/node@22.5.1)(terser@5.31.6)
+    transitivePeerDependencies:
+      - rollup
+
  '@vite-pwa/vitepress@0.4.0(vite-plugin-pwa@0.19.8(vite@5.4.2(@types/node@22.5.1)(terser@5.31.6))(workbox-build@7.1.1(@types/babel__core@7.20.5))(workbox-window@7.1.0))':
    dependencies:
      vite-plugin-pwa: 0.19.8(vite@5.4.2(@types/node@22.5.1)(terser@5.31.6))(workbox-build@7.1.1(@types/babel__core@7.20.5))(workbox-window@7.1.0)
@@ -13873,10 +14005,10 @@ snapshots:

  cuint@0.2.2: {}

-  cypress-image-snapshot@4.0.1(cypress@13.14.0)(jest@29.7.0(@types/node@20.16.2)):
+  cypress-image-snapshot@4.0.1(cypress@13.14.1)(jest@29.7.0(@types/node@20.16.2)):
    dependencies:
      chalk: 2.4.2
-      cypress: 13.14.0
+      cypress: 13.14.1
      fs-extra: 7.0.1
      glob: 7.2.3
      jest-image-snapshot: 4.2.0(jest@29.7.0(@types/node@20.16.2))
@@ -13887,7 +14019,7 @@ snapshots:

  cypress-wait-until@3.0.2: {}

-  cypress@13.14.0:
+  cypress@13.14.1:
    dependencies:
      '@cypress/request': 3.0.1
      '@cypress/xvfb': 1.2.4(supports-color@8.1.1)
@@ -14923,7 +15055,7 @@ snapshots:
      proxy-addr: 2.0.7
      rfdc: 1.4.1
      secure-json-parse: 2.7.0
-      semver: 7.6.2
+      semver: 7.6.3
      tiny-lru: 8.0.2
    transitivePeerDependencies:
      - supports-color
@@ -16599,7 +16731,7 @@ snapshots:
  mdast-util-from-markdown@2.0.1:
    dependencies:
      '@types/mdast': 4.0.4
-      '@types/unist': 3.0.2
+      '@types/unist': 3.0.3
      decode-named-character-reference: 1.0.2
      devlop: 1.1.0
      mdast-util-to-string: 4.0.0
@@ -16689,7 +16821,7 @@ snapshots:
  mdast-util-to-markdown@2.1.0:
    dependencies:
      '@types/mdast': 4.0.4
-      '@types/unist': 3.0.2
+      '@types/unist': 3.0.3
      longest-streak: 3.1.0
      mdast-util-phrasing: 4.1.0
      mdast-util-to-string: 4.0.0
@@ -17290,6 +17422,8 @@ snapshots:

  package-json-from-dist@1.0.0: {}

+  package-manager-detector@0.2.0: {}
+
  pako@1.0.11: {}

  parent-module@1.0.1:
@@ -17453,8 +17587,6 @@ snapshots:

  pngjs@6.0.0: {}

-  pnpm@8.15.9: {}
-
  points-on-curve@0.2.0: {}

  points-on-path@0.2.1:
@@ -18556,6 +18688,8 @@ snapshots:

  tinybench@2.9.0: {}

+  tinyexec@0.3.0: {}
+
  tinypool@0.8.4: {}

  tinyspy@2.2.1: {}
@@ -18795,7 +18929,7 @@ snapshots:

  unist-util-stringify-position@4.0.0:
    dependencies:
-      '@types/unist': 3.0.2
+      '@types/unist': 3.0.3

  unist-util-visit-parents@6.0.1:
    dependencies:
@@ -18843,6 +18977,35 @@ snapshots:
      - rollup
      - supports-color

+  unocss@0.59.4(postcss@8.4.41)(rollup@4.21.1)(vite@5.4.2(@types/node@22.5.1)(terser@5.31.6)):
+    dependencies:
+      '@unocss/astro': 0.59.4(rollup@4.21.1)(vite@5.4.2(@types/node@22.5.1)(terser@5.31.6))
+      '@unocss/cli': 0.59.4(rollup@4.21.1)
+      '@unocss/core': 0.59.4
+      '@unocss/extractor-arbitrary-variants': 0.59.4
+      '@unocss/postcss': 0.59.4(postcss@8.4.41)
+      '@unocss/preset-attributify': 0.59.4
+      '@unocss/preset-icons': 0.59.4
+      '@unocss/preset-mini': 0.59.4
+      '@unocss/preset-tagify': 0.59.4
+      '@unocss/preset-typography': 0.59.4
+      '@unocss/preset-uno': 0.59.4
+      '@unocss/preset-web-fonts': 0.59.4
+      '@unocss/preset-wind': 0.59.4
+      '@unocss/reset': 0.59.4
+      '@unocss/transformer-attributify-jsx': 0.59.4
+      '@unocss/transformer-attributify-jsx-babel': 0.59.4
+      '@unocss/transformer-compile-class': 0.59.4
+      '@unocss/transformer-directives': 0.59.4
+      '@unocss/transformer-variant-group': 0.59.4
+      '@unocss/vite': 0.59.4(rollup@4.21.1)(vite@5.4.2(@types/node@22.5.1)(terser@5.31.6))
+    optionalDependencies:
+      vite: 5.4.2(@types/node@22.5.1)(terser@5.31.6)
+    transitivePeerDependencies:
+      - postcss
+      - rollup
+      - supports-color
+
  unpipe@1.0.0: {}

  unplugin-vue-components@0.26.0(@babel/parser@7.25.4)(rollup@2.79.1)(vue@3.4.38(typescript@5.4.5)):
@@ -18864,6 +19027,25 @@ snapshots:
      - rollup
      - supports-color

+  unplugin-vue-components@0.26.0(@babel/parser@7.25.4)(rollup@4.21.1)(vue@3.4.38(typescript@5.4.5)):
+    dependencies:
+      '@antfu/utils': 0.7.10
+      '@rollup/pluginutils': 5.1.0(rollup@4.21.1)
+      chokidar: 3.6.0
+      debug: 4.3.6(supports-color@8.1.1)
+      fast-glob: 3.3.2
+      local-pkg: 0.4.3
+      magic-string: 0.30.11
+      minimatch: 9.0.5
+      resolve: 1.22.8
+      unplugin: 1.12.0
+      vue: 3.4.38(typescript@5.4.5)
+    optionalDependencies:
+      '@babel/parser': 7.25.4
+    transitivePeerDependencies:
+      - rollup
+      - supports-color
+
  unplugin@1.12.0:
    dependencies:
      acorn: 8.12.1
@@ -18919,12 +19101,12 @@ snapshots:

  vfile-message@4.0.2:
    dependencies:
-      '@types/unist': 3.0.2
+      '@types/unist': 3.0.3
      unist-util-stringify-position: 4.0.0

  vfile@6.0.2:
    dependencies:
-      '@types/unist': 3.0.2
+      '@types/unist': 3.0.3
      unist-util-stringify-position: 4.0.0
      vfile-message: 4.0.2