Icons

The Astro D2 integration can be used to create diagrams with icons:

```d2
container: Docker {
  icon: https://icons.terrastruct.com/dev%2Fdocker.svg
  style: {
    stroke: deepskyblue
    font-color: deepskyblue
    fill: white
  }
  nginx: NGINX {
    icon: https://icons.terrastruct.com/dev%2Fnginx.svg
    style: {
      stroke: green
      font-color: green
      stroke-dash: 3
      fill: white
    }
    astro: Astro {
      style: {
        stroke: "#d841c1"
        font-color: white
        fill: "#75297f"
      }
    }
  }
}
```

The above code block will be rendered as the following diagram:

<!–?xml version=“1.0” encoding=“utf-8”?–>

}

@font-face { font-family: d2-3350930237-font-regular; src: url(“data:application/font-woff;base64,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”);

}

.d2-3350930237 .text-bold { font-family: “d2-3350930237-font-bold”;

}

@font-face { font-family: d2-3350930237-font-bold; src: url(“data:application/font-woff;base64,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”); }

}

.connection { stroke-linecap: round; stroke-linejoin: round;

}

.blend { mix-blend-mode: multiply; opacity: 0.5;

}

.d2-3350930237 .fill-N1{fill:#0A0F25;} .d2-3350930237 .fill-N2{fill:#676C7E;} .d2-3350930237 .fill-N3{fill:#9499AB;} .d2-3350930237 .fill-N4{fill:#CFD2DD;} .d2-3350930237 .fill-N5{fill:#DEE1EB;} .d2-3350930237 .fill-N6{fill:#EEF1F8;} .d2-3350930237 .fill-N7{fill:#FFFFFF;} .d2-3350930237 .fill-B1{fill:#0D32B2;} .d2-3350930237 .fill-B2{fill:#0D32B2;} .d2-3350930237 .fill-B3{fill:#E3E9FD;} .d2-3350930237 .fill-B4{fill:#E3E9FD;} .d2-3350930237 .fill-B5{fill:#EDF0FD;} .d2-3350930237 .fill-B6{fill:#F7F8FE;} .d2-3350930237 .fill-AA2{fill:#4A6FF3;} .d2-3350930237 .fill-AA4{fill:#EDF0FD;} .d2-3350930237 .fill-AA5{fill:#F7F8FE;} .d2-3350930237 .fill-AB4{fill:#EDF0FD;} .d2-3350930237 .fill-AB5{fill:#F7F8FE;} .d2-3350930237 .stroke-N1{stroke:#0A0F25;} .d2-3350930237 .stroke-N2{stroke:#676C7E;} .d2-3350930237 .stroke-N3{stroke:#9499AB;} .d2-3350930237 .stroke-N4{stroke:#CFD2DD;} .d2-3350930237 .stroke-N5{stroke:#DEE1EB;} .d2-3350930237 .stroke-N6{stroke:#EEF1F8;} .d2-3350930237 .stroke-N7{stroke:#FFFFFF;} .d2-3350930237 .stroke-B1{stroke:#0D32B2;} .d2-3350930237 .stroke-B2{stroke:#0D32B2;} .d2-3350930237 .stroke-B3{stroke:#E3E9FD;} .d2-3350930237 .stroke-B4{stroke:#E3E9FD;} .d2-3350930237 .stroke-B5{stroke:#EDF0FD;} .d2-3350930237 .stroke-B6{stroke:#F7F8FE;} .d2-3350930237 .stroke-AA2{stroke:#4A6FF3;} .d2-3350930237 .stroke-AA4{stroke:#EDF0FD;} .d2-3350930237 .stroke-AA5{stroke:#F7F8FE;} .d2-3350930237 .stroke-AB4{stroke:#EDF0FD;} .d2-3350930237 .stroke-AB5{stroke:#F7F8FE;} .d2-3350930237 .background-color-N1{background-color:#0A0F25;} .d2-3350930237 .background-color-N2{background-color:#676C7E;} .d2-3350930237 .background-color-N3{background-color:#9499AB;} .d2-3350930237 .background-color-N4{background-color:#CFD2DD;} .d2-3350930237 .background-color-N5{background-color:#DEE1EB;} .d2-3350930237 .background-color-N6{background-color:#EEF1F8;} .d2-3350930237 .background-color-N7{background-color:#FFFFFF;} .d2-3350930237 .background-color-B1{background-color:#0D32B2;} .d2-3350930237 .background-color-B2{background-color:#0D32B2;} .d2-3350930237 .background-color-B3{background-color:#E3E9FD;} .d2-3350930237 .background-color-B4{background-color:#E3E9FD;} .d2-3350930237 .background-color-B5{background-color:#EDF0FD;} .d2-3350930237 .background-color-B6{background-color:#F7F8FE;} .d2-3350930237 .background-color-AA2{background-color:#4A6FF3;} .d2-3350930237 .background-color-AA4{background-color:#EDF0FD;} .d2-3350930237 .background-color-AA5{background-color:#F7F8FE;} .d2-3350930237 .background-color-AB4{background-color:#EDF0FD;} .d2-3350930237 .background-color-AB5{background-color:#F7F8FE;} .d2-3350930237 .color-N1{color:#0A0F25;} .d2-3350930237 .color-N2{color:#676C7E;} .d2-3350930237 .color-N3{color:#9499AB;} .d2-3350930237 .color-N4{color:#CFD2DD;} .d2-3350930237 .color-N5{color:#DEE1EB;} .d2-3350930237 .color-N6{color:#EEF1F8;} .d2-3350930237 .color-N7{color:#FFFFFF;} .d2-3350930237 .color-B1{color:#0D32B2;} .d2-3350930237 .color-B2{color:#0D32B2;} .d2-3350930237 .color-B3{color:#E3E9FD;} .d2-3350930237 .color-B4{color:#E3E9FD;} .d2-3350930237 .color-B5{color:#EDF0FD;} .d2-3350930237 .color-B6{color:#F7F8FE;} .d2-3350930237 .color-AA2{color:#4A6FF3;} .d2-3350930237 .color-AA4{color:#EDF0FD;} .d2-3350930237 .color-AA5{color:#F7F8FE;} .d2-3350930237 .color-AB4{color:#EDF0FD;} .d2-3350930237 .color-AB5{color:#F7F8FE;}.appendix text.text{fill:#0A0F25}.md{–color-fg-default:#0A0F25;–color-fg-muted:#676C7E;–color-fg-subtle:#9499AB;–color-canvas-default:#FFFFFF;–color-canvas-subtle:#EEF1F8;–color-border-default:#0D32B2;–color-border-muted:#0D32B2;–color-neutral-muted:#EEF1F8;–color-accent-fg:#0D32B2;–color-accent-emphasis:#0D32B2;–color-attention-subtle:#676C7E;–color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-darker-d2-3350930237);mix-blend-mode:lighten‘}.sketch-overlay-B2{fill:url(#streaks-darker-d2-3350930237);mix-blend-mode:lighten’}.sketch-overlay-B3{fill:url(#streaks-bright-d2-3350930237);mix-blend-mode:darken‘}.sketch-overlay-B4{fill:url(#streaks-bright-d2-3350930237);mix-blend-mode:darken’}.sketch-overlay-B5{fill:url(#streaks-bright-d2-3350930237);mix-blend-mode:darken‘}.sketch-overlay-B6{fill:url(#streaks-bright-d2-3350930237);mix-blend-mode:darken’}.sketch-overlay-AA2{fill:url(#streaks-dark-d2-3350930237);mix-blend-mode:overlay‘}.sketch-overlay-AA4{fill:url(#streaks-bright-d2-3350930237);mix-blend-mode:darken’}.sketch-overlay-AA5{fill:url(#streaks-bright-d2-3350930237);mix-blend-mode:darken‘}.sketch-overlay-AB4{fill:url(#streaks-bright-d2-3350930237);mix-blend-mode:darken’}.sketch-overlay-AB5{fill:url(#streaks-bright-d2-3350930237);mix-blend-mode:darken‘}.sketch-overlay-N1{fill:url(#streaks-darker-d2-3350930237);mix-blend-mode:lighten’}.sketch-overlay-N2{fill:url(#streaks-dark-d2-3350930237);mix-blend-mode:overlay‘}.sketch-overlay-N3{fill:url(#streaks-normal-d2-3350930237);mix-blend-mode:color-burn’}.sketch-overlay-N4{fill:url(#streaks-normal-d2-3350930237);mix-blend-mode:color-burn‘}.sketch-overlay-N5{fill:url(#streaks-bright-d2-3350930237);mix-blend-mode:darken’}.sketch-overlay-N6{fill:url(#streaks-bright-d2-3350930237);mix-blend-mode:darken‘}.sketch-overlay-N7{fill:url(#streaks-bright-d2-3350930237);mix-blend-mode:darken’}.light-code{display: block}.dark-code{display: none}@media screen and (prefers-color-scheme:dark){ .d2-3350930237 .fill-N1{fill:#CDD6F4;} .d2-3350930237 .fill-N2{fill:#BAC2DE;} .d2-3350930237 .fill-N3{fill:#A6ADC8;} .d2-3350930237 .fill-N4{fill:#585B70;} .d2-3350930237 .fill-N5{fill:#45475A;} .d2-3350930237 .fill-N6{fill:#313244;} .d2-3350930237 .fill-N7{fill:#1E1E2E;} .d2-3350930237 .fill-B1{fill:#CBA6f7;} .d2-3350930237 .fill-B2{fill:#CBA6f7;} .d2-3350930237 .fill-B3{fill:#6C7086;} .d2-3350930237 .fill-B4{fill:#585B70;} .d2-3350930237 .fill-B5{fill:#45475A;} .d2-3350930237 .fill-B6{fill:#313244;} .d2-3350930237 .fill-AA2{fill:#f38BA8;} .d2-3350930237 .fill-AA4{fill:#45475A;} .d2-3350930237 .fill-AA5{fill:#313244;} .d2-3350930237 .fill-AB4{fill:#45475A;} .d2-3350930237 .fill-AB5{fill:#313244;} .d2-3350930237 .stroke-N1{stroke:#CDD6F4;} .d2-3350930237 .stroke-N2{stroke:#BAC2DE;} .d2-3350930237 .stroke-N3{stroke:#A6ADC8;} .d2-3350930237 .stroke-N4{stroke:#585B70;} .d2-3350930237 .stroke-N5{stroke:#45475A;} .d2-3350930237 .stroke-N6{stroke:#313244;} .d2-3350930237 .stroke-N7{stroke:#1E1E2E;} .d2-3350930237 .stroke-B1{stroke:#CBA6f7;} .d2-3350930237 .stroke-B2{stroke:#CBA6f7;} .d2-3350930237 .stroke-B3{stroke:#6C7086;} .d2-3350930237 .stroke-B4{stroke:#585B70;} .d2-3350930237 .stroke-B5{stroke:#45475A;} .d2-3350930237 .stroke-B6{stroke:#313244;} .d2-3350930237 .stroke-AA2{stroke:#f38BA8;} .d2-3350930237 .stroke-AA4{stroke:#45475A;} .d2-3350930237 .stroke-AA5{stroke:#313244;} .d2-3350930237 .stroke-AB4{stroke:#45475A;} .d2-3350930237 .stroke-AB5{stroke:#313244;} .d2-3350930237 .background-color-N1{background-color:#CDD6F4;} .d2-3350930237 .background-color-N2{background-color:#BAC2DE;} .d2-3350930237 .background-color-N3{background-color:#A6ADC8;} .d2-3350930237 .background-color-N4{background-color:#585B70;} .d2-3350930237 .background-color-N5{background-color:#45475A;} .d2-3350930237 .background-color-N6{background-color:#313244;} .d2-3350930237 .background-color-N7{background-color:#1E1E2E;} .d2-3350930237 .background-color-B1{background-color:#CBA6f7;} .d2-3350930237 .background-color-B2{background-color:#CBA6f7;} .d2-3350930237 .background-color-B3{background-color:#6C7086;} .d2-3350930237 .background-color-B4{background-color:#585B70;} .d2-3350930237 .background-color-B5{background-color:#45475A;} .d2-3350930237 .background-color-B6{background-color:#313244;} .d2-3350930237 .background-color-AA2{background-color:#f38BA8;} .d2-3350930237 .background-color-AA4{background-color:#45475A;} .d2-3350930237 .background-color-AA5{background-color:#313244;} .d2-3350930237 .background-color-AB4{background-color:#45475A;} .d2-3350930237 .background-color-AB5{background-color:#313244;} .d2-3350930237 .color-N1{color:#CDD6F4;} .d2-3350930237 .color-N2{color:#BAC2DE;} .d2-3350930237 .color-N3{color:#A6ADC8;} .d2-3350930237 .color-N4{color:#585B70;} .d2-3350930237 .color-N5{color:#45475A;} .d2-3350930237 .color-N6{color:#313244;} .d2-3350930237 .color-N7{color:#1E1E2E;} .d2-3350930237 .color-B1{color:#CBA6f7;} .d2-3350930237 .color-B2{color:#CBA6f7;} .d2-3350930237 .color-B3{color:#6C7086;} .d2-3350930237 .color-B4{color:#585B70;} .d2-3350930237 .color-B5{color:#45475A;} .d2-3350930237 .color-B6{color:#313244;} .d2-3350930237 .color-AA2{color:#f38BA8;} .d2-3350930237 .color-AA4{color:#45475A;} .d2-3350930237 .color-AA5{color:#313244;} .d2-3350930237 .color-AB4{color:#45475A;} .d2-3350930237 .color-AB5{color:#313244;}.appendix text.text{fill:#CDD6F4}.md{–color-fg-default:#CDD6F4;–color-fg-muted:#BAC2DE;–color-fg-subtle:#A6ADC8;–color-canvas-default:#1E1E2E;–color-canvas-subtle:#313244;–color-border-default:#CBA6f7;–color-border-muted:#CBA6f7;–color-neutral-muted:#313244;–color-accent-fg:#CBA6f7;–color-accent-emphasis:#CBA6f7;–color-attention-subtle:#BAC2DE;–color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-normal-d2-3350930237);mix-blend-mode:color-burn‘}.sketch-overlay-B2{fill:url(#streaks-normal-d2-3350930237);mix-blend-mode:color-burn’}.sketch-overlay-B3{fill:url(#streaks-dark-d2-3350930237);mix-blend-mode:overlay‘}.sketch-overlay-B4{fill:url(#streaks-dark-d2-3350930237);mix-blend-mode:overlay’}.sketch-overlay-B5{fill:url(#streaks-darker-d2-3350930237);mix-blend-mode:lighten‘}.sketch-overlay-B6{fill:url(#streaks-darker-d2-3350930237);mix-blend-mode:lighten’}.sketch-overlay-AA2{fill:url(#streaks-normal-d2-3350930237);mix-blend-mode:color-burn‘}.sketch-overlay-AA4{fill:url(#streaks-darker-d2-3350930237);mix-blend-mode:lighten’}.sketch-overlay-AA5{fill:url(#streaks-darker-d2-3350930237);mix-blend-mode:lighten‘}.sketch-overlay-AB4{fill:url(#streaks-darker-d2-3350930237);mix-blend-mode:lighten’}.sketch-overlay-AB5{fill:url(#streaks-darker-d2-3350930237);mix-blend-mode:lighten‘}.sketch-overlay-N1{fill:url(#streaks-normal-d2-3350930237);mix-blend-mode:color-burn’}.sketch-overlay-N2{fill:url(#streaks-normal-d2-3350930237);mix-blend-mode:color-burn‘}.sketch-overlay-N3{fill:url(#streaks-normal-d2-3350930237);mix-blend-mode:color-burn’}.sketch-overlay-N4{fill:url(#streaks-dark-d2-3350930237);mix-blend-mode:overlay‘}.sketch-overlay-N5{fill:url(#streaks-darker-d2-3350930237);mix-blend-mode:lighten’}.sketch-overlay-N6{fill:url(#streaks-darker-d2-3350930237);mix-blend-mode:lighten‘}.sketch-overlay-N7{fill:url(#streaks-darker-d2-3350930237);mix-blend-mode:lighten’}.light-code{display: none}.dark-code{display: block}}DockerNGINXAstro

When using the experimental.useD2js configuration option, the inline configuration option or attribute must be set to true to properly render the icons.

Relative paths

The Astro D2 integration supports rendering icons with paths relative to your Markdown file.

For example, considering a file located at src/content/docs/example.md and an icon located at src/assets/icon.svg, you can reference the icon as follows:

```d2
network: {
  icon: ../../assets/icon.svg
}
```

The above code block will be rendered as the following diagram:

When using the experimental.useD2js configuration option, icons with relative paths are not supported.