38 lines
1.1 KiB
Svelte
38 lines
1.1 KiB
Svelte
<script lang="ts">
|
|
/**
|
|
* The supporter mark. A heart rather than a padlock: nothing here is locked
|
|
* away as a punishment - the extras are a thank-you for chipping in, and a
|
|
* padlock framed it as a paywall. Filled once someone is supporting,
|
|
* outlined as an invitation before that.
|
|
*/
|
|
interface Props {
|
|
filled?: boolean;
|
|
class?: string;
|
|
}
|
|
|
|
let { filled = false, class: className = 'h-4 w-4' }: Props = $props();
|
|
</script>
|
|
|
|
{#if filled}
|
|
<svg class={className} viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
|
|
<path
|
|
d="M12 21.1l-1.45-1.32C5.4 15.1 2 12 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.5-3.4 6.6-8.55 11.29L12 21.1z"
|
|
/>
|
|
</svg>
|
|
{:else}
|
|
<svg
|
|
class={className}
|
|
viewBox="0 0 24 24"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
stroke-width="1.9"
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
aria-hidden="true"
|
|
>
|
|
<path
|
|
d="M12 21.1l-1.45-1.32C5.4 15.1 2 12 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.5-3.4 6.6-8.55 11.29L12 21.1z"
|
|
/>
|
|
</svg>
|
|
{/if}
|