github.com/Theta-Dev/Talon@v0.0.0-20211018130634-ff179e19fa9a/ui/menu/src/components/Icon.svelte (about) 1 <script lang="ts"> 2 import icons from "../util/icons" 3 4 export let iconName: string 5 export let color = "#fff" 6 export let size = 32 7 export let scale = 1 8 export let transparent = false 9 10 let icon: [number, number, string] 11 $: icon = icons[iconName] ?? [0, 0, ""] 12 13 </script> 14 15 <style lang="sass"> 16 @use "../style/values" 17 18 .icon > span 19 background: values.$var-primary 20 border-radius: 50% 21 22 &.transparent 23 background: none 24 </style> 25 26 <span class="icon" style="width: {size}px; height: {size}px;"> 27 {#if icon} 28 <span 29 style="width: {(size * scale * 4) / 3}px; height: {(size * scale * 4) / 3}px" 30 class:transparent> 31 <svg 32 aria-hidden="true" 33 focusable="false" 34 role="img" 35 xmlns="http://www.w3.org/2000/svg" 36 width={size * scale} 37 height={size * scale} 38 viewBox="0 0 {icon[0]} {icon[1]}"> 39 <path d={icon[2]} fill={color} /> 40 </svg> 41 </span> 42 {/if} 43 </span>