plusmoins : ajout d'incônes font awesome

package-lock.json

@@ -8,7 +8,9 @@
       "name": "salaire4",
       "version": "0.0.1",
       "dependencies": {
-        "@floating-ui/dom": "1.5.3"
+        "@floating-ui/dom": "1.5.3",
+        "@fortawesome/free-solid-svg-icons": "^6.4.2",
+        "svelte-fa": "^3.0.4"
       },
       "devDependencies": {
         "@skeletonlabs/skeleton": "2.4.0",
@@ -509,6 +511,27 @@
       "resolved": "https://registry.npmjs.org/@floating-ui/utils/-/utils-0.1.6.tgz",
       "integrity": "sha512-OfX7E2oUDYxtBvsuS4e/jSn4Q9Qb6DzgeYtsAdkPZ47znpoNsMgZw0+tVijiv3uGNR6dgNlty6r9rzIzHjtd/A=="
     },
+    "node_modules/@fortawesome/fontawesome-common-types": {
+      "version": "6.4.2",
+      "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-6.4.2.tgz",
+      "integrity": "sha512-1DgP7f+XQIJbLFCTX1V2QnxVmpLdKdzzo2k8EmvDOePfchaIGQ9eCHj2up3/jNEbZuBqel5OxiaOJf37TWauRA==",
+      "hasInstallScript": true,
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/@fortawesome/free-solid-svg-icons": {
+      "version": "6.4.2",
+      "resolved": "https://registry.npmjs.org/@fortawesome/free-solid-svg-icons/-/free-solid-svg-icons-6.4.2.tgz",
+      "integrity": "sha512-sYwXurXUEQS32fZz9hVCUUv/xu49PEJEyUOsA51l6PU/qVgfbTb2glsTEaJngVVT8VqBATRIdh7XVgV1JF1LkA==",
+      "hasInstallScript": true,
+      "dependencies": {
+        "@fortawesome/fontawesome-common-types": "6.4.2"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/@humanwhocodes/config-array": {
       "version": "0.11.13",
       "resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.11.13.tgz",
@@ -3417,6 +3440,11 @@
         }
       }
     },
+    "node_modules/svelte-fa": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/svelte-fa/-/svelte-fa-3.0.4.tgz",
+      "integrity": "sha512-y04vEuAoV1wwVDItSCzPW7lzT6v1bj/y1p+W1V+NtIMpQ+8hj8MBkx7JFD7JHSnalPU1QiI8BVfguqheEA3nPg=="
+    },
     "node_modules/svelte-hmr": {
       "version": "0.15.3",
       "resolved": "https://registry.npmjs.org/svelte-hmr/-/svelte-hmr-0.15.3.tgz",

package.json

@@ -12,32 +12,34 @@
     "format": "prettier --plugin-search-dir . --write ."
   },
   "devDependencies": {
+    "@skeletonlabs/skeleton": "2.4.0",
+    "@skeletonlabs/tw-plugin": "0.2.3",
     "@sveltejs/adapter-auto": "^2.0.0",
     "@sveltejs/kit": "^1.20.4",
+    "@tailwindcss/forms": "0.5.6",
+    "@tailwindcss/typography": "0.5.10",
+    "@types/node": "20.8.10",
     "@typescript-eslint/eslint-plugin": "^6.0.0",
     "@typescript-eslint/parser": "^6.0.0",
+    "autoprefixer": "10.4.16",
     "eslint": "^8.28.0",
     "eslint-config-prettier": "^8.5.0",
     "eslint-plugin-svelte": "^2.30.0",
+    "postcss": "8.4.31",
     "prettier": "^2.8.0",
     "prettier-plugin-svelte": "^2.10.1",
     "svelte": "^4.0.5",
     "svelte-check": "^3.4.3",
+    "tailwindcss": "3.3.5",
     "tslib": "^2.4.1",
     "typescript": "^5.0.0",
     "vite": "^4.4.2",
-    "postcss": "8.4.31",
+    "vite-plugin-tailwind-purgecss": "0.1.3"
-    "autoprefixer": "10.4.16",
-    "tailwindcss": "3.3.5",
-    "@skeletonlabs/skeleton": "2.4.0",
-    "@skeletonlabs/tw-plugin": "0.2.3",
-    "vite-plugin-tailwind-purgecss": "0.1.3",
-    "@tailwindcss/typography": "0.5.10",
-    "@tailwindcss/forms": "0.5.6",
-    "@types/node": "20.8.10"
   },
   "type": "module",
   "dependencies": {
-    "@floating-ui/dom": "1.5.3"
+    "@floating-ui/dom": "1.5.3",
+    "@fortawesome/free-solid-svg-icons": "^6.4.2",
+    "svelte-fa": "^3.0.4"
   }
 }

src/routes/PlusMoins.svelte

@@ -1,4 +1,7 @@
 <script lang="ts">
+	import Fa from 'svelte-fa';
+	import { faPlus, faMinus } from '@fortawesome/free-solid-svg-icons';
+
 	export let compteur: number = 0;
 
 	function incrementer() {
@@ -21,7 +24,7 @@
 				   hover:bg-surface-100 dark:bg-gray-700 dark:border-gray-600
 				   dark:text-white dark:hover:text-white dark:hover:bg-surface-600"
 		>
-			-
+			<Fa icon={faMinus} />
 		</button>
 		<button
 			type="button"
@@ -38,7 +41,7 @@
 				   hover:bg-surface-100 dark:bg-gray-700 dark:border-gray-600
 			       dark:text-white dark:hover:text-white dark:hover:bg-surface-600"
 		>
-			+
+			<Fa icon={faPlus} />
 		</button>
 	</div>
 	<span class="grow"><slot /></span>