From bd191cd42049624266668fc5ab474aeaad1a3603 Mon Sep 17 00:00:00 2001 From: Julian Lobbes Date: Mon, 22 May 2023 12:16:41 +0200 Subject: [PATCH] refactor(frontend): replace SVG icons with components --- frontend/README.md | 10 ++++++++ frontend/package-lock.json | 34 ++++++++++++++++++++++++++ frontend/package.json | 1 + frontend/src/routes/users/+page.svelte | 21 ++++++---------- 4 files changed, 53 insertions(+), 13 deletions(-) create mode 100644 frontend/README.md diff --git a/frontend/README.md b/frontend/README.md new file mode 100644 index 0000000..739c3b8 --- /dev/null +++ b/frontend/README.md @@ -0,0 +1,10 @@ +# Frontend + +Sveltekit and TailwindCSS. + +## Development + +Used libraries: + +- [svelte-hero-icons](https://github.com/JustinVoitel/svelte-hero-icons) + - uses icons from [heroicons](https://heroicons.com/) diff --git a/frontend/package-lock.json b/frontend/package-lock.json index 686399f..964f7d9 100644 --- a/frontend/package-lock.json +++ b/frontend/package-lock.json @@ -18,6 +18,7 @@ "sass": "^1.62.1", "svelte": "^3.54.0", "svelte-check": "^3.0.1", + "svelte-hero-icons": "^5.0.0", "svelte-material-ui": "^7.0.0-beta.8", "tailwindcss": "^3.3.2", "tslib": "^2.4.1", @@ -1904,6 +1905,12 @@ "svelte2tsx": "^0.6.10" } }, + "node_modules/@steeze-ui/heroicons": { + "version": "2.2.2", + "resolved": "https://registry.npmjs.org/@steeze-ui/heroicons/-/heroicons-2.2.2.tgz", + "integrity": "sha512-VUkgSAbjLzsEuF4kDQDESANb/NNxqhkOMnrzD1VhB3tSGr7wVZ5FKS7aM2QZcKXjziwR6dbt7Nhs3fpZhqOi1A==", + "dev": true + }, "node_modules/@sveltejs/adapter-node": { "version": "1.2.4", "resolved": "https://registry.npmjs.org/@sveltejs/adapter-node/-/adapter-node-1.2.4.tgz", @@ -3509,6 +3516,18 @@ "svelte": "^3.55.0" } }, + "node_modules/svelte-hero-icons": { + "version": "5.0.0", + "resolved": "https://registry.npmjs.org/svelte-hero-icons/-/svelte-hero-icons-5.0.0.tgz", + "integrity": "sha512-xKMI/Z0f/6831I0R1YKJjVbAw9VBD6XKysvng6LtomlS4n3ZD1lZNAfLrrCmnc1pmiLr/8sVeQA8kgHLQwYlRg==", + "dev": true, + "dependencies": { + "@steeze-ui/heroicons": "^2.2.2" + }, + "engines": { + "node": ">=14.0.0" + } + }, "node_modules/svelte-hmr": { "version": "0.15.1", "resolved": "https://registry.npmjs.org/svelte-hmr/-/svelte-hmr-0.15.1.tgz", @@ -5516,6 +5535,12 @@ "svelte2tsx": "^0.6.10" } }, + "@steeze-ui/heroicons": { + "version": "2.2.2", + "resolved": "https://registry.npmjs.org/@steeze-ui/heroicons/-/heroicons-2.2.2.tgz", + "integrity": "sha512-VUkgSAbjLzsEuF4kDQDESANb/NNxqhkOMnrzD1VhB3tSGr7wVZ5FKS7aM2QZcKXjziwR6dbt7Nhs3fpZhqOi1A==", + "dev": true + }, "@sveltejs/adapter-node": { "version": "1.2.4", "resolved": "https://registry.npmjs.org/@sveltejs/adapter-node/-/adapter-node-1.2.4.tgz", @@ -6650,6 +6675,15 @@ "typescript": "^5.0.3" } }, + "svelte-hero-icons": { + "version": "5.0.0", + "resolved": "https://registry.npmjs.org/svelte-hero-icons/-/svelte-hero-icons-5.0.0.tgz", + "integrity": "sha512-xKMI/Z0f/6831I0R1YKJjVbAw9VBD6XKysvng6LtomlS4n3ZD1lZNAfLrrCmnc1pmiLr/8sVeQA8kgHLQwYlRg==", + "dev": true, + "requires": { + "@steeze-ui/heroicons": "^2.2.2" + } + }, "svelte-hmr": { "version": "0.15.1", "resolved": "https://registry.npmjs.org/svelte-hmr/-/svelte-hmr-0.15.1.tgz", diff --git a/frontend/package.json b/frontend/package.json index b6e5f7c..2ddbf3b 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -17,6 +17,7 @@ "sass": "^1.62.1", "svelte": "^3.54.0", "svelte-check": "^3.0.1", + "svelte-hero-icons": "^5.0.0", "svelte-material-ui": "^7.0.0-beta.8", "tailwindcss": "^3.3.2", "tslib": "^2.4.1", diff --git a/frontend/src/routes/users/+page.svelte b/frontend/src/routes/users/+page.svelte index 1ac5394..674068d 100644 --- a/frontend/src/routes/users/+page.svelte +++ b/frontend/src/routes/users/+page.svelte @@ -1,5 +1,9 @@