// Need inline svg for css color control, so no `image` element :(
#let menu-icon = html.elem(
  "svg", 
  attrs: (
    class: "menu-icon icon",
    //width: "24",
    //height: "24",
    style: "width: 2em; height: 2em;",
    fill: "currentcolor",
    viewBox: "0 0 24 24",
    xmlns: "http://www.w3.org/2000/svg",
    aria-hidden: "true", // Assume decorative icons inside element with addequate label
  ), 
  html.elem("path", attrs: (
    clip-rule: "evenodd",
    fill-rule: "evenodd",
    d: "M3 6.75A.75.75.0 013.75 6h16.5a.75.75.0 010 1.5H3.75A.75.75.0 013 6.75zM3 12a.75.75.0 01.75-.75h16.5a.75.75.0 010 1.5H3.75A.75.75.0 013 12zm0 5.25a.75.75.0 01.75-.75h16.5a.75.75.0 010 1.5H3.75A.75.75.0 013 17.25z"
  ))
)
#let close-icon = html.elem(
  "svg", 
  attrs: (
    class: "close-icon icon",
    //width: "24",
    //height: "24",
    style: "width: 2em; height: 2em;",
    fill: "currentcolor",
    viewBox: "0 0 24 24",
    xmlns: "http://www.w3.org/2000/svg",
    aria-hidden: "true", // Assume decorative icons inside element with addequate label
  ), 
  html.elem("path", attrs: (
    clip-rule: "evenodd",
    fill-rule: "evenodd",
    d: "M5.47 5.47a.75.75.0 011.06.0L12 10.94l5.47-5.47a.75.75.0 111.06 1.06L13.06 12l5.47 5.47a.75.75.0 11-1.06 1.06L12 13.06l-5.47 5.47a.75.75.0 01-1.06-1.06L10.94 12 5.47 6.53a.75.75.0 010-1.06z"
  ))
)

#let home-icon = html.elem(
  "svg",
  attrs: (
    class: "home-icon icon",
    //width: "24",
    //height: "24",
    style: "width: 2em; height: 2em;",
    stroke: "currentcolor",
    fill-opacity: "0",
    viewBox: "0 0 24 24",
    xmlns: "http://www.w3.org/2000/svg",
    aria-hidden: "true", // Assume decorative icons inside element with addequate label
  ), {
    ```raw-css
    .home-icon {
      padding: 0.2em;
      border-radius: 0.5em;
    }
    ```
    html.elem("path", attrs: (
      stroke-width: "2",
      stroke-linecap: "round",
      d: "M22 22L2 22"
    ))
    html.elem("path", attrs: (
      stroke-width: "2",
      stroke-linecap: "round",
      d: "M2 11L10.1259 4.49931C11.2216 3.62279 12.7784 3.62279 13.8741 4.49931L22 11"
    ))
    html.elem("path", attrs: (
      stroke-width: "2",
      stroke-linecap: "round",
      d: "M15.5 5.5V3.5C15.5 3.22386 15.7239 3 16 3H18.5C18.7761 3 19 3.22386 19 3.5V8.5"
    ))
    html.elem("path", attrs: (
      stroke-width: "2",
      stroke-linecap: "round",
      d: "M4 22V9.5"
    ))
    html.elem("path", attrs: (
      stroke-width: "2",
      stroke-linecap: "round",
      d: "M20 22V9.5"
    ))
    html.elem("path", attrs: (
      stroke-width: "2",
      d: "M15 22V17C15 15.5858 15 14.8787 14.5607 14.4393C14.1213 14 13.4142 14 12 14C10.5858 14 9.87868 14 9.43934 14.4393C9 14.8787 9 15.5858 9 17V22"
    ))
  }
)

#let rss-icon = html.elem(
  "svg",
  attrs: (
    class: "rss-icon icon",
    //width: "24",
    //height: "24",
    style: "width: 2em; height: 2em;",
    stroke: "currentcolor",
    fill: "currentcolor",
    //fill-opacity: "0",
    viewBox: "0 0 24 24",
    xmlns: "http://www.w3.org/2000/svg",
    aria-hidden: "true", // Assume decorative icons inside element with addequate label
  ), {
    ```raw-css
    .rss-icon {
      padding: 0.2em;
      border-radius: 0.5em;
    }
    ```
    html.elem("circle", attrs: (
      cx: "6",
      cy: "18",
      r: "3",
    ))
    html.elem("path", attrs: (
      stroke-width: "3",
      fill: "none",
      stroke-linecap: "round",
      d: "M3 10a11 11 0 0 1 11 11",
    ))
    html.elem("path", attrs: (
      stroke-width: "3",
      fill: "none",
      stroke-linecap: "round",
      d: "M3 4a17 17 0 0 1 17 17",
    ))
  }
)