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>