Die Schaltflächen in der InputAmount-Komponente besitzen derzeit nur ein + und - 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.
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.
Deine Aufgabe ist es, die Schaltflächen in der InputAmount-Komponente durch Icons zu ersetzen.
Installiere zuerst das react-icons-Paket über npm und binde das FaMinus- und
FaPlus-Icon in der InputAmount-Komponente ein.
Wenn du die Icons erfolgreich eingebunden hast, kannst du die Texte - und + 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
aria-label-Attribut für die Schaltflächen, um den Screenreadern eine sinnvolle Beschreibung zu
geben. Alternativ kann auch ein span-Element mit einem sr-only-Klassenattribut hinzugefügt
werden, um den Text für Screenreader unsichtbar zu machen.