feat: expose class on all components (#23)

src/lib/components/avatar.svelte

@@ -1,10 +1,12 @@
 <script lang="ts">
 	import defaultAvatar from '$lib/assets/default-avatar.png'
 
+	let cls: string | undefined = undefined
+	export { cls as class }
 	export let src: string = defaultAvatar
 </script>
 
-<img class="root" {src} alt="Avatar" />
+<img class={`root ${cls}`} {src} alt="Avatar" />
 
 <style>
 	.root {

src/lib/components/button.svelte

@@ -1,19 +1,18 @@
 <script lang="ts">
 	import type { ComponentConstructor, IconProps } from '$lib/types'
 
+	let cls: string | undefined = undefined
+	export { cls as class }
 	export let variant: 'secondary' | 'primary' = 'secondary'
 	export let icon: ComponentConstructor<IconProps> | undefined = undefined
 	export let click: svelte.JSX.MouseEventHandler<HTMLButtonElement> | null | undefined = undefined
 	export let label: string | undefined = undefined
 </script>
 
-<button class={`root ${variant} ${!label ? 'icon-only' : ''}`} on:click={click}>
+<button class={`root ${variant} ${!label ? 'icon-only' : ''} ${cls}`} on:click={click}>
 	{#if icon !== undefined}
 		<div class="wrapper">
-			<svelte:component
-				this={icon}
-				fill={variant === 'secondary' ? 'var(--color-primary)' : 'var(--color-secondary)'}
-			/>
+			<svelte:component this={icon} />
 		</div>
 	{/if}
 	{#if label !== undefined}
@@ -53,10 +52,18 @@
 		background-color: var(--color-primary);
 		border-color: var(--color-primary);
 		color: var(--color-secondary);
+
+		& :global(svg) {
+			fill: var(--color-secondary);
+		}
 	}
 	.secondary {
 		background-color: var(--color-secondary);
 		border-color: var(--color-grey-border);
 		color: var(--color-primary);
+
+		& :global(svg) {
+			fill: var(--color-primary);
+		}
 	}
 </style>

src/lib/components/header.svelte

@@ -1,9 +1,12 @@
 <script lang="ts">
 	import UserIcon from '$lib/components/icons/user.svelte'
 	import Button from './button.svelte'
+
+	let cls: string | undefined = undefined
+	export { cls as class }
 </script>
 
-<div class="root">
+<div class={`root ${cls}`}>
 	<div class="header">
 		<span class="title">The Outlet</span>
 		<Button icon={UserIcon} />

src/lib/components/icons/user.svelte

@@ -3,14 +3,12 @@
 
 	type $$Props = IconProps
 
+	let cls: string | undefined = undefined
+	export { cls as class }
 	export let size = 20
-	export let fill = 'black'
 </script>
 
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width={size} height={size}>
-	<path {fill} d="M16,4a5,5,0,1,1-5,5,5,5,0,0,1,5-5m0-2a7,7,0,1,0,7,7A7,7,0,0,0,16,2Z" />
-	<path
-		{fill}
-		d="M26,30H24V25a5,5,0,0,0-5-5H13a5,5,0,0,0-5,5v5H6V25a7,7,0,0,1,7-7h6a7,7,0,0,1,7,7Z"
-	/>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width={size} height={size} class={cls}>
+	<path d="M16,4a5,5,0,1,1-5,5,5,5,0,0,1,5-5m0-2a7,7,0,1,0,7,7A7,7,0,0,0,16,2Z" />
+	<path d="M26,30H24V25a5,5,0,0,0-5-5H13a5,5,0,0,0-5,5v5H6V25a7,7,0,0,1,7-7h6a7,7,0,0,1,7,7Z" />
 </svg>

src/lib/components/icons/wallet.svelte

@@ -3,14 +3,14 @@
 
 	type $$Props = IconProps
 
+	let cls: string | undefined = undefined
+	export { cls as class }
 	export let size = 20
-	export let fill = 'black'
 </script>
 
-<svg id="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width={size} height={size}>
-	<rect x="22" y="17" width="2" height="2" {fill} />
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width={size} height={size} class={cls}>
+	<rect x="22" y="17" width="2" height="2" />
 	<path
-		{fill}
 		d="M28,8H4V5H26V3H4A2,2,0,0,0,2,5V26a2,2,0,0,0,2,2H28a2,2,0,0,0,2-2V10A2,2,0,0,0,28,8ZM4,26V10H28v3H20a2,2,0,0,0-2,2v6a2,2,0,0,0,2,2h8v3ZM28,15v6H20V15Z"
 	/>
 </svg>

src/lib/components/post.svelte

@@ -5,11 +5,13 @@
 	import type { Post } from '$lib/stores/post'
 	import type { User } from '$lib/stores/user'
 
+	let cls: string | undefined = undefined
+	export { cls as class }
 	export let post: Post
 	export let onUserClick: ((user: User) => void) | undefined = undefined
 </script>
 
-<div class="root">
+<div class={`root ${cls}`}>
 	<!-- svelte-ignore a11y-click-events-have-key-events -->
 	<div class="content-left" on:click={() => onUserClick && onUserClick(post.user)}>
 		<Avatar src={post.user.avatar} />

src/lib/components/wallet-connect.svelte

@@ -1,9 +1,12 @@
 <script lang="ts">
 	import Button from './button.svelte'
 	import WalletIcon from './icons/wallet.svelte'
+
+	let cls: string | undefined = undefined
+	export { cls as class }
 </script>
 
-<div class="root">
+<div class={`root ${cls}`}>
 	<Button icon={WalletIcon} variant="primary" label="Connect wallet to post" />
 	<div class="explanation">Connect a wallet to access or create your account.</div>
 </div>

src/lib/types.ts

@@ -7,6 +7,6 @@ export type ComponentConstructor<T extends Record<string, any>> = new (args: {
 }) => SvelteComponentTyped<T>
 
 export interface IconProps {
-	fill?: string
 	size?: number
+	class?: string
 }