Add support for icon provider

[Plawn]

Add a syntax to use an icon provider in order to use a shortcun when using an url for a given icon

url-provider: 
    default: https://icons.terrastruct.com/
    other: http://..

# then use it

test {
icon: essentials%2F226-alarm%20clock.svg
}

test2 {
icon: @other/essentials%2F226-alarm%20clock.svg
}

[bo-ku-ra]

i prefer d2 can use variables

#variable
$str = "https://icons.terrastruct.com/";

test{
icon: $str . "essentials%2F226-alarm%20clock.svg";  #= https://icons.terrastruct.com/essentials%2F226-alarm%20clock.svg
}

#variable
$c_str = "style.font-color: red; style.stroke: red; style.fill: mistyrose;";

test{
 $c_str; 
 test2
}

[soma-m]

Yeah variables seem like a better more generic approach to solving this problem.

[alixander]

yeah exactly, that's how it will work.

$icon-host: https://icons.terrastruct.com

x: {
  icon: ${icon-host}/essentials%2F226-alarm%20clock.svg
}

[bo-ku-ra]

>d2 foobar.d2 # run at 2023/7/7 23:30

x->y
output-time:"${today} ${time}" { # japan: [ yyyy/mm/dd(aaa) hh:mm ] 2023/07/07(金) 23:30
near: bottom-right
shape:text
}

[Plawn]

It would be cleaner if the icon provider had more "indirections features" such as shortcut or path transformations in order to make it easier to use frequently used icons

[Plawn]

closed by 0.6.0?

[alixander]

@Plawn vars goes a long way here, but i think your comment deserves further consideration. it's still unideal that you'd like to write ugly URLs like ${icon-host}/essentials%2F226-alarm%20clock.svg.

maybe we should just alias more human-friendly urls for each icon.

Or maybe an official set should be included in D2 such that LSPs can find them. Icons are core to good diagrams, and I don't think even with vars that we've reached an ideal solution yet

[Plawn]

that's why i proposed the

@other/essential-alarm-clock 

syntax

[bo-ku-ra]

i'm happy with vars.

vars:"d2 v0.6.0" {
  d2-config: {theme-id: 0; dark-theme-id: 0; pad: 0; center: false; sketch: false; layout-engine: dagre}
  #-------------------------------------------------------------
  # images
  # https://www.irasutoya.com/ (famous japanese free image site)
  #-------------------------------------------------------------
  twitter:"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgxvrqXBEb4N9O11rxy6fdpSdnAio1cYG0GvgjmrDeHUVyc-U2SnolR4kUseN5CPhP9vfnxKDim3PjnzlNwWlcfRMRzOItu_kl05cnBIEb_S3D5hwJkhQoKa9tgnUHEYpI3-Y0WO4jWGpiitYso-OtWROLRGwiWw01-_wVqJ6wolygvTQN_i9xj7un7njJB/s992/bluebird_fired_text.png"
  #-------------------------------------------------------------
}
direction:right
t->x{style.stroke-width: 8; style.stroke: red;}

t:""{
shape:image
icon:"${twitter}"
}

x:"𝕏"{
shape:text
style.font-size: 100;
}

[ppalka-lingaro]

I solved it by generating a d2 with icon classes, variables is also nice Idea, I will maybe change base url to variable.
I generated it using simple python script and jinja2 templates. I'm creating repo for my org.
but someone may create official or unofficial repo similar to https://github.com/plantuml/plantuml-stdlib/tree/master

sample of azure.d2 with classes

---

classes: {
    API Connections: {
      icon: https://icons.terrastruct.com/azure%2FWeb%20Service%20Color%2FAPI%20Connections.svg

      shape: image
      label: "API Connections"
    }
    API Management Services: {
      icon: https://icons.terrastruct.com/azure%2FIntegration%20Service%20Color%2FAPI%20Management%20Services.svg

      shape: image
      label: "API Management Services"
    }
    Access Review: {
      icon: https://icons.terrastruct.com/azure%2FIdentity%20Service%20Color%2FAccess%20Review.svg

      shape: image
      label: "Access Review"
    }
}

my_diagram.d2:

---

classes: {...@../classes/other/terrastruct/azure.d2.classes}
direction: right
Tranformation.class: Databricks
Orchestration.class: Data Pipeline

---

it would be great if we could import / include classes / styles and variables from public repo similar to plantuml what is already requested #1397
Plant UML example
!define AzurePuml https://raw.githubusercontent.com/plantuml-stdlib/Azure-PlantUML/release/2-2/dist
!includeurl AzurePuml/AzureCommon.puml