39 lines
959 B
Svelte
39 lines
959 B
Svelte
<script>
|
|
export let image = "";
|
|
export let onclick;
|
|
export let color = "var(--col_text_panel)";
|
|
export let size = "25px";
|
|
|
|
let externalClasses = "";
|
|
export { externalClasses as class };
|
|
|
|
const Clickablility = onclick ? "clickable" : "";
|
|
|
|
</script>
|
|
|
|
<input class="{externalClasses} {Clickablility} icon prevent-select" type="button" value=""
|
|
style="--icon-image: url({image}); --icon-color: {color}; --icon-size: {size};"
|
|
on:click={onclick ? onclick : null}>
|
|
|
|
<style>
|
|
:global(.icon) {
|
|
|
|
height: var(--icon-size);
|
|
width: var(--icon-size);
|
|
|
|
background-color: var(--icon-color);
|
|
|
|
object-fit: contain;
|
|
-webkit-mask-image: var(--icon-image);
|
|
mask-image: var(--icon-image);
|
|
mask-repeat: no-repeat;
|
|
mask-size: contain;
|
|
}
|
|
|
|
.clickable {
|
|
cursor: pointer;
|
|
}
|
|
.clickable:hover {
|
|
background-color: var(--col_text_hint) !important;
|
|
}
|
|
</style> |