mirror of
https://github.com/mermaid-js/mermaid.git
synced 2025-09-23 17:29:54 +02:00
68 lines
1.9 KiB
Markdown
68 lines
1.9 KiB
Markdown
> **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
|
|
```
|