Benutzer-Werkzeuge

Webseiten-Werkzeuge


web:drupal:theme:menu-icons

Dies ist eine alte Version des Dokuments!


Menu-Icons

Modul menu_link_attributes installieren und wie folgt konfigurieren:

menu_link_attributes.yaml
 

Theme Hook

Theme Hook für Menu-Entries in der Datei TemplateName.theme bereitstellen und das „formatted Markup“ nach eigenen Wünschen gestalten.

templatename.theme
/** fuer menu_attributes:
 * svg icons als svg sprite bereitstellen
 * passendes sprite auswaehlen
 */
 use Drupal\Component\Render\FormattableMarkup;
 
 /**
  * Implements theme_preprocess_menu().
  */
 function swiftly_preprocess_menu(&$variables, $hook) {
   foreach ($variables['items'] as &$item) {
     $attributes = $item['url']->getOption('attributes');
     if (isset($attributes['data-icon'])) {
       $title = new FormattableMarkup('
        <div class="flex gap-1 items-center">
         <svg class="icon @icon" viewbox="0 0 24 24"><use xlink:href="#@icon"></use></svg>
         <span class="hidden md:block">@title</span>
        </div>
       ', [
         '@title' => $item['title'],
         '@icon' => $attributes['data-icon'],
       ]);
       $item['title'] = $title;
     }
   }
 }
web/drupal/theme/menu-icons.1663161882.txt.gz · Zuletzt geändert: 2022/09/14 13:24 von phoenixseo