Icons

src/global.d.ts

@@ -14,6 +14,7 @@ interface TabEvents {
 interface Tab {
 	id: string;
 	title: string;
+	icon?: string;
 }
 
 interface State {

src/lib/components/actions.svelte

@@ -122,15 +122,23 @@
 <Card title="Actions" isOpen={false}>
 	<div class="flex flex-wrap gap-2 m-2">
 		{#if isClipboardAvailable()}
-			<button class="btn w-full" on:click={onCopyClipboard}> 📋 Copy Image </button>
+			<button class="btn w-full" on:click={onCopyClipboard}
+				><i class="fas fa-clipboard" /> Copy Image
+			</button>
 		{/if}
-		<button class="btn flex-auto" on:click={onDownloadPNG}> Download PNG </button>
-		<button class="btn flex-auto" on:click={onDownloadSVG}> Download SVG </button>
-		<button class="btn flex-auto">
-			<a class="link-style" target="_blank" href={iUrl}>Link to Image</a>
+		<button class="btn flex-auto" on:click={onDownloadPNG}>
+			<i class="fas fa-download" /> PNG
+		</button>
+		<button class="btn flex-auto" on:click={onDownloadSVG}>
+			<i class="fas fa-download" /> SVG
 		</button>
 		<button class="btn flex-auto">
-			<a class="link-style" target="_blank" href={svgUrl}>Link to SVG</a>
+			<a class="link-style" target="_blank" href={iUrl}
+				><i class="fas fa-external-link-alt" /> PNG</a>
+		</button>
+		<button class="btn flex-auto">
+			<a class="link-style" target="_blank" href={svgUrl}
+				><i class="fas fa-external-link-alt" /> SVG</a>
 		</button>
 
 		<div class="flex gap-2 items-center">

src/lib/components/card/tabs.svelte

@@ -47,7 +47,7 @@
 							? 'text-indigo-500 bg-white border-white'
 							: 'text-white bg-indigo-500 border-indigo-500 hover:bg-indigo-600'}"
 						on:click|stopPropagation={() => toggleTabs(tab)}>
-						{tab.title}
+						{#if tab.icon}<i class={tab.icon} /> {/if}{tab.title}
 					</div>
 				</li>
 			{/each}

src/lib/components/history/history.svelte

@@ -20,11 +20,13 @@
 	const tabs: Tab[] = [
 		{
 			id: 'saved',
-			title: 'Saved'
+			title: 'Saved',
+			icon: 'far fa-bookmark'
 		},
 		{
 			id: 'timeline',
-			title: 'Timeline'
+			title: 'Timeline',
+			icon: 'fas fa-history'
 		}
 	];
 
@@ -71,11 +73,11 @@
 <Card on:select={tabSelectHandler} bind:isOpen {tabs} title="History">
 	<div slot="actions">
 		<button class="btn" on:click|stopPropagation={() => saveHistory()} title="Save current state"
-			>💾</button>
+			><i class="far fa-save" /></button>
 		<button
-			class="btn"
+			class="btn text-red-400"
 			on:click|stopPropagation={() => clearHistory()}
-			title="Delete all saved states">❌</button>
+			title="Delete all saved states"><i class="fas fa-trash-alt" /></button>
 	</div>
 	<ul class="p-2 space-y-2 overflow-auto h-56">
 		{#each $historyStore as { state, time, name }}
@@ -90,10 +92,10 @@
 					<div class="flex gap-2 content-center">
 						<button
 							class="rounded px-2 w-24 bg-green-200 hover:bg-green-300"
-							on:click={() => restoreHistory(state)}>Restore</button>
+							on:click={() => restoreHistory(state)}><i class="fas fa-undo" /> Restore</button>
 						<button
 							class="rounded px-2 w-24 bg-red-200 hover:bg-red-300"
-							on:click={() => clearHistory(time)}>Delete</button>
+							on:click={() => clearHistory(time)}><i class="fas fa-trash-alt" /> Delete</button>
 					</div>
 				</div>
 			</li>
@@ -103,6 +105,6 @@
 
 <style lang="postcss">
 	.btn {
-		@apply bg-indigo-500 hover:bg-indigo-700 rounded px-1 shadow;
+		@apply bg-indigo-500 hover:bg-indigo-700 rounded px-4 shadow;
 	}
 </style>

src/lib/components/navbar.svelte

@@ -3,6 +3,7 @@
 	interface Link {
 		title: string;
 		href: string;
+		icon?: string;
 	}
 	const links: Link[] = [
 		{
@@ -22,8 +23,9 @@
 			href: 'https://github.com/mermaid-js/mermaid-cli'
 		},
 		{
-			title: 'Github',
-			href: 'https://github.com/mermaid-js/mermaid-live-editor'
+			title: '',
+			href: 'https://github.com/mermaid-js/mermaid-live-editor',
+			icon: 'fab fa-github fa-lg'
 		}
 	];
 </script>
@@ -47,9 +49,13 @@
 	<div class="hidden lg:flex lg:items-center lg:w-auto w-full" id="menu">
 		<nav>
 			<ul class="lg:flex items-center justify-between text-base pt-4 lg:pt-0">
-				{#each links as { title, href }}
+				{#each links as { title, href, icon }}
 					<li>
-						<a class="nav-btn" target="_blank" {href}>{title}</a>
+						<a class="nav-btn" target="_blank" {href}>
+							{#if icon}
+								<i class={icon} />
+							{/if}
+							{title}</a>
 					</li>
 				{/each}
 			</ul>

src/routes/edit.svelte

@@ -41,11 +41,13 @@
 	const tabs: Tab[] = [
 		{
 			id: 'code',
-			title: 'Code'
+			title: 'Code',
+			icon: 'fas fa-code'
 		},
 		{
 			id: 'config',
-			title: 'Config'
+			title: 'Config',
+			icon: 'fas fa-cogs'
 		}
 	];
 
@@ -107,9 +109,9 @@
 				<div slot="actions">
 					{#if !$codeStore.autoSync}
 						<button
-							class="bg-indigo-500 hover:bg-indigo-700 rounded px-1 mx-2"
+							class="bg-indigo-500 hover:bg-indigo-700 rounded px-4 mx-2"
 							title="Sync Diagram"
-							on:click={syncDiagram}>🔄</button>
+							on:click={syncDiagram}><i class="fas fa-sync" /></button>
 					{/if}
 					<label for="autoSync">
 						<input type="checkbox" name="autoSync" bind:checked={$codeStore.autoSync} />
@@ -133,7 +135,7 @@
 					slot="actions"
 					class="rounded shadow px-2 bg-indigo-500 hover:bg-indigo-700"
 					title="View diagram in new page"
-					on:click|stopPropagation={() => viewDiagram()}>View</button>
+					on:click|stopPropagation={() => viewDiagram()}><i class="far fa-eye" /> View</button>
 
 				<div class="flex-1 overflow-auto">
 					<View />