github.com/Theta-Dev/Talon@v0.0.0-20211018130634-ff179e19fa9a/ui/menu/src/components/ImageIcon.svelte (about)

     1  <script lang="ts">
     2  	export let imageSrc: string
     3  	export let size = 32
     4  	export let scale = 1
     5  	export let alt = "??"
     6  	export let color = "#4b228a"
     7  
     8  </script>
     9  
    10  <style lang="sass">
    11  	@use "../style/values"
    12  
    13  	.icon > span
    14  		background-position: center
    15  		background-repeat: no-repeat
    16  		background-size: cover
    17  		text-transform: uppercase
    18  		border-radius: 50%
    19  </style>
    20  
    21  <span class="icon" style="width: {size}px; height: {size}px;">
    22  	{#if imageSrc}
    23  		<span
    24  			style="width: {size * scale}px; height: {size * scale}px; background-image: url('{imageSrc}')" />
    25  	{:else}
    26  		<span
    27  			style="width: {size * scale}px; height: {size * scale}px; font-size: {size * scale * 0.55}px; background: {color}">
    28  			{alt}
    29  		</span>
    30  	{/if}
    31  </span>