Merge pull request #108 from Discusser/feature/use-tabler-icons

redo #102

package.json

@@ -45,6 +45,7 @@
 		"@auth/core": "^0.37.0",
 		"@auth/sveltekit": "^1.7.0",
 		"@prisma/client": "5.21.1",
+		"@tabler/icons-svelte": "^3.20.0",
 		"clsx": "^2.1.1",
 		"formsnap": "^1.0.1",
 		"mode-watcher": "^0.4.1",

src/lib/components/Index/CTA.svelte

@@ -1,8 +1,9 @@
 <script lang="ts">
 	import { Button } from '$lib/components/ui/button';
-	import { GitPullRequestCreate, UserPen, Github, LogOut } from 'lucide-svelte';
-	import { signIn, signOut } from '@auth/sveltekit/client';
+	import { UserPen } from 'lucide-svelte';
+	import { signIn } from '@auth/sveltekit/client';
 	import { page } from '$app/stores';
+	import { IconBrandGithub } from '@tabler/icons-svelte';
 </script>
 
 <div>
@@ -39,7 +40,7 @@
 					>
 				{:else}
 					<Button on:click={() => signIn('github')} class="flex items-center space-x-2"
-						><Github /> <span>Sign in with Github</span></Button
+						><IconBrandGithub /> <span>Sign in with Github</span></Button
 					>
 					<Button
 						href="https://discord.gg/9XuRcaZR"

src/lib/components/Index/Hero.svelte

@@ -1,10 +1,11 @@
 <script lang="ts">
 	import { Button } from '$lib/components/ui/button';
-	import { Loader2, UserPen, Github, LogOut } from 'lucide-svelte';
+	import { Loader2, UserPen } from 'lucide-svelte';
 	import { signIn } from '@auth/sveltekit/client';
 	import { page } from '$app/stores';
 	import { onMount } from 'svelte';
 	import { getReleaseVersion } from '$lib/utils/getReleaseVersion';
+	import { IconBrandGithub } from '@tabler/icons-svelte';
 
 	// undefined means that we haven't received the result from getReleaseVersion
 	// null means that getReleaseVersion couldn't find the release version
@@ -81,7 +82,7 @@
 					>
 				{:else}
 					<Button on:click={() => signIn('github')} class="flex items-center space-x-2"
-						><Github /> <span>Sign in with Github</span></Button
+						><IconBrandGithub /> <span>Sign in with Github</span></Button
 					>
 					<Button
 						href="https://discord.gg/9XuRcaZR"

src/lib/components/MyProfile/SocialsForm.svelte

