From 4062813d4454243a1d82309fd5f27ee93ed13d05 Mon Sep 17 00:00:00 2001
From: saurabhg772244 <saurabh@mermaidchart.com>
Date: Tue, 8 Oct 2024 17:45:53 +0530
Subject: [PATCH] Added docs for icon-shape

---
 docs/icon-shape.md                      | 76 +++++++++++++++++++++++++
 packages/mermaid/src/docs/icon-shape.md | 70 +++++++++++++++++++++++
 2 files changed, 146 insertions(+)
 create mode 100644 docs/icon-shape.md
 create mode 100644 packages/mermaid/src/docs/icon-shape.md

diff --git a/docs/icon-shape.md b/docs/icon-shape.md
new file mode 100644
index 000000000..64ebe494f
--- /dev/null
+++ b/docs/icon-shape.md
@@ -0,0 +1,76 @@
+> **Warning**
+>
+> ## THIS IS AN AUTOGENERATED FILE. DO NOT EDIT.
+>
+> ## Please edit the corresponding file in [/packages/mermaid/src/docs/icon-shape.md](../packages/mermaid/src/docs/icon-shape.md).
+
+# Icon Shape Configuration
+
+This document provides details on how to configure icon shapes in Mermaid using the specified syntax.
+
+## Syntax
+
+```plaintext
+Id@{ icon: "icon-name", form: "icon-form", label: "label", pos: "t", h: 60 }
+```
+
+### Parameters
+
+- **icon**: The name of the icon from the registered icon pack.
+- **form**: Specifies the background shape of the icon. Options include:
+  - `square`
+  - `circle`
+  - `rounded`
+- **label**: The text label associated with the icon. This can be any string. If not defined, no label will be displayed.
+- **pos**: The position of the label. Possible values are:
+  - `t` (top)
+  - `b` (bottom, default if not provided)
+- **h**: The height of the icon in pixels. This parameter is optional and defaults to 48 pixels, which is the minimum height.
+
+### Example
+
+```mermaid-example
+B2@{ icon: "fa:window-minimize", form: "rounded", label: "B2", pos: "t", h: 60 }
+```
+
+```mermaid
+B2@{ icon: "fa:window-minimize", form: "rounded", label: "B2", pos: "t", h: 60 }
+```
+
+In this example:
+
+- The icon is "fa:window-minimize".
+- The shape is "rounded".
+- The label is "B2".
+- The label position is at the top (`t`).
+- The height of the icon is 40 pixels.
+
+### Additional Notes
+
+Ensure that the icon name corresponds to a valid icon in the registered icon pack to avoid rendering issues.
+
+### Registering Icon Packs
+
+To use icons in Mermaid, you need to register the icon packs. Below is an example of how to register icon packs:
+
+```javascript
+mermaid.registerIconPacks([
+  {
+    name: 'logos',
+    loader: () =>
+      fetch('https://unpkg.com/@iconify-json/logos@1/icons.json').then((res) => res.json()),
+  },
+  {
+    name: 'fa',
+    loader: () =>
+      fetch('https://unpkg.com/@iconify-json/fa6-regular@1/icons.json').then((res) => res.json()),
+  },
+]);
+```
+
+In this example:
+
+- The `logos` icon pack is registered by fetching the icons from the specified URL.
+- The `fa` (Font Awesome) icon pack is registered similarly.
+
+Ensure that the URLs provided point to valid Iconify JSON files containing the icon definitions.
diff --git a/packages/mermaid/src/docs/icon-shape.md b/packages/mermaid/src/docs/icon-shape.md
new file mode 100644
index 000000000..b61fa33aa
--- /dev/null
+++ b/packages/mermaid/src/docs/icon-shape.md
@@ -0,0 +1,70 @@
+---
+title: Icon Shape Configuration
+---
+
+# Icon Shape Configuration
+
+This document provides details on how to configure icon shapes in Mermaid using the specified syntax.
+
+## Syntax
+
+```plaintext
+Id@{ icon: "icon-name", form: "icon-form", label: "label", pos: "t", h: 60 }
+```
+
+### Parameters
+
+- **icon**: The name of the icon from the registered icon pack.
+- **form**: Specifies the background shape of the icon. Options include:
+  - `square`
+  - `circle`
+  - `rounded`
+- **label**: The text label associated with the icon. This can be any string. If not defined, no label will be displayed.
+- **pos**: The position of the label. Possible values are:
+  - `t` (top)
+  - `b` (bottom, default if not provided)
+- **h**: The height of the icon in pixels. This parameter is optional and defaults to 48 pixels, which is the minimum height.
+
+### Example
+
+```mermaid
+B2@{ icon: "fa:window-minimize", form: "rounded", label: "B2", pos: "t", h: 60 }
+```
+
+In this example:
+
+- The icon is "fa:window-minimize".
+- The shape is "rounded".
+- The label is "B2".
+- The label position is at the top (`t`).
+- The height of the icon is 40 pixels.
+
+### Additional Notes
+
+Ensure that the icon name corresponds to a valid icon in the registered icon pack to avoid rendering issues.
+
+### Registering Icon Packs
+
+To use icons in Mermaid, you need to register the icon packs. Below is an example of how to register icon packs:
+
+```javascript
+mermaid.registerIconPacks([
+  {
+    name: 'logos',
+    loader: () =>
+      fetch('https://unpkg.com/@iconify-json/logos@1/icons.json').then((res) => res.json()),
+  },
+  {
+    name: 'fa',
+    loader: () =>
+      fetch('https://unpkg.com/@iconify-json/fa6-regular@1/icons.json').then((res) => res.json()),
+  },
+]);
+```
+
+In this example:
+
+- The `logos` icon pack is registered by fetching the icons from the specified URL.
+- The `fa` (Font Awesome) icon pack is registered similarly.
+
+Ensure that the URLs provided point to valid Iconify JSON files containing the icon definitions.