<script>
    export let image = "";
    export let onclick = () => {};
    export let color = "var(--col_text_panel)";
    export let size = "25px";
</script>

<input class="icon" type="button" value="" style="--image: url({image}); --color: {color}; background-color: {color}; --size: {size};" on:click={onclick}>

<style>
    .icon {
        cursor: pointer;
        background-color: var(--color);
        object-fit: contain;
        -webkit-mask-image: var(--image);
        mask-image: var(--image);
        mask-repeat: no-repeat;
        mask-size: contain;
        height: var(--size);
        width: var(--size);
    }
</style>