{#- The admin's own icons, drawn with one stroke width so they sit together.
    Import it and call `icons.icon("search")`; `size` is in pixels. -#}
{% macro icon(name, size=16, class="") -%}
<svg width="{{ size }}" height="{{ size }}" viewBox="0 0 24 24" fill="none" stroke="currentColor"
     stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"
     class="shrink-0 {{ class }}">
{%- if name == "search" %}<circle cx="11" cy="11" r="7"/><path d="m20 20-3.5-3.5"/>
{%- elif name == "overview" %}<rect x="3" y="3" width="7" height="9" rx="1.5"/><rect x="14" y="3" width="7" height="5" rx="1.5"/><rect x="14" y="12" width="7" height="9" rx="1.5"/><rect x="3" y="16" width="7" height="5" rx="1.5"/>
{%- elif name == "history" %}<path d="M3 12a9 9 0 1 0 3-6.7L3 8"/><path d="M3 3v5h5"/><path d="M12 7v5l3 2"/>
{%- elif name == "rows" %}<rect x="3" y="4" width="18" height="16" rx="2"/><path d="M3 10h18M3 15h18"/>
{%- elif name == "page" %}<path d="M6 3h8l4 4v14H6z"/><path d="M14 3v4h4"/>
{%- elif name == "plus" %}<path d="M12 5v14M5 12h14"/>
{%- elif name == "download" %}<path d="M12 4v11"/><path d="m7 10 5 5 5-5"/><path d="M5 20h14"/>
{%- elif name == "upload" %}<path d="M12 20V9"/><path d="m7 14 5-5 5 5"/><path d="M5 4h14"/>
{%- elif name == "more" %}<circle cx="5" cy="12" r="1.7" fill="currentColor" stroke="none"/><circle cx="12" cy="12" r="1.7" fill="currentColor" stroke="none"/><circle cx="19" cy="12" r="1.7" fill="currentColor" stroke="none"/>
{%- elif name == "chevron-down" %}<path d="m6 9 6 6 6-6"/>
{%- elif name == "chevron-up" %}<path d="m6 15 6-6 6 6"/>
{%- elif name == "chevron-left" %}<path d="m15 6-6 6 6 6"/>
{%- elif name == "chevron-right" %}<path d="m9 6 6 6-6 6"/>
{%- elif name == "chevrons-up-down" %}<path d="m7 9 5-5 5 5"/><path d="m7 15 5 5 5-5"/>
{%- elif name == "arrow-up" %}<path d="M12 19V5"/><path d="m6 11 6-6 6 6"/>
{%- elif name == "arrow-down" %}<path d="M12 5v14"/><path d="m6 13 6 6 6-6"/>
{%- elif name == "arrow-up-right" %}<path d="M7 17 17 7"/><path d="M8 7h9v9"/>
{%- elif name == "x" %}<path d="M6 6l12 12M18 6 6 18"/>
{%- elif name == "check" %}<path d="m5 12 5 5 9-10"/>
{%- elif name == "pencil" %}<path d="M4 20h4L19 9l-4-4L4 16z"/><path d="m13 7 4 4"/>
{%- elif name == "trash" %}<path d="M4 7h16"/><path d="M10 11v6M14 11v6"/><path d="M6 7l1 13h10l1-13"/><path d="M9 7V4h6v3"/>
{%- elif name == "sign-out" %}<path d="M9 4H5v16h4"/><path d="m16 8 4 4-4 4"/><path d="M20 12H9"/>
{%- elif name == "moon" %}<path d="M20 14.5A8 8 0 1 1 9.5 4a6.5 6.5 0 0 0 10.5 10.5z"/>
{%- elif name == "menu" %}<path d="M4 7h16M4 12h16M4 17h16"/>
{%- elif name == "columns" %}<path d="M4 6h9M17 6h3M4 12h3M11 12h9M4 18h11M19 18h1"/><circle cx="15" cy="6" r="2"/><circle cx="9" cy="12" r="2"/><circle cx="17" cy="18" r="2"/>
{%- elif name == "calendar" %}<rect x="3" y="5" width="18" height="16" rx="2"/><path d="M3 10h18M8 3v4M16 3v4"/>
{%- elif name == "lock" %}<rect x="5" y="11" width="14" height="10" rx="2"/><path d="M8 11V8a4 4 0 0 1 8 0v3"/>
{%- elif name == "alert" %}<circle cx="12" cy="12" r="9"/><path d="M12 7.5v5M12 16h.01"/>
{%- elif name == "globe" %}<circle cx="12" cy="12" r="9"/><path d="M3 12h18"/><path d="M12 3a14 14 0 0 1 0 18a14 14 0 0 1 0-18z"/>
{%- elif name == "bookmark" %}<path d="M6 3h12v18l-6-4-6 4z"/>
{%- elif name == "copy" %}<rect x="8" y="8" width="12" height="12" rx="2"/><path d="M16 8V6a2 2 0 0 0-2-2H6a2 2 0 0 0-2 2v8a2 2 0 0 0 2 2h2"/>
{%- elif name == "indent" %}<path d="M4 6h16M8 12h12M8 18h12M4 10l2 2-2 2"/>
{%- endif -%}
</svg>
{%- endmacro %}

{#- An icon a project gives a view or an action: inline SVG markup, drawn as
    it is, or the address of a picture, which `urls` resolves. Either one
    fills the box `class` sizes, whatever size the markup asks for. -#}
{% macro custom(icon, urls, class="size-4") -%}
<span class="inline-flex shrink-0 items-center justify-center *:size-full {{ class }}" aria-hidden="true">
  {%- if icon.lstrip().startswith("<") %}{{ icon|safe }}
  {%- else %}<img src="{{ urls.asset(icon) }}" alt="">{% endif -%}
</span>
{%- endmacro %}