fix: use icons from carbon-icons-svelte

package.json

@@ -20,7 +20,6 @@
 	},
 	"devDependencies": {
 		"@bonosoft/sveltekit-qrcode": "^0.0.3",
-		"@fontsource/source-sans-pro": "^5.0.4",
 		"@multiformats/multiaddr": "^12.1.3",
 		"@noble/ciphers": "^0.4.0",
 		"@noble/hashes": "^1.3.2",
@@ -39,6 +38,7 @@
 		"@waku/message-encryption": "^0.0.22",
 		"@waku/sdk": "^0.0.20",
 		"@waku/utils": "^0.0.12",
+		"carbon-icons-svelte": "^12.4.2",
 		"copy-to-clipboard": "^3.3.3",
 		"eslint": "^8.44.0",
 		"eslint-config-prettier": "^8.8.0",

src/lib/components/authenticated-only.svelte

@@ -1,21 +1,16 @@
 <script lang="ts">
-	import routes from '$lib/routes'
+	import { ChatBot, Login, UserFollow } from 'carbon-icons-svelte'
+	import type { HDNodeWallet } from 'ethers/lib.commonjs'
 
 	import { profile } from '$lib/stores/profile'
-
 	import { walletStore } from '$lib/stores/wallet'
 
 	import { goto } from '$app/navigation'
-
+	import routes from '$lib/routes'
 	import Button from '$lib/components/button.svelte'
 	import Container from '$lib/components/container.svelte'
 	import Loading from '$lib/components/loading.svelte'
 
-	import ChatBot from '$lib/components/icons/chat-bot.svelte'
-	import Login from '$lib/components/icons/login.svelte'
-	import UserFollow from '$lib/components/icons/user-follow.svelte'
-	import type { HDNodeWallet } from 'ethers/lib.commonjs'
-
 	$: wallet = $walletStore.wallet
 
 	interface $$Slots {

src/lib/components/chat-object-invite.svelte

@@ -1,4 +1,6 @@
 <script lang="ts">
+	import { CheckmarkFilled, Checkmark, Pending } from 'carbon-icons-svelte'
+
 	import adapters from '$lib/adapters'
 	import routes from '$lib/routes'
 	import type { InstallMessage, WithMeta } from '$lib/stores/chat'
@@ -7,14 +9,11 @@
 	import Button from './button.svelte'
 	import ChatMessage from './chat-message.svelte'
 	import Container from './container.svelte'
-	import CheckmarkFilled from './icons/checkmark-filled.svelte'
 	import Loading from './loading.svelte'
 	import ObjectInstallInfo from './object-install-info.svelte'
 
 	import { goto } from '$app/navigation'
 	import { hashString } from '$lib/adapters/waku/crypto'
-	import Checkmark from './icons/checkmark.svelte'
-	import Pending from './icons/pending.svelte'
 
 	//am I the sender of this message?
 	export let myMessage = false

src/lib/components/dicebear.svelte

@@ -1,13 +1,13 @@
 <script lang="ts">
-	import User from './icons/user.svelte'
+	import { User } from 'carbon-icons-svelte'
 
 	export let seed: string
 	export let size = 48
 	export let style = 'bottts-neutral'
 	export let scale = 75
 	export let radius = 50
 
-	const avatarSize = size / 2
+	const avatarSize = (size / 2) as any // FIXME: the carbon design icons have native sizes 15, 20, 24 and 32. We should stick to those
 </script>
 
 {#if style === 'user'}