Cleanup Icon component implementation (#1183)

The `icon.svelte` component has a re-implementation of the `material-symbols` library. Since the library exports a [typescript type](https://github.com/marella/material-symbols/blob/main/material-symbols/index.d.ts), a wrapper component around this should be used instead. There is also a fallback for Zarf-specific icons (such as `package` and `component`).
zarf-dev · Jan 13, 2023 · bba0a98 · bba0a98
1 parent 6c5775b
commit bba0a98
Show file tree

Hide file tree

Showing 5 changed files with 57 additions and 85 deletions.
diff --git a/src/ui/lib/components/header.svelte b/src/ui/lib/components/header.svelte
@@ -21,7 +21,7 @@
 
 	<div class="header-end">
 		<ThemeToggle />
-		<div class="header-end-icon"><Icon variant="cancelCloud" /></div>
+		<Icon variant="cloud_off" />
 	</div>
 </header>
 
@@ -54,7 +54,4 @@
 		margin-right: 0.5rem;
 		align-items: center;
 	}
-	.header-end-icon {
-		cursor: pointer;
-	}
 </style>
diff --git a/src/ui/lib/components/icon.svelte b/src/ui/lib/components/icon.svelte
@@ -3,84 +3,56 @@
 // SPDX-FileCopyrightText: 2021-Present The Zarf Authors
  -->
 <script lang="ts">
-	type IconVariant = 'component' | 'package' | 'sun' | 'cancelCloud' | 'shieldPlus';
-	export let variant: IconVariant;
-	export let className: string = '';
+	import { Box } from '@ui';
+	import type { MaterialSymbol } from 'material-symbols';
+	import { themeStore } from '$lib/store';
+
+	const zarfSymbols = ['package', 'component'];
+
+	type ZarfSymbol = (typeof zarfSymbols)[number];
+
+	export let variant: MaterialSymbol | ZarfSymbol;
+	export let element = 'span';
+	let extraClasses = '';
+	export { extraClasses as class };
+
+	$: stroke = $themeStore === 'dark' ? 'var(--mdc-theme-on-background)' : '#0D133D';
 </script>
 
-<span class="icon-wrapper {className}">
-	{#if variant === 'component'}
-		<svg width="36" height="33" viewBox="0 0 36 33" fill="none" xmlns="http://www.w3.org/2000/svg">
-			<path
-				d="M26.0213 4.10413L18.0005 7.02079M26.0213 4.10413L18.0005 1.91663L9.97965 4.10413M26.0213 4.10413V15.0416M18.0005 7.02079L9.97965 4.10413M18.0005 7.02079V17.9583M9.97965 4.10413V15.0416M26.0213 15.0416L18.0005 17.9583M26.0213 15.0416L34.0422 17.9583M18.0005 17.9583L9.97965 15.0416M18.0005 17.9583V27.4375M18.0005 17.9583L26.0213 20.875M18.0005 17.9583L9.25049 20.875M9.97965 15.0416L1.22965 17.9583M18.0005 27.4375L26.0213 31.0833M18.0005 27.4375L9.25049 31.0833M26.0213 31.0833V20.875M26.0213 31.0833L34.0422 26.7083V17.9583M26.0213 20.875L34.0422 17.9583M9.25049 31.0833L1.22965 26.7083V17.9583M9.25049 31.0833V20.875M1.22965 17.9583L9.25049 20.875"
-				stroke="#0D133D"
-				stroke-width="2"
-			/>
-		</svg>
-	{:else if variant === 'package'}
-		<svg width="35" height="28" viewBox="0 0 35 28" fill="none" xmlns="http://www.w3.org/2000/svg">
-			<path
-				d="M17.4236 5.62058L13.6364 1.83337L4.16834 3.96368L7.95554 8.46099M17.4236 5.62058L21.6842 1.83337L31.3889 4.67378L27.1283 8.46099M17.4236 5.62058L7.95554 8.46099M17.4236 5.62058L27.1283 8.46099M27.1283 8.46099L32.0833 12.25L22.6042 16.4167L17.2581 12.25M27.1283 8.46099L17.2581 12.25M17.2581 12.25L12.3958 16.4167L2.91667 11.5556L7.95554 8.46099M17.2581 12.25L7.95554 8.46099M8.42894 14.618V22.663L17.6603 26.2135L27.1283 22.4263V14.618"
-				stroke="#0D133D"
-				stroke-width="2"
-			/>
-		</svg>
-	{:else if variant === 'sun'}
-		<svg width="22" height="22" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
-			<path
-				d="M11 14C11.8333 14 12.5417 13.7083 13.125 13.125C13.7083 12.5417 14 11.8333 14 11C14 10.1667 13.7083 9.45833 13.125 8.875C12.5417 8.29167 11.8333 8 11 8C10.1667 8 9.45833 8.29167 8.875 8.875C8.29167 9.45833 8 10.1667 8 11C8 11.8333 8.29167 12.5417 8.875 13.125C9.45833 13.7083 10.1667 14 11 14ZM11 16C9.61667 16 8.43767 15.5123 7.463 14.537C6.48767 13.5623 6 12.3833 6 11C6 9.61667 6.48767 8.43733 7.463 7.462C8.43767 6.48733 9.61667 6 11 6C12.3833 6 13.5627 6.48733 14.538 7.462C15.5127 8.43733 16 9.61667 16 11C16 12.3833 15.5127 13.5623 14.538 14.537C13.5627 15.5123 12.3833 16 11 16ZM1 12C0.716667 12 0.479333 11.904 0.288 11.712C0.096 11.5207 0 11.2833 0 11C0 10.7167 0.096 10.479 0.288 10.287C0.479333 10.0957 0.716667 10 1 10H3C3.28333 10 3.521 10.0957 3.713 10.287C3.90433 10.479 4 10.7167 4 11C4 11.2833 3.90433 11.5207 3.713 11.712C3.521 11.904 3.28333 12 3 12H1ZM19 12C18.7167 12 18.4793 11.904 18.288 11.712C18.096 11.5207 18 11.2833 18 11C18 10.7167 18.096 10.479 18.288 10.287C18.4793 10.0957 18.7167 10 19 10H21C21.2833 10 21.5207 10.0957 21.712 10.287C21.904 10.479 22 10.7167 22 11C22 11.2833 21.904 11.5207 21.712 11.712C21.5207 11.904 21.2833 12 21 12H19ZM11 4C10.7167 4 10.4793 3.904 10.288 3.712C10.096 3.52067 10 3.28333 10 3V1C10 0.716667 10.096 0.479 10.288 0.287C10.4793 0.0956666 10.7167 0 11 0C11.2833 0 11.521 0.0956666 11.713 0.287C11.9043 0.479 12 0.716667 12 1V3C12 3.28333 11.9043 3.52067 11.713 3.712C11.521 3.904 11.2833 4 11 4ZM11 22C10.7167 22 10.4793 21.904 10.288 21.712C10.096 21.5207 10 21.2833 10 21V19C10 18.7167 10.096 18.4793 10.288 18.288C10.4793 18.096 10.7167 18 11 18C11.2833 18 11.521 18.096 11.713 18.288C11.9043 18.4793 12 18.7167 12 19V21C12 21.2833 11.9043 21.5207 11.713 21.712C11.521 21.904 11.2833 22 11 22ZM4.65 6.05L3.575 5C3.375 4.81667 3.279 4.58333 3.287 4.3C3.29567 4.01667 3.39167 3.775 3.575 3.575C3.775 3.375 4.01667 3.275 4.3 3.275C4.58333 3.275 4.81667 3.375 5 3.575L6.05 4.65C6.23333 4.85 6.325 5.08333 6.325 5.35C6.325 5.61667 6.23333 5.85 6.05 6.05C5.86667 6.25 5.63767 6.34567 5.363 6.337C5.08767 6.329 4.85 6.23333 4.65 6.05ZM17 18.425L15.95 17.35C15.7667 17.15 15.675 16.9127 15.675 16.638C15.675 16.3627 15.7667 16.1333 15.95 15.95C16.1333 15.75 16.3627 15.6543 16.638 15.663C16.9127 15.671 17.15 15.7667 17.35 15.95L18.425 17C18.625 17.1833 18.721 17.4167 18.713 17.7C18.7043 17.9833 18.6083 18.225 18.425 18.425C18.225 18.625 17.9833 18.725 17.7 18.725C17.4167 18.725 17.1833 18.625 17 18.425ZM15.95 6.05C15.75 5.86667 15.6543 5.63733 15.663 5.362C15.671 5.08733 15.7667 4.85 15.95 4.65L17 3.575C17.1833 3.375 17.4167 3.279 17.7 3.287C17.9833 3.29567 18.225 3.39167 18.425 3.575C18.625 3.775 18.725 4.01667 18.725 4.3C18.725 4.58333 18.625 4.81667 18.425 5L17.35 6.05C17.15 6.23333 16.9167 6.325 16.65 6.325C16.3833 6.325 16.15 6.23333 15.95 6.05ZM3.575 18.425C3.375 18.225 3.275 17.9833 3.275 17.7C3.275 17.4167 3.375 17.1833 3.575 17L4.65 15.95C4.85 15.7667 5.08767 15.675 5.363 15.675C5.63767 15.675 5.86667 15.7667 6.05 15.95C6.25 16.1333 6.346 16.3627 6.338 16.638C6.32933 16.9127 6.23333 17.15 6.05 17.35L5 18.425C4.81667 18.625 4.58333 18.7207 4.3 18.712C4.01667 18.704 3.775 18.6083 3.575 18.425Z"
-				fill="white"
-				fill-opacity="0.7"
-			/>
-		</svg>
-	{:else if variant === 'cancelCloud'}
-		<svg width="22" height="21" viewBox="0 0 22 21" fill="none" xmlns="http://www.w3.org/2000/svg">
-			<path
-				d="M18.8 20.6L16.15 18H5.5C3.96667 18 2.66667 17.4667 1.6 16.4C0.533333 15.3334 0 14.0334 0 12.5C0 11.2167 0.396 10.075 1.188 9.07505C1.97933 8.07505 3 7.43338 4.25 7.15005C4.3 7.01672 4.35 6.88738 4.4 6.76205C4.45 6.63738 4.5 6.50005 4.55 6.35005L0.4 2.20005L1.8 0.800049L20.2 19.2001L18.8 20.6ZM5.5 16H14.15L6.1 7.95005C6.06667 8.13338 6.04167 8.30838 6.025 8.47505C6.00833 8.64172 6 8.81672 6 9.00005H5.5C4.53333 9.00005 3.70833 9.34171 3.025 10.025C2.34167 10.7084 2 11.5334 2 12.5C2 13.4667 2.34167 14.2917 3.025 14.975C3.70833 15.6584 4.53333 16 5.5 16ZM20.6 16.75L19.15 15.35C19.4333 15.1167 19.646 14.846 19.788 14.538C19.9293 14.2294 20 13.8834 20 13.5C20 12.8 19.7583 12.2084 19.275 11.725C18.7917 11.2417 18.2 11 17.5 11H16V9.00005C16 7.61672 15.5127 6.43738 14.538 5.46205C13.5627 4.48738 12.3833 4.00005 11 4.00005C10.55 4.00005 10.1167 4.05405 9.7 4.16205C9.28333 4.27072 8.88333 4.44172 8.5 4.67505L7.05 3.22505C7.63333 2.82505 8.25433 2.52072 8.913 2.31205C9.571 2.10405 10.2667 2.00005 11 2.00005C12.95 2.00005 14.604 2.67905 15.962 4.03705C17.3207 5.39572 18 7.05005 18 9.00005C19.15 9.13338 20.1043 9.62905 20.863 10.487C21.621 11.3457 22 12.35 22 13.5C22 14.15 21.875 14.754 21.625 15.312C21.375 15.8707 21.0333 16.35 20.6 16.75Z"
-				fill="white"
-				fill-opacity="0.7"
-			/>
-		</svg>
-	{:else if variant === 'shieldPlus'}
-		<svg width="28" height="31" viewBox="0 0 28 31" fill="none" xmlns="http://www.w3.org/2000/svg">
-			<path
-				d="M12.5 30.0834C9.12153 29.2327 6.33271 27.2941 4.13354 24.2676C1.9334 21.242 0.833332 17.882 0.833332 14.1876V5.29175L12.5 0.916748L24.1667 5.29175V13.5678C23.7049 13.3733 23.2309 13.1969 22.7448 13.0384C22.2587 12.8809 21.7604 12.7657 21.25 12.6928V7.33341L12.5 4.05216L3.75 7.33341V14.1876C3.75 15.3299 3.90166 16.4723 4.205 17.6147C4.5093 18.757 4.93514 19.8449 5.4825 20.8784C6.02889 21.9109 6.69097 22.8647 7.46875 23.7397C8.24653 24.6147 9.10937 25.3438 10.0573 25.9272C10.3247 26.7049 10.6771 27.4463 11.1146 28.1511C11.5521 28.856 12.0503 29.4879 12.6094 30.047C12.5851 30.047 12.5671 30.0533 12.5554 30.0659C12.5428 30.0776 12.5243 30.0834 12.5 30.0834ZM19.7917 30.0834C17.7743 30.0834 16.0549 29.3727 14.6335 27.9513C13.2112 26.529 12.5 24.8091 12.5 22.7917C12.5 20.7744 13.2112 19.0545 14.6335 17.6322C16.0549 16.2108 17.7743 15.5001 19.7917 15.5001C21.809 15.5001 23.5289 16.2108 24.9512 17.6322C26.3726 19.0545 27.0833 20.7744 27.0833 22.7917C27.0833 24.8091 26.3726 26.529 24.9512 27.9513C23.5289 29.3727 21.809 30.0834 19.7917 30.0834ZM19.0625 27.1667H20.5208V23.5209H24.1667V22.0626H20.5208V18.4167H19.0625V22.0626H15.4167V23.5209H19.0625V27.1667Z"
-				fill="black"
-				fill-opacity="0.87"
-			/>
-		</svg>
-	{:else if variant === 'rocket'}
-		<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
-			<mask
-				id="mask0_534_29678"
-				style="mask-type:alpha"
-				maskUnits="userSpaceOnUse"
-				x="0"
-				y="0"
-				width="20"
-				height="20"
+{#if zarfSymbols.includes(variant)}
+	<Box {element} class={`${extraClasses || ''}`}>
+		{#if variant === 'component'}
+			<svg
+				width="36"
+				height="33"
+				viewBox="0 0 36 33"
+				fill="none"
+				xmlns="http://www.w3.org/2000/svg"
+			>
+				<path
+					d="M26.0213 4.10413L18.0005 7.02079M26.0213 4.10413L18.0005 1.91663L9.97965 4.10413M26.0213 4.10413V15.0416M18.0005 7.02079L9.97965 4.10413M18.0005 7.02079V17.9583M9.97965 4.10413V15.0416M26.0213 15.0416L18.0005 17.9583M26.0213 15.0416L34.0422 17.9583M18.0005 17.9583L9.97965 15.0416M18.0005 17.9583V27.4375M18.0005 17.9583L26.0213 20.875M18.0005 17.9583L9.25049 20.875M9.97965 15.0416L1.22965 17.9583M18.0005 27.4375L26.0213 31.0833M18.0005 27.4375L9.25049 31.0833M26.0213 31.0833V20.875M26.0213 31.0833L34.0422 26.7083V17.9583M26.0213 20.875L34.0422 17.9583M9.25049 31.0833L1.22965 26.7083V17.9583M9.25049 31.0833V20.875M1.22965 17.9583L9.25049 20.875"
+					{stroke}
+					stroke-width="2"
+				/>
+			</svg>
+		{:else if variant === 'package'}
+			<svg
+				width="35"
+				height="28"
+				viewBox="0 0 35 28"
+				fill="none"
+				xmlns="http://www.w3.org/2000/svg"
 			>
-				<rect width="20" height="20" fill="#D9D9D9" />
-			</mask>
-			<g mask="url(#mask0_534_29678)">
-				<mask
-					id="mask1_534_29678"
-					style="mask-type:alpha"
-					maskUnits="userSpaceOnUse"
-					x="0"
-					y="0"
-					width="20"
-					height="20"
-				>
-					<rect width="20" height="20" fill="#D9D9D9" />
-				</mask>
-				<g mask="url(#mask1_534_29678)">
-					<path
-						d="M4.7085 8.35413L6.3335 9.04163C6.52794 8.65274 6.72933 8.27774 6.93766 7.91663C7.146 7.55552 7.37516 7.19441 7.62516 6.8333L6.4585 6.60413L4.7085 8.35413ZM7.66683 10.0833L10.0418 12.4375C10.6252 12.2152 11.2502 11.875 11.9168 11.4166C12.5835 10.9583 13.2085 10.4375 13.7918 9.85413C14.7641 8.88191 15.5246 7.80219 16.0735 6.61497C16.6218 5.42719 16.8613 4.3333 16.7918 3.3333C15.7918 3.26385 14.6946 3.5033 13.5002 4.05163C12.3057 4.60052 11.2224 5.36108 10.2502 6.3333C9.66683 6.91663 9.146 7.54163 8.68766 8.2083C8.22933 8.87497 7.88905 9.49997 7.66683 10.0833ZM11.3752 8.72913C11.0557 8.40969 10.896 8.01719 10.896 7.55163C10.896 7.08663 11.0557 6.69441 11.3752 6.37497C11.6946 6.05552 12.0904 5.8958 12.5627 5.8958C13.0349 5.8958 13.4307 6.05552 13.7502 6.37497C14.0696 6.69441 14.2293 7.08663 14.2293 7.55163C14.2293 8.01719 14.0696 8.40969 13.7502 8.72913C13.4307 9.04858 13.0349 9.2083 12.5627 9.2083C12.0904 9.2083 11.6946 9.04858 11.3752 8.72913ZM11.771 15.4166L13.521 13.6666L13.2918 12.5C12.9307 12.75 12.5696 12.9755 12.2085 13.1766C11.8474 13.3783 11.4724 13.5764 11.0835 13.7708L11.771 15.4166ZM18.2918 1.81247C18.5557 3.49302 18.3927 5.1283 17.8027 6.7183C17.2121 8.30885 16.1946 9.82635 14.7502 11.2708L15.1668 13.3333C15.2224 13.6111 15.2085 13.8819 15.1252 14.1458C15.0418 14.4097 14.9029 14.6389 14.7085 14.8333L11.2085 18.3333L9.4585 14.2291L5.896 10.6666L1.79183 8.91663L5.271 5.41663C5.46544 5.22219 5.69822 5.0833 5.96933 4.99997C6.23988 4.91663 6.51405 4.90274 6.79183 4.9583L8.85433 5.37497C10.2988 3.93052 11.8127 2.90969 13.396 2.31247C14.9793 1.71524 16.6113 1.54858 18.2918 1.81247ZM3.271 13.3125C3.75711 12.8264 4.35072 12.5797 5.05183 12.5725C5.7535 12.5658 6.34738 12.8055 6.8335 13.2916C7.31961 13.7777 7.55905 14.3714 7.55183 15.0725C7.54516 15.7741 7.29877 16.368 6.81266 16.8541C6.46544 17.2014 5.88572 17.5 5.0735 17.75C4.26072 18 3.13905 18.2222 1.7085 18.4166C1.90294 16.9861 2.12516 15.8644 2.37516 15.0516C2.62516 14.2394 2.92377 13.6597 3.271 13.3125ZM4.4585 14.4791C4.31961 14.618 4.18072 14.8716 4.04183 15.24C3.90294 15.6077 3.80572 15.9791 3.75016 16.3541C4.12516 16.2986 4.49683 16.205 4.86516 16.0733C5.23294 15.9411 5.48627 15.8055 5.62516 15.6666C5.79183 15.5 5.88211 15.2986 5.896 15.0625C5.90988 14.8264 5.8335 14.625 5.66683 14.4583C5.50016 14.2916 5.29877 14.2116 5.06266 14.2183C4.82655 14.2255 4.62516 14.3125 4.4585 14.4791Z"
-						fill="white"
-					/>
-				</g>
-			</g>
-		</svg>
-	{/if}
-</span>
+				<path
+					d="M17.4236 5.62058L13.6364 1.83337L4.16834 3.96368L7.95554 8.46099M17.4236 5.62058L21.6842 1.83337L31.3889 4.67378L27.1283 8.46099M17.4236 5.62058L7.95554 8.46099M17.4236 5.62058L27.1283 8.46099M27.1283 8.46099L32.0833 12.25L22.6042 16.4167L17.2581 12.25M27.1283 8.46099L17.2581 12.25M17.2581 12.25L12.3958 16.4167L2.91667 11.5556L7.95554 8.46099M17.2581 12.25L7.95554 8.46099M8.42894 14.618V22.663L17.6603 26.2135L27.1283 22.4263V14.618"
+					{stroke}
+					stroke-width="2"
+				/>
+			</svg>
+		{/if}
+	</Box>
+{:else}
+	<Box {element} class={`material-symbols-outlined ${extraClasses || ''}`}>
+		{variant}
+	</Box>
+{/if}
diff --git a/src/ui/lib/palette.ts b/src/ui/lib/palette.ts
@@ -1,3 +1,6 @@
+// SPDX-License-Identifier: Apache-2.0
+// SPDX-FileCopyrightText: 2021-Present The Zarf Authors
+
 import type { Palettes } from '@ui';
 
 // Current default from @ui

diff --git a/src/ui/routes/initialize/configure/+page.svelte b/src/ui/routes/initialize/configure/+page.svelte
@@ -34,7 +34,7 @@
 		Package Components
 		<Typography variant="caption" element="p">
 			<span aria-hidden="true">
-				<Icon variant="component" className="invisible" />
+				<Icon variant="component" class="invisible" />
 			</span>
 			The following components will be deployed into the cluster. Optional components that are not selected
 			will not be deployed.

diff --git a/src/ui/routes/packages/+page.svelte b/src/ui/routes/packages/+page.svelte
@@ -5,7 +5,7 @@
 <script>
 	import { Packages } from '$lib/api';
 	import { Hero, PackageDetailsCard as PackageDetails, Spinner, Icon } from '$lib/components';
-	import { Button, Typography } from '@ui';
+	import { Button, Typography, ButtonIcon } from '@ui';
 </script>
 
 {#await Packages.getDeployedPackages()}
@@ -22,7 +22,7 @@
 		<section class="page-title deployed-packages">
 			<Typography variant="h5">Deployment Details</Typography>
 			<Button variant="raised" color="secondary">
-				<Icon variant="rocket" />
+				<ButtonIcon slot="leadingIcon" class="material-symbols-outlined">rocket_launch</ButtonIcon>
 				Deploy Package
 			</Button>
 		</section>