web:drupal:theme:menu-icons
Dies ist eine alte Version des Dokuments!
Inhaltsverzeichnis
Menu-Icons
Modul "menu_link_attributes"
Modul menu_link_attributes installieren und wie folgt konfigurieren:
- menu_link_attributes.yaml
attributes: class: label: '' description: '' data-icon: label: Menu-Icon description: 'Set an Icon for this menu-entry.' options: icon-academic-cap: Academic-Cap icon-newspaper: Newspaper icon-pencil: Pencil icon-at-symbol: at-Symbol default_value: '' target: label: '' description: '' options: _blank: 'New window (_blank)' _self: 'Same window (_self)' default_value: '' rel: label: Rel-Attribute description: 'Rel(ation) Attribute festlegen' options: nofollow: nofollow default_value: ''
Theme Hook
Theme Hook für Menu-Entries in der Datei TemplateName.theme bereitstellen und das „FormattableMarkup“ nach eigenen Wünschen gestalten.
- templatename.theme
/** fuer menu_link_attributes: * svg icons als svg sprite bereitstellen * passendes sprite auswaehlen * svg in page.html.twig */ 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; } } }
SVG Sprites
Die SVG-Icons als SVG Sprites in der Datei page.html.twig (immer verfügbar) bereitstellen, einfach unten anfügen. Die Icons selbst sind in diesem Fall von heroicons.com.
- page.twig
<svg class="hidden"> <defs> <g id="icon-newspaper"> <path stroke-linecap="round" stroke-linejoin="round" d="M12 7.5h1.5m-1.5 3h1.5m-7.5 3h7.5m-7.5 3h7.5m3-9h3.375c.621 0 1.125.504 1.125 1.125V18a2.25 2.25 0 01-2.25 2.25M16.5 7.5V18a2.25 2.25 0 002.25 2.25M16.5 7.5V4.875c0-.621-.504-1.125-1.125-1.125H4.125C3.504 3.75 3 4.254 3 4.875V18a2.25 2.25 0 002.25 2.25h13.5M6 7.5h3v3H6v-3z" /> </g> <g id="icon-academic-cap"> <path stroke-linecap="round" stroke-linejoin="round" d="M4.26 10.147a60.436 60.436 0 00-.491 6.347A48.627 48.627 0 0112 20.904a48.627 48.627 0 018.232-4.41 60.46 60.46 0 00-.491-6.347m-15.482 0a50.57 50.57 0 00-2.658-.813A59.905 59.905 0 0112 3.493a59.902 59.902 0 0110.399 5.84c-.896.248-1.783.52-2.658.814m-15.482 0A50.697 50.697 0 0112 13.489a50.702 50.702 0 017.74-3.342M6.75 15a.75.75 0 100-1.5.75.75 0 000 1.5zm0 0v-3.675A55.378 55.378 0 0112 8.443m-7.007 11.55A5.981 5.981 0 006.75 15.75v-1.5" /> </g> </defs> </svg>
web/drupal/theme/menu-icons.1663162347.txt.gz · Zuletzt geändert: 2022/09/14 13:32 von phoenixseo