insert buttons with svg

src/Button.svelte

@@ -0,0 +1,18 @@
+<script>
+  export let icon
+
+  const d = []
+  d["Restart"] =
+    "M14.66 15.66A8 8 0 1 1 17 10h-2a6 6 0 1 0-1.76 4.24l1.42 1.42zM12 10h8l-4 4-4-4z"
+  d["Undo"] =
+    "M 15,3 V 5.99 A 4,4 0 0 1 11,10 H 8 V 5 l -6,6 6,6 v -5 h 3 A 6,6 0 0 0 17,6 V 3 Z"
+</script>
+
+<button
+  on:click
+  class="block flex-none bg-transparent text-gray-600 hover:bg-gray-600 hover:text-gray-50 fill-current py-2 px-3 border border-gray-600 hover:border-transparent rounded">
+  <svg
+    class="w-5 h-5"
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 20 20"><path d={d[icon]} /></svg>
+</button>

src/Triangle.svelte

@@ -56,6 +56,7 @@
   import { completed } from "./store.js"
   import { levels, colors } from "./levels.js"
   import { crossfade, scale } from "svelte/transition"
+  import Button from "./Button.svelte"
 
   export let side = 5
   export let variant = 0
@@ -318,21 +319,13 @@
   .victory {
     display: inline;
   }
-
-  button {
-    cursor: pointer;
-  }
 </style>
 
 <div class="outer overflow-x-hidden">
-  <div>
-    <button class="restart" on:click={restart}>RESTART GAME</button>
-    <button class="undo" on:click={undo}>UNDO</button>
-    <span data-cy="gameover" class:gameover>GAME OVER</span>
-    <span data-cy="victory" class:victory>VICTORY</span>
-  </div>
+  <span data-cy="gameover" class:gameover>GAME OVER</span>
+  <span data-cy="victory" class:victory>VICTORY</span>
 
-  <div class="triangle grid-cols-9 grid-rows-5">
+  <div class="triangle grid-cols-9 grid-rows-5 mb-4">
     {#each circles as _, i}
       {#key circles[i]}
         <div
@@ -345,4 +338,10 @@
       {/key}
     {/each}
   </div>
+
+  <div class="flex">
+    <Button on:click={restart} icon="Restart" />
+    <div class="flex-grow" />
+    <Button on:click={undo} icon="Undo" />
+  </div>
 </div>