2026-08-06 14:38:46 +02:00
parent 2814319650
commit 2c47aa98b8
1022 changed files with 109709 additions and 1 deletions
--- a/05_react/uebungen/u09_react-icons/index.html
+++ b/05_react/uebungen/u09_react-icons/index.html
@@ -0,0 +1,47 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Übung 9: Icons in React einbinden</title>
+  </head>
+  <body>
+    <div id="root"></div>
+
+    <div class="container py-2">
+      <div class="alert alert-primary">
+        <h2>Übung 9: Icons in React einbinden</h2>
+        <p>
+          Die Schaltflächen in der InputAmount-Komponente besitzen derzeit nur ein <code>+</code> und <code>-</code> in
+          Textform, was optisch ein wenig unschön ist, da das Minuszeichen nicht die gleiche Breite und Dicke wie das
+          Pluszeichen besitzt. Um dies zu verbessern, können wir stattdessen Icons verwenden, die eine einheitliche
+          Darstellung und Größe haben.
+        </p>
+        <p>
+          Das Modul react-icons bietet eine Vielzahl von Icons aus unterschiedlichen Icon-Sets wie Font Awesome,
+          Material Icons und vielen mehr. Die über 40.000 verfügbaren Icons wurden als React-Komponenten definiert und
+          können kostenlos in React-Projekte eingebunden werden.
+        </p>
+        <p>
+          Deine Aufgabe ist es, die Schaltflächen in der <code>InputAmount</code>-Komponente durch Icons zu ersetzen.
+        </p>
+
+        <p>
+          Installiere zuerst das react-icons-Paket über npm und binde das <code>FaMinus</code>- und
+          <code>FaPlus</code>-Icon in der InputAmount-Komponente ein.
+        </p>
+
+        <p>
+          Wenn du die Icons erfolgreich eingebunden hast, kannst du die Texte <code>-</code> und <code>+</code> in den
+          Schaltflächen durch die Icons ersetzen. Zusätzlich sollte darauf geachtet werden, dass Schaltflächen, die nur
+          ein Icon enthalten, für Screenreader einen sinnvollen Alternativtext erhalten sollten. Ergänze ein
+          <code>aria-label</code>-Attribut für die Schaltflächen, um den Screenreadern eine sinnvolle Beschreibung zu
+          geben. Alternativ kann auch ein span-Element mit einem <code>sr-only</code>-Klassenattribut hinzugefügt
+          werden, um den Text für Screenreader unsichtbar zu machen.
+        </p>
+      </div>
+    </div>
+    <script type="module" src="/src/main.jsx"></script>
+  </body>
+</html>