summaryrefslogtreecommitdiffstatshomepage
path: root/frontend/src/lib/icons/Star.svelte
blob: 7613c55b2ae97546ec875f18ad4c55b1bfce2f98 (plain) (blame)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<script lang="ts">
	export let large = false;
	export let favourite: boolean | undefined = undefined;
	export let hoverable = false;
</script>

{#if favourite}
	<span class:hoverable class:large class="icon-yellow icon-[material-symbols--star-rounded]" />
{:else}
	<span
		class:hoverable
		class:large
		class="icon-yellow dim icon-[material-symbols--star-outline-rounded]"
	/>
{/if}

<style lang="postcss">
	span {
		@apply -m-px -translate-y-px text-[26px];
	}

	span.large {
		@apply text-[34px];
	}
</style>