userscripts/src/Components/Shared/IconButton.svelte at v3.0.2 · TraderStf/userscripts · GitHub

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
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
<script>
    export let color = "currentColor";
    export let disabled = false;
    export let icon;
    export let title = undefined;
</script>

<style>
    button {
        align-items: center;
        background-color: transparent;
        color: inherit;
        cursor: pointer;
        display: flex;
        height: 1.5rem;
        justify-content: center;
        opacity: 0.75;
        overflow: visible;
        width: 1.5rem;
    }

    button:hover {
        opacity: 1;
    }

    button:disabled {
        opacity: var(--opacity-disabled);
        pointer-events: none;
    }

    button :global(svg) {
        fill: var(--svg-fill);
        height: auto;
        pointer-events: none; /* prevent svg from triggering click events */
        width: 66.7%;
    }

</style>

<button on:click {disabled} style="--svg-fill: {color};" {title}>
    {@html icon}
</button>