05_react/uebungen/u09_react-icons/package-lock.json

@@ -1,16 +1,17 @@
 {
-  "name": "02_reusable-components",
+  "name": "u09_react-icons",
   "version": "0.0.0",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
-      "name": "02_reusable-components",
+      "name": "u09_react-icons",
       "version": "0.0.0",
       "dependencies": {
         "bootstrap": "^5.3.8",
         "react": "^19.2.8",
-        "react-dom": "^19.2.8"
+        "react-dom": "^19.2.8",
+        "react-icons": "^5.7.0"
       },
       "devDependencies": {
         "@types/react": "^19.2.17",
@@ -1622,6 +1623,15 @@
         "react": "^19.2.8"
       }
     },
+    "node_modules/react-icons": {
+      "version": "5.7.0",
+      "resolved": "https://registry.npmjs.org/react-icons/-/react-icons-5.7.0.tgz",
+      "integrity": "sha512-LBLy340Rzqy6+/yVhZKT3B/QpP1BZaesGqasf09HPOBzRarcDIFH0WwXlXQfE7q7ipxK4MSiC5DIBWURCny6fw==",
+      "license": "MIT",
+      "peerDependencies": {
+        "react": "*"
+      }
+    },
     "node_modules/readdirp": {
       "version": "5.1.1",
       "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-5.1.1.tgz",

05_react/uebungen/u09_react-icons/package.json

@@ -12,7 +12,8 @@
   "dependencies": {
     "bootstrap": "^5.3.8",
     "react": "^19.2.8",
-    "react-dom": "^19.2.8"
+    "react-dom": "^19.2.8",
+    "react-icons": "^5.7.0"
   },
   "devDependencies": {
     "@types/react": "^19.2.17",

05_react/uebungen/u09_react-icons/src/components/inputs/InputAmount.jsx

@@ -1,3 +1,5 @@
+import { FaMinus, FaPlus } from 'react-icons/fa6';
+// npm install react-icons  | Auf der npm Seite mit --save, ist nicht mehr nötig
 const InputAmount = (props) => {
   // const { } = props;
 
@@ -5,14 +7,14 @@ const InputAmount = (props) => {
     <div className="m-input-amount input-amount">
       <div className="input-group mb-3">
         <span className="input-group-text">
-          <button className="btn btn-dark button-decrease">
-            -<span className="visually-hidden">Decrease Amount</span>
+          <button className="btn btn-dark button-decrease" aria-label="Decrease Amount">
+            <FaMinus />
           </button>
         </span>
         <input type="number" name="amount" placeholder="0" aria-label="Amount" className="form-control input-amount" />
         <span className="input-group-text">
-          <button className="btn btn-dark button-increase">
-            +<span className="visually-hidden">Increase Amount</span>
+          <button className="btn btn-dark button-increase" aria-label="Increase Amount">
+            <FaPlus />
           </button>
         </span>
       </div>