Unterschiede

Hier werden die Unterschiede zwischen zwei Versionen der Seite angezeigt.

--- web:drupal:theme:menu-icons [2022/09/14 13:01] – phoenixseo
+++ web:drupal:theme:menu-icons [2022/09/15 17:36] (aktuell) – phoenixseo
@@ Zeile 1: / Zeile 1: @@
 ====== Menu-Icons ======
-===== Modul "menu_attributes" =====
+===== Modul "menu_link_attributes" =====
-Modul menu_attributes installieren und wie folgt konfigurieren:
+Modul [[https://www.drupal.org/project/menu_link_attributes|menu_link_attributes]] installieren und wie folgt konfigurieren:
-<file menu_attributes.yaml>
+<file yaml 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: ''
 </file>
@@ Zeile 11: / Zeile 37: @@
 ===== Theme Hook =====
-Theme Hook für Menu-Entries in der Datei TemplateName.theme bereitstellen und das "formatted Markup" nach eigenen Wünschen gestalten. Im Beispiel kommt Tailwind CSS zum Tragen.
+Theme Hook für Menu-Entries in der Datei TemplateName.theme bereitstellen und das "FormattableMarkup" nach eigenen Wünschen gestalten.
-<file type="php" templatename.theme>
+<file php templatename.theme>
-/** fuer menu_attributes:
+/** fuer menu_link_attributes:
  * svg icons als svg sprite bereitstellen
  * passendes sprite auswaehlen
+ * svg in page.html.twig
  */
  use Drupal\Component\Render\FormattableMarkup;
@@ Zeile 29: / Zeile 56: @@
        $title = new FormattableMarkup('
         <div class="flex gap-1 items-center">
-         <svg class="icon @icon w-8 hover:fill-onyx" viewbox="0 0 24 24"><use xlink:href="#@icon"></use></svg>
+         <svg class="icon @icon" viewbox="0 0 24 24"><use xlink:href="#@icon"></use></svg>
          <span class="hidden md:block">@title</span>
         </div>
@@ Zeile 41: / Zeile 68: @@
  }
 </file>
+===== 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.
+<file php 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>
+</file>
+===== CSS Style =====
+Die SVG Sprites lassen sich beliebig mit CSS stylen, z.B.: (Tailwind CSS)
+<file css menu_link_attributes.css>
+/* menu-icons (menu_link_attributes) */
+.icon {
+  @apply w-6 fill-transparent stroke-onyx hover:stroke-lava;
+}
+</file>