33 lines
715 B
Svelte
33 lines
715 B
Svelte
<script lang="ts">
|
|
import { createEventDispatcher } from "svelte";
|
|
import Icon, { type IconName } from "../layout/Icon.svelte";
|
|
|
|
export let name: IconName;
|
|
export let value: boolean;
|
|
export let inverse: boolean = false;
|
|
|
|
const dispatcher = createEventDispatcher();
|
|
|
|
function onClick() {
|
|
value = !value;
|
|
dispatcher("click");
|
|
}
|
|
</script>
|
|
|
|
<span on:click={onClick} class="toggle-icon" class:checked={value !== inverse}>
|
|
<Icon name={name} />
|
|
</span>
|
|
|
|
<style lang="sass">
|
|
@import "../../css/colors"
|
|
|
|
.toggle-icon
|
|
font-size: 0.666em
|
|
color: $color-entry1
|
|
user-select: none
|
|
-moz-user-select: none
|
|
-webkit-user-select: none
|
|
|
|
&.checked
|
|
color: $color-entry7
|
|
</style> |