@@ -47,9 +47,10 @@
 					<Select.Content>
 						{#each socials as social}
 							<Select.Item value={social.name}>
-								<span class="flex flex-row items-center justify-center gap-4"
-									>{@html social.svg}{social.name}</span
-								>
+								<div class="flex flex-row items-center justify-center gap-4">
+									<svelte:component this={social.icon} />
+									<span>{social.name}</span>
+								</div>
 							</Select.Item>
 						{/each}
 					</Select.Content>

src/lib/components/MyProfile/UserSettings.svelte

@@ -3,10 +3,11 @@
 	import { Button } from '$lib/components/ui/button';
 	import { copyToClipboard } from '$lib/utils/copyToClipboard';
 	import { confirmDelete } from '$lib/utils/confirmDelete';
-	import { ArrowUpRight, Trash2, CircleChevronDown, Github, Copy, AudioLines } from 'lucide-svelte';
+	import { ArrowUpRight, Trash2, CircleChevronDown, Copy, AudioLines } from 'lucide-svelte';
 
 	import { enhance } from '$app/forms';
 	import type { PageData } from '../../../routes/profile/$types';
+	import { IconBrandGithub } from '@tabler/icons-svelte';
 
 	export let data: PageData;
 </script>
@@ -15,24 +16,26 @@
 	<div class="flex flex-row space-x-2">
 		{#if data.spotifyToken}
 			<form action="?/unlinkSpotify" method="POST" use:enhance>
-				<Button variant="destructive" type="submit"
-					><AudioLines class="mr-2" /> Unlink Spotify</Button
-				>
+				<Button variant="destructive" type="submit">
+					<AudioLines class="mr-2" />
+					<span>Unlink Spotify</span>
+				</Button>
 			</form>
 		{:else}
-			<Button href="/api/spotify/login"
-				><AudioLines class="mr-2 text-green-700" /> Link Spotify</Button
-			>
+			<Button href="/api/spotify/login">
+				<AudioLines class="mr-2 text-green-700" />
+				<span>Link Spotify</span>
+			</Button>
 		{/if}
 		<form action="?/updateOpenToCollaborating" method="POST" use:enhance>
 			{#if data.userData.openToCollaborating}
 				<Button variant="destructive" type="submit">
-					<Github class="mr-2" />
+					<IconBrandGithub class="mr-2" />
 					<span>Disallow Collaborations</span>
 				</Button>
 			{:else}
 				<Button type="submit">
-					<Github class="mr-2" />
+					<IconBrandGithub class="mr-2" />
 					<span>Allow Collaborations</span>
 				</Button>
 			{/if}

src/lib/components/MyProfile/UserSocials.svelte

@@ -6,15 +6,17 @@
 
 	import type { Social } from '@prisma/client';
 	import { copyToClipboard } from '$lib/utils/copyToClipboard';
-	import { findSocialSvg } from '$lib/utils/findSocialSvg';
+	import { findSocialIcon } from '$lib/utils/findSocialIcon';
 
 	export let socials: Social[];
 </script>
 
 <div class="grid gap-4">
 	{#each socials as social}
 		<div class="flex items-center gap-4">
-			<span class="flex items-center">{@html findSocialSvg(social.social)}</span>
+			<span class="flex items-center">
+				<svelte:component this={findSocialIcon(social.social)} />
+			</span>
 
 			<div class="flex flex-row items-center gap-4">
 				<p class="text-sm font-medium leading-none">{social.social}</p>

src/lib/components/PublicProfile/Socials.svelte

@@ -1,12 +1,12 @@
 <script lang="ts">
-	import { IdCard, Twitter } from 'lucide-svelte';
-	import GitHub from 'lucide-svelte/icons/github';
+	import { IdCard } from 'lucide-svelte';
 	import * as Table from '$lib/components/ui/table';
 	import type { GithubData } from '$lib/types/GithubData';
 	import { Skeleton } from '$lib/components/ui/skeleton';
 	import type { Social } from '@prisma/client';
-	import { findSocialSvg } from '$lib/utils/findSocialSvg';
+	import { findSocialIcon } from '$lib/utils/findSocialIcon';
 	import { handleSocialClick } from '$lib/utils/handleSocialClick';
+	import { IconBrandGithub, IconBrandTwitter } from '@tabler/icons-svelte';
 
 	export let githubData: GithubData | null;
 	export let socials: Social[] = [];
@@ -24,7 +24,7 @@
 			<Table.Row>
 				<Table.Cell class="p-0">
 					<a class="flex items-center space-x-8 p-4" href={githubData?.url ?? '#'} target="_blank">
-						<GitHub />
+						<IconBrandGithub />
 						<span>GitHub Profile</span>
 					</a>
 				</Table.Cell>
@@ -55,7 +55,7 @@
 							href={`https://x.com/${githubData?.twitter}`}
 							target="_blank"
 						>
-							<Twitter />
+							<IconBrandTwitter />
 							<span>Twitter Profile</span>
 						</a>
 					</Table.Cell>
@@ -65,7 +65,7 @@
 				<Table.Row>
 					<Table.Cell class="p-0 hover:cursor-pointer" on:click={() => handleSocialClick(social)}>
 						<span class="flex items-center space-x-8 p-4">
-							{@html findSocialSvg(social.social)}
+							<svelte:component this={findSocialIcon(social.social)} />
 							<span>{social.social}</span>
 						</span>
 					</Table.Cell>

src/lib/constants/socials.ts

@@ -3,30 +3,38 @@
 
 //If the user should be redirected to a profile, make redirect true if not make redirect false and it will copy the contents to the clipboard
 
+import {
+	IconBrandDiscordFilled,
+	IconBrandLinkedin,
+	IconBrandTelegram,
+	IconBrandGitlab,
+	IconBrandSpotifyFilled
+} from '@tabler/icons-svelte';
+
 export const socials = [
 	{
 		name: 'Discord',
-		svg: '<svg  xmlns="http://www.w3.org/2000/svg"  width="24"  height="24"  viewBox="0 0 24 24"  fill="currentColor"  class="icon icon-tabler icons-tabler-filled icon-tabler-brand-discord"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M14.983 3l.123 .006c2.014 .214 3.527 .672 4.966 1.673a1 1 0 0 1 .371 .488c1.876 5.315 2.373 9.987 1.451 12.28c-1.003 2.005 -2.606 3.553 -4.394 3.553c-.732 0 -1.693 -.968 -2.328 -2.045a21.512 21.512 0 0 0 2.103 -.493a1 1 0 1 0 -.55 -1.924c-3.32 .95 -6.13 .95 -9.45 0a1 1 0 0 0 -.55 1.924c.717 .204 1.416 .37 2.103 .494c-.635 1.075 -1.596 2.044 -2.328 2.044c-1.788 0 -3.391 -1.548 -4.428 -3.629c-.888 -2.217 -.39 -6.89 1.485 -12.204a1 1 0 0 1 .371 -.488c1.439 -1.001 2.952 -1.459 4.966 -1.673a1 1 0 0 1 .935 .435l.063 .107l.651 1.285l.137 -.016a12.97 12.97 0 0 1 2.643 0l.134 .016l.65 -1.284a1 1 0 0 1 .754 -.54l.122 -.009zm-5.983 7a2 2 0 0 0 -1.977 1.697l-.018 .154l-.005 .149l.005 .15a2 2 0 1 0 1.995 -2.15zm6 0a2 2 0 0 0 -1.977 1.697l-.018 .154l-.005 .149l.005 .15a2 2 0 1 0 1.995 -2.15z" /></svg>',
+		icon: IconBrandDiscordFilled,
 		redirect: false
 	},
 	{
 		name: 'LinkedIn',
-		svg: '<svg  xmlns="http://www.w3.org/2000/svg"  width="24"  height="24"  viewBox="0 0 24 24"  fill="none"  stroke="currentColor"  stroke-width="2"  stroke-linecap="round"  stroke-linejoin="round"  class="icon icon-tabler icons-tabler-outline icon-tabler-brand-linkedin"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M4 4m0 2a2 2 0 0 1 2 -2h12a2 2 0 0 1 2 2v12a2 2 0 0 1 -2 2h-12a2 2 0 0 1 -2 -2z" /><path d="M8 11l0 5" /><path d="M8 8l0 .01" /><path d="M12 16l0 -5" /><path d="M16 16v-3a2 2 0 0 0 -4 0" /></svg>',
+		icon: IconBrandLinkedin,
 		redirect: true
 	},
 	{
 		name: 'Telegram',
-		svg: '<svg  xmlns="http://www.w3.org/2000/svg"  width="24"  height="24"  viewBox="0 0 24 24"  fill="none"  stroke="currentColor"  stroke-width="2"  stroke-linecap="round"  stroke-linejoin="round"  class="icon icon-tabler icons-tabler-outline icon-tabler-brand-telegram"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M15 10l-4 4l6 6l4 -16l-18 7l4 2l2 6l3 -4" /></svg>',
+		icon: IconBrandTelegram,
 		redirect: false
 	},
 	{
 		name: 'Spotify',
-		svg: '<svg  xmlns="http://www.w3.org/2000/svg"  width="24"  height="24"  viewBox="0 0 24 24"  fill="currentColor"  class="icon icon-tabler icons-tabler-filled icon-tabler-brand-spotify"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M17 3.34a10 10 0 1 1 -15 8.66l.005 -.324a10 10 0 0 1 14.995 -8.336m-2.168 11.605c-1.285 -1.927 -4.354 -2.132 -6.387 -.777a1 1 0 0 0 1.11 1.664c1.195 -.797 3.014 -.675 3.613 .223a1 1 0 1 0 1.664 -1.11m1.268 -3.245c-2.469 -1.852 -5.895 -2.187 -8.608 -.589a1 1 0 0 0 1.016 1.724c1.986 -1.171 4.544 -.92 6.392 .465a1 1 0 0 0 1.2 -1.6m1.43 -3.048c-3.677 -2.298 -7.766 -2.152 -10.977 -.546a1 1 0 0 0 .894 1.788c2.635 -1.317 5.997 -1.437 9.023 .454a1 1 0 1 0 1.06 -1.696" /></svg>',
+		icon: IconBrandSpotifyFilled,
 		redirect: true
 	},
 	{
 		name: 'Gitlab',
-		svg: '<svg  xmlns="http://www.w3.org/2000/svg"  width="24"  height="24"  viewBox="0 0 24 24"  fill="none"  stroke="currentColor"  stroke-width="2"  stroke-linecap="round"  stroke-linejoin="round"  class="icon icon-tabler icons-tabler-outline icon-tabler-brand-gitlab"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M21 14l-9 7l-9 -7l3 -11l3 7h6l3 -7z" /></svg>',
+		icon: IconBrandGitlab,
 		redirect: true
 	}
 ];

src/lib/utils/findSocialIcon.ts

@@ -0,0 +1,7 @@
+import { socials as socialIcons } from '$lib/constants/socials';
+import { IconQuestionMark } from '@tabler/icons-svelte';
+
+export const findSocialIcon = (socialName: string) => {
+	const social = socialIcons.find((s) => s.name.toLowerCase() === socialName.toLowerCase());
+	return social ? social.icon : IconQuestionMark;
+};