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>