{# # ============================================================================ # ATOM: ICON # ============================================================================ # # Composant wrapper pour les icônes SVG avec tailles et couleurs standardisées. # Supporte les icônes duotone avec deux couleurs personnalisables. # # Sources: # - Solar Icons (bold-duotone) pour les icônes standard # - Icônes Bubul personnalisées pour les produits # - Legacy icons dans _atoms/icons/solar/ # # ============================================================================ # PARAMÈTRES # ============================================================================ # # | Paramètre | Type | Défaut | Description | # |-----------------|---------|-----------|-----------------------------------| # | name | string | (requis) | Nom de l'icône (sans extension) | # | size | string | 'md' | Taille: xs, sm, md, lg, xl...6xl | # | color | string | 'current' | Couleur unique (les deux couches) | # | colorPrimary | string | null | Couleur couche primaire (duotone) | # | colorSecondary | string | null | Couleur couche secondaire | # | opacitySecondary| string | '0.3' | Opacité couche secondaire | # | class | string | '' | Classes additionnelles | # # ============================================================================ # ICÔNES SOLAR BOLD-DUOTONE (70) # ============================================================================ # # Navigation: arrow-down, arrow-left, arrow-right, arrow-up, chevron-left, # chevron-right, chevrons-left, chevrons-right, home, search # Actions: check, check-circle, close, x, plus, minus, edit, trash, # download, upload, refresh, eye, lock, unlock, logout, settings, exit, share # Feedback: alert, help, info, warning, dialog # Énergie: bolt, lightbulb-bolt, power # Utilisateurs: user, user-add, user-id, user-plus, users, users-group, users-group-two # Contenu: book, file-text, calendar, document, folder, inbox, list # Communication: bell, mail, message, chat, send # Business: buildings, presentation-graph, chart, wallet, cart, target # Tech: cloud, server, shield # Divers: clock, crown, fire, gift, heart, key, monalisia, power, rocket, star, # token, widget-add, home-smile # # ============================================================================ # ALIAS BUBUL (10) → Solar Icons (préfixe bubul-) # ============================================================================ # # bubul-moodia → widget-add # bubul-serenia → chat # bubul-slidia → presentation-graph # bubul-monalisia → monalisia # bubul-sam → user-id # bubul-scormia → scormia # bubul-dashboard → home-smile # bubul-entreprise → buildings # bubul-utilisateur → users-group-two # bubul-contrat → file-text # # ============================================================================ # ICÔNE BUBUL PERSONNALISÉE # ============================================================================ # # bubul-logo → Logo simplifié Bubul (sidebar, favicon) # # ============================================================================ # EXEMPLES D'UTILISATION # ============================================================================ # # Icône simple: # {% include '_atoms/icon/icon.html.twig' with { name: 'check' } %} # # Icône avec taille et couleur: # {% include '_atoms/icon/icon.html.twig' with { # name: 'user', # size: 'lg', # color: 'primary' # } %} # # Icône duotone avec deux couleurs: # {% include '_atoms/icon/icon.html.twig' with { # name: 'bubul-moodia', # size: 'xl', # colorPrimary: 'primary', # colorSecondary: 'gray' # } %} # # Icône duotone avec opacité personnalisée: # {% include '_atoms/icon/icon.html.twig' with { # name: 'bubul-dashboard', # colorPrimary: 'success', # colorSecondary: 'success', # opacitySecondary: '0.5' # } %} # # ============================================================================ #} {# ============================================================================ CONFIGURATION DES VALEURS PAR DÉFAUT ============================================================================ #} {% set name = name ?? null %} {% set size = size ?? 'md' %} {% set color = color ?? 'current' %} {% set colorPrimary = colorPrimary ?? null %} {% set colorSecondary = colorSecondary ?? null %} {% set opacitySecondary = opacitySecondary ?? '0.3' %} {% set class = class ?? '' %} {# ============================================================================ LISTE DES ICÔNES PAR SOURCE ============================================================================ #} {% set solarIcons = [ 'alert', 'arrow-down', 'arrow-left', 'arrow-right', 'arrow-up', 'bell', 'bolt', 'book', 'book-open', 'bubul-logo', 'buildings', 'calendar', 'cart', 'chart', 'chat', 'gift', 'check', 'check-circle', 'chevron-down', 'chevron-left', 'chevron-right', 'chevrons-left', 'chevrons-right', 'clock', 'close', 'cloud', 'copy', 'crown', 'dialog', 'document', 'dots-vertical', 'download', 'earth', 'edit', 'exit', 'eye', 'file-text', 'fire', 'folder', 'heart', 'grid', 'help', 'home', 'home-smile', 'inbox', 'info', 'key', 'lightbulb-bolt', 'link', 'list', 'lock', 'logout', 'magic-stick', 'mail', 'menu', 'message', 'microphone', 'minus', 'monalisia', 'castia', 'palette-2', 'phone', 'pin', 'pixia', 'plus', 'power', 'presentation-graph', 'refresh', 'rocket', 'scormia', 'search', 'send', 'server', 'settings', 'share', 'shield', 'sort', 'soundwave', 'star', 'target', 'token', 'trash', 'unlock', 'upload', 'user', 'user-add', 'user-id', 'user-plus', 'users', 'users-group', 'users-group-two', 'wallet', 'warning', 'widget-add', 'x' ] %} {# Alias Bubul → Solar Icons #} {% set bubulAliases = { 'bubul-moodia': 'widget-add', 'bubul-serenia': 'chat', 'bubul-slidia': 'presentation-graph', 'bubul-monalisia': 'monalisia', 'bubul-castia': 'castia', 'bubul-sam': 'user-id', 'bubul-pixia': 'pixia', 'bubul-promptly': 'book-open', 'bubul-scormia': 'scormia', 'bubul-dashboard': 'home-smile', 'bubul-entreprise': 'buildings', 'bubul-utilisateur': 'users-group-two', 'bubul-contrat': 'file-text' } %} {% set bubulIcons = bubulAliases|keys %} {# ============================================================================ MAPPING TAILLES → PIXELS ============================================================================ #} {% set sizeMap = { 'xs': 12, 'sm': 16, 'md': 20, 'lg': 24, 'xl': 32, '2xl': 40, '3xl': 48, '4xl': 56, '5xl': 72, '6xl': 96 } %} {# ============================================================================ MAPPING COULEURS ============================================================================ #} {% set colorMap = { 'current': 'currentColor', 'primary': 'var(--color-primary)', 'primary-dark': 'var(--color-primary-dark)', 'secondary': 'var(--color-secondary)', 'success': 'var(--color-success)', 'success-dark': 'var(--color-success-dark)', 'error': 'var(--color-error)', 'error-dark': 'var(--color-error-dark)', 'warning': 'var(--color-warning)', 'warning-dark': 'var(--color-warning-dark)', 'info': 'var(--color-info)', 'cohorts': 'var(--color-cohorts)', 'moodia': 'var(--color-primary)', 'serenia': 'var(--color-cohorts)', 'slidia': 'var(--color-warning)', 'monalisia': 'var(--color-pink)', 'pink': 'var(--color-pink)', 'castia': 'var(--color-success)', 'pixia': 'var(--color-pixia)', 'sam': 'var(--color-info)', 'white': '#ffffff', 'black': '#000000', 'gray': '#6B7280' } %} {# ============================================================================ CLASSES TAILWIND POUR LA COULEUR (text-*) ============================================================================ #} {% set colorClasses = { 'current': 'text-current', 'primary': 'text-primary', 'secondary': 'text-secondary', 'success': 'text-success', 'error': 'text-error', 'warning': 'text-warning', 'info': 'text-info', 'cohorts': 'text-cohorts', 'moodia': 'text-primary', 'serenia': 'text-cohorts', 'slidia': 'text-warning', 'monalisia': 'text-pink', 'pink': 'text-pink', 'castia': 'text-success', 'pixia': 'text-pixia', 'sam': 'text-info', 'white': 'text-white', 'black': 'text-black', 'gray': 'text-gray-500' } %} {# ============================================================================ RENDU HTML ============================================================================ #} {% if name %} {# Résoudre les alias Bubul vers Solar #} {% set isBubul = name in bubulIcons %} {% set resolvedName = isBubul ? bubulAliases[name] : name %} {% set isSolar = resolvedName in solarIcons %} {% if isSolar %} {% set iconPath = '_atoms/icon/solar/' ~ resolvedName ~ '.html.twig' %} {% endif %} {% if iconPath is defined %} {# Résoudre les couleurs #} {# La table de couleurs des outils ci-dessus fige un doublon de la table `tool` : changer une couleur en base restait sans effet sur les icônes, qui gardaient la teinte codée ici. On interroge donc d'abord `tool_color_details`, alimenté par la base, et la table locale ne sert plus que de repli — pour les teintes qui ne correspondent à aucun outil (success, error, white…) ou hors contexte web. #} {% set toolColors = tool_color_details is defined ? tool_color_details : {} %} {% set resolvedColor = (toolColors[color] ?? {}).primary ?? colorMap[color] ?? 'currentColor' %} {% set resolvedColorPrimary = colorPrimary ? ((toolColors[colorPrimary] ?? {}).primary ?? colorMap[colorPrimary] ?? colorPrimary) : null %} {% set resolvedColorSecondary = colorSecondary ? ((toolColors[colorSecondary] ?? {}).secondary ?? colorMap[colorSecondary] ?? colorSecondary) : null %} {# Déterminer la classe de couleur pour le span conteneur #} {% set containerColorClass = colorPrimary ? '' : (colorClasses[color] ?? 'text-current') %} {% endif %} {% endif %}