{% load i18n static dcr_icons %}

{% trans "Icon Library" %}

{% trans "Inline SVG icons rendered via the " %}{% templatetag openbrace %}{% templatetag openbrace %} dcr_icon {% templatetag closebrace %}{% templatetag closebrace %}{% trans " template tag. All icons use " %}viewBox="0 0 24 24"{% trans " with no hardcoded dimensions — size them entirely through CSS. Pass an optional " %}css_class{% trans " argument to inject class(es) onto the element." %} {% trans "The tag also accepts an image URL or path — in that case an " %}<img>{% trans " is emitted instead of an SVG, enabling custom logos and brand assets." %}

{% for key in icon_keys %}
{% dcr_icon key "dcr-panel-card__icon" %}
{{ key }}
{% endfor %}

{% trans "Usage" %}

{# Load once at the top of the template #}
{% verbatim %}{% load dcr_icons %}

{# Full  element — no class attribute #}
{% dcr_icon "database" %}

{# Full  element — with one or more CSS classes #}
{% dcr_icon "radio" "dcr-panel-card__icon" %}
{% dcr_icon panel.icon "dcr-page-header__icon my-custom-class" %}

{# Paths only — embed inside your own  to control viewBox and attributes #}

  {% dcr_icon_paths "radio" %}


{# Unknown keys fall back to the "default" grid icon #}
{% dcr_icon "unknown-key" %}

{# Image — emits  instead of  (for custom logos / brand assets) #}

{# Relative static path — resolved via Django staticfiles at render time  #}
{# File lives at: /static/my_panel/images/logo.png                   #}
{% dcr_icon "my_panel/images/logo.png" %}

{# Absolute URL — used as-is #}
{% dcr_icon "https://cdn.example.com/logo.png" %}

{# In panel.py — use icon_color="" for a plain wrap with no background tint #}
class MyPanel(PanelPlugin):
    icon = "my_panel/images/logo.png"
    icon_color = ""  # no background color modifier{% endverbatim %}

{% trans "Icon Color Modifiers" %}

{% trans "Composable color classes for any icon container. Apply " %}dcr-icon-color--<name>{% trans " alongside any sizing class — " %}dcr-panel-card__icon-wrap{% trans " for cards, " %}dcr-page-header__icon{% trans " for page headers, or any custom element. Color cascades to the SVG via " %}currentColor{% trans "." %}

{% trans "Tinted" %}
{% for color in icon_colors %}
{% dcr_icon "database" "dcr-panel-card__icon" %}
{{ color }}
{% endfor %}
{% trans "Solid" %}
{% for color in icon_colors %}
{% dcr_icon "database" "dcr-panel-card__icon" %}
{{ color }}-solid
{% endfor %}

{% trans "Usage" %}

{# Card icon wrap — tinted (default for panel cards) #}
{% verbatim %}

  {% dcr_icon "layers" "dcr-panel-card__icon" %}



{# Page header icon — tinted #}


  {% dcr_icon "radio" %}



{# Page header icon — solid #}


  {% dcr_icon "layers" %}



{# PanelPlugin — set icon_color on the plugin class #}
class MyPanel(PanelPlugin):
    icon = "chart"
    icon_color = "warning"          # tinted
    icon_color = "warning-solid"    # solid
    icon_color = ""                 # plain wrap, no color modifier (e.g. for logo images){% endverbatim %}

{# Tinted variants:  accent · success · warning · danger · info · indigo · purple · muted #}
{# Solid variants:   append -solid to any tinted name, e.g. success-solid               #}
{# No modifier:      icon_color = ""  — plain wrap, useful with custom logo images       #}

{% trans "Image Icons" %}

{% trans "Pass a relative static path or an absolute URL as " %}icon{% trans " to render a custom logo or brand image instead of an SVG. The path is resolved via Django's staticfiles system at render time, so it works correctly regardless of " %}STATIC_URL{% trans " or CDN settings. Set " %}icon_color = \"\"{% trans " for a plain wrap with no background tint — or keep a tint for contrast." %}

{% with logo_url=icon_example_logo_url %}
{% trans "no tint" %}
card
header
{% trans "muted tint" %}
card
header
{% endwith %}

{% trans "panel.py" %}

{% verbatim %}# Place the logo at: my_panel/static/my_panel/images/logo.png
# Django resolves it via staticfiles at render time — STATIC_URL-agnostic.

class MyPanel(PanelPlugin):
    name = "My Panel"
    description = "Integrates with a third-party service"
    icon = "my_panel/images/logo.png"
    icon_color = ""          # plain wrap — no background tint
    # icon_color = "muted"   # subtle grey tint for contrast{% endverbatim %}