{# ───────────────────────────────────────────────────────────── Iconos Lucide inline (https://lucide.dev · licencia ISC · v0.460.0) Uso: {% from "core/components/icon.html" import icon, icon_tile %} {{ icon("folder") }} {{ icon("folder", class="w-5 h-5") }} {{ icon("loader-circle", class="w-4 h-4 animate-spin") }} {{ icon("sun", attrs='data-theme-icon="light"') }} {{ icon_tile("folder", tone="brand") }} Los nombres son los del catálogo actual de Lucide. Los nombres antiguos (alert-triangle, check-circle-2, more-vertical, bar-chart…) siguen funcionando vía ICON_ALIASES. Un nombre desconocido pinta circle-alert en vez de romper la plantilla. Añadir un icono: copia el contenido interior del de lucide.dev (misma versión) como nueva entrada de ICONS. ───────────────────────────────────────────────────────────── #} {%- set ICONS = { "activity": '', "archive-restore": '', "arrow-down": '', "arrow-left": '', "arrow-right": '', "arrow-up": '', "arrow-up-down": '', "ban": '', "box": '', "boxes": '', "calendar": '', "chart-column": '', "chart-line": '', "check": '', "chevron-down": '', "chevron-left": '', "chevron-right": '', "chevron-up": '', "chevrons-up-down": '', "circle-alert": '', "circle-check": '', "circle-dashed": '', "circle-help": '', "circle-x": '', "clipboard": '', "clipboard-list": '', "clock": '', "columns-3": '', "command": '', "copy": '', "crosshair": '', "download": '', "ellipsis": '', "ellipsis-vertical": '', "external-link": '', "eye": '', "eye-off": '', "file-check": '', "file-down": '', "file-spreadsheet": '', "file-text": '', "file-up": '', "filter": '', "folder": '', "folder-open": '', "folder-plus": '', "git-branch": '', "git-compare": '', "grid-3x3": '', "hash": '', "history": '', "house": '', "image": '', "image-off": '', "inbox": '', "info": '', "key": '', "layers": '', "layout-dashboard": '', "layout-grid": '', "link": '', "list": '', "loader": '', "loader-circle": '', "lock": '', "log-in": '', "log-out": '', "mail": '', "map": '', "maximize-2": '', "menu": '', "minimize-2": '', "minus": '', "moon": '', "package": '', "package-x": '', "palette": '', "pause": '', "pen-line": '', "pencil": '', "pin": '', "play": '', "plus": '', "power": '', "refresh-ccw": '', "refresh-cw": '', "rocket": '', "rotate-3d": '', "rotate-ccw": '', "rows-3": '', "ruler": '', "save": '', "search": '', "search-x": '', "send": '', "settings": '', "shield-check": '', "sliders-horizontal": '', "sliders-vertical": '', "sparkles": '', "sun": '', "table": '', "tag": '', "timer": '', "trash": '', "trash-2": '', "trending-down": '', "trending-up": '', "triangle-alert": '', "upload": '', "user": '', "user-cog": '', "user-minus": '', "user-plus": '', "users": '', "warehouse": '', "wind": '', "wrench": '', "x": '', "zap": '' } -%} {%- set ICON_ALIASES = { "alert-circle": "circle-alert", "alert-triangle": "triangle-alert", "bar-chart": "chart-column", "bar-chart-2": "chart-column", "bar-chart-3": "chart-column", "check-circle": "circle-check", "check-circle-2": "circle-check", "columns": "columns-3", "edit": "pencil", "edit-3": "pen-line", "grid": "grid-3x3", "help-circle": "circle-help", "home": "house", "line-chart": "chart-line", "loader-2": "loader-circle", "more-horizontal": "ellipsis", "more-vertical": "ellipsis-vertical", "rows": "rows-3", "sliders": "sliders-horizontal", "x-circle": "circle-x" } -%} {#- `loader` gira solo por compatibilidad: los usos existentes no pasan animate-spin. -#} {% macro icon(name, class="w-4 h-4", aria_hidden=true, stroke_width=none, attrs="") -%} {%- set _key = ICON_ALIASES.get(name, name) -%} {%- endmacro %} {#- Icono dentro de un contenedor tintado (cabeceras, filas, estados vacíos). tone: neutral | brand | action | success | warning | danger | info size: sm | md | lg Con `label` el tile se anuncia como imagen; sin él es decorativo. -#} {% macro icon_tile(name, tone="neutral", size="md", label=none) -%} {%- endmacro %}