@netless/fastboard-ui 0.3.0-canary.0

package/src/components/Icons/CircleBolded.svelte

@@ -0,0 +1,20 @@
+<script lang="ts">
+  import type { Theme } from "../../typings";
+
+  export let theme: Theme = "light";
+  export let active = false;
+</script>
+
+<svg fill="none" viewBox="0 0 24 24" class="fastboard-icon {theme}" class:is-active={active}>
+  <rect
+    width="16"
+    height="16"
+    x="4"
+    y="4"
+    stroke="#5D6066"
+    stroke-linejoin="round"
+    stroke-width="1.75"
+    rx="8"
+    class="fastboard-icon-stroke-color"
+  />
+</svg>

package/src/components/Icons/Clean.svelte

@@ -0,0 +1,14 @@
+<script lang="ts">
+  import type { Theme } from "../../typings";
+
+  export let theme: Theme = "light";
+  export let active = false;
+</script>
+
+<svg fill="none" viewBox="0 0 24 24" class="fastboard-icon {theme}" class:is-active={active}>
+  <path
+    fill="#5D6066"
+    d="M9.754 11.99c0 1.856-.711 3.62-1.96 4.951l-.151.155h1.403l.855-.853h.707l.853.853h2.635l.094-.064a6.237 6.237 0 0 0 2.559-4.781l.005-.26h1a7.237 7.237 0 0 1-2.994 5.862l-.229.16-.277.083h-3l-.353-.146-.647-.647-.646.647-.354.146h-3l-.286-.91.214-.148a6.237 6.237 0 0 0 2.567-4.787l.005-.26h1Zm4.772-6.502v2l.35.039a2.98 2.98 0 0 1 2.644 2.78l.006.181h-8a2.98 2.98 0 0 1 2.65-2.961l.35-.039v-2h2Z"
+    class="fastboard-icon-fill-color"
+  />
+</svg>

package/src/components/Icons/Clear.svelte

@@ -0,0 +1,16 @@
+<script lang="ts">
+  import type { Theme } from "../../typings";
+
+  export let theme: Theme = "light";
+  export let active = false;
+</script>
+
+<svg fill="none" viewBox="0 0 24 24" class="fastboard-icon {theme}" class:is-active={active}>
+  <path
+    stroke="#5D6066"
+    stroke-linejoin="round"
+    stroke-width="1.25"
+    d="m17.95 4.636-2.83 2.828-1.413-1.414a2 2 0 0 0-2.829 0l-.707.707 7.071 7.071.707-.707a2 2 0 0 0 0-2.828l-1.414-1.414 2.829-2.829-1.415-1.414Zm-1.415 9.9-5.656 5.656-.707-.707 1.767-3.182-3.182 1.768.707-2.121-2.121.707 1.768-3.182-3.182 1.768.707-2.122-2.121.707-.707-.707 5.656-5.657"
+    class="fastboard-icon-stroke-color"
+  />
+</svg>

package/src/components/Icons/Click.svelte

@@ -0,0 +1,16 @@
+<script lang="ts">
+  import type { Theme } from "../../typings";
+
+  export let theme: Theme = "light";
+  export let active = false;
+</script>
+
+<svg fill="none" viewBox="0 0 24 24" class="fastboard-icon {theme}" class:is-active={active}>
+  <path
+    stroke="#5D6066"
+    stroke-linejoin="round"
+    stroke-width="1.25"
+    d="M10 18 6 6l12 4-6 2-2 6Z"
+    class="fastboard-icon-stroke-color"
+  />
+</svg>

package/src/components/Icons/ClickFilled.svelte

@@ -0,0 +1,10 @@
+<script lang="ts">
+  import type { Theme } from "../../typings";
+
+  export let theme: Theme = "light";
+  export let active = false;
+</script>
+
+<svg fill="none" viewBox="0 0 24 24" class="fastboard-icon {theme}" class:is-active={active}>
+  <path fill="#5D6066" d="M10 18 6 6l12 4-6 2-2 6Z" class="fastboard-icon-fill-color" />
+</svg>

package/src/components/Icons/Diamond.svelte

@@ -0,0 +1,16 @@
+<script lang="ts">
+  import type { Theme } from "../../typings";
+
+  export let theme: Theme = "light";
+  export let active = false;
+</script>
+
+<svg fill="none" viewBox="0 0 24 24" class="fastboard-icon {theme}" class:is-active={active}>
+  <path
+    class="fastboard-icon-stroke-color"
+    d="M4.222 12 12 4.222 19.778 12 12 19.778z"
+    stroke="#5D6066"
+    stroke-linejoin="round"
+    stroke-width="1.25"
+  />
+</svg>

package/src/components/Icons/Down.svelte

@@ -0,0 +1,16 @@
+<script lang="ts">
+  import type { Theme } from "../../typings";
+
+  export let theme: Theme = "light";
+  export let active = false;
+</script>
+
+<svg fill="none" viewBox="0 0 24 24" class="fastboard-icon {theme}" class:is-active={active}>
+  <path
+    class="fastboard-icon-stroke-color"
+    d="m16 10-2 2-2 2-2-2-2-2"
+    stroke="#5D6066"
+    stroke-linejoin="round"
+    stroke-width="1.25"
+  />
+</svg>

package/src/components/Icons/Eraser.svelte

@@ -0,0 +1,16 @@
+<script lang="ts">
+  import type { Theme } from "../../typings";
+
+  export let theme: Theme = "light";
+  export let active = false;
+</script>
+
+<svg fill="none" viewBox="0 0 24 24" class="fastboard-icon {theme}" class:is-active={active}>
+  <path
+    stroke="#5D6066"
+    stroke-linejoin="round"
+    stroke-width="1.25"
+    d="M13.414 4.929a2 2 0 0 1 2.829 0l2.828 2.828a2 2 0 0 1 0 2.829L12 17.656a4 4 0 0 1-5.657 0L4.93 16.244a2 2 0 0 1 0-2.829l8.485-8.485ZM12 6.343 17.657 12m-1.414-7.071-2.829 2.828m4.243-1.414-2.829 2.829m4.243-1.415-2.828 2.829"
+    class="fastboard-icon-stroke-color"
+  />
+</svg>

package/src/components/Icons/EraserFilled.svelte

@@ -0,0 +1,16 @@
+<script lang="ts">
+  import type { Theme } from "../../typings";
+
+  export let theme: Theme = "light";
+  export let active = false;
+</script>
+
+<svg fill="none" viewBox="0 0 24 24" class="fastboard-icon {theme}" class:is-active={active}>
+  <path
+    fill="#5D6066"
+    fill-rule="evenodd"
+    d="M16.242 4.929a2 2 0 0 0-2.828 0L4.93 13.414a2 2 0 0 0 0 2.829l1.414 1.414a4 4 0 0 0 5.657 0l5.215-5.215-5.657-5.657.884-.884 5.657 5.657.972-.972a2 2 0 0 0 0-2.829l-2.83-2.827Z"
+    clip-rule="evenodd"
+    class="fastboard-icon-fill-color"
+  />
+</svg>

package/src/components/Icons/Icons.scss

@@ -0,0 +1,20 @@
+@import "../theme.scss";
+
+@each $name, $theme in $themes {
+  .fastboard-icon.#{$name} {
+    .fastboard-icon-stroke-color {
+      stroke: read($theme, "color");
+    }
+    .fastboard-icon-fill-color {
+      fill: read($theme, "color");
+    }
+    &.is-active {
+      .fastboard-icon-stroke-color {
+        stroke: read($theme, "active-color");
+      }
+      .fastboard-icon-fill-color {
+        fill: read($theme, "active-color");
+      }
+    }
+  }
+}

package/src/components/Icons/Left.svelte

@@ -0,0 +1,16 @@
+<script lang="ts">
+  import type { Theme } from "../../typings";
+
+  export let theme: Theme = "light";
+  export let active = false;
+</script>
+
+<svg fill="none" viewBox="0 0 24 24" class="fastboard-icon {theme}" class:is-active={active}>
+  <path
+    d="m14 8-2 2-2 2 2 2 2 2"
+    class="fastboard-icon-stroke-color"
+    stroke="#5D6066"
+    stroke-linejoin="round"
+    stroke-width="1.25"
+  />
+</svg>

package/src/components/Icons/Line.svelte

@@ -0,0 +1,16 @@
+<script lang="ts">
+  import type { Theme } from "../../typings";
+
+  export let theme: Theme = "light";
+  export let active = false;
+</script>
+
+<svg fill="none" viewBox="0 0 24 24" class="fastboard-icon {theme}" class:is-active={active}>
+  <path
+    stroke="#5D6066"
+    stroke-linejoin="round"
+    stroke-width="1.25"
+    d="M5 19 19 5"
+    class="fastboard-icon-stroke-color"
+  />
+</svg>

package/src/components/Icons/LineBolded.svelte

@@ -0,0 +1,16 @@
+<script lang="ts">
+  import type { Theme } from "../../typings";
+
+  export let theme: Theme = "light";
+  export let active = false;
+</script>
+
+<svg fill="none" viewBox="0 0 24 24" class="fastboard-icon {theme}" class:is-active={active}>
+  <path
+    stroke="#5D6066"
+    stroke-linejoin="round"
+    stroke-width="1.75"
+    d="M5 19 19 5"
+    class="fastboard-icon-stroke-color"
+  />
+</svg>

package/src/components/Icons/Loading.svelte

@@ -0,0 +1,10 @@
+<script lang="ts">
+  import type { Theme } from "../../typings";
+
+  export let theme: Theme = "light";
+  export let active = false;
+</script>
+
+<svg fill="none" viewBox="0 0 24 24" class="fastboard-icon {theme}" class:is-active={active}>
+  <path fill="#5D6066" d="M12 4V2A10 10 0 0 0 2 12h2a8 8 0 0 1 8-8z" class="fastboard-icon-fill-color" />
+</svg>

package/src/components/Icons/Minus.svelte

@@ -0,0 +1,16 @@
+<script lang="ts">
+  import type { Theme } from "../../typings";
+
+  export let theme: Theme = "light";
+  export let active = false;
+</script>
+
+<svg fill="none" viewBox="0 0 24 24" class="fastboard-icon {theme}" class:is-active={active}>
+  <path
+    d="M5 12h14"
+    class="fastboard-icon-stroke-color"
+    stroke="#5D6066"
+    stroke-linejoin="round"
+    stroke-width="1.25"
+  />
+</svg>

package/src/components/Icons/Pause.svelte

@@ -0,0 +1,10 @@
+<script lang="ts">
+  import type { Theme } from "../../typings";
+
+  export let theme: Theme = "light";
+  export let active = false;
+</script>
+
+<svg fill="none" viewBox="0 0 24 24" class="fastboard-icon {theme}" class:is-active={active}>
+  <path fill="#5D6066" d="M14 19h4V5h-4M6 19h4V5H6v14z" class="fastboard-icon-fill-color" />
+</svg>

package/src/components/Icons/Pencil.svelte

@@ -0,0 +1,29 @@
+<script lang="ts">
+  import type { Theme } from "../../typings";
+
+  export let theme: Theme = "light";
+  export let active = false;
+</script>
+
+<svg fill="none" viewBox="0 0 24 24" class="fastboard-icon {theme}" class:is-active={active}>
+  <path
+    stroke="#5D6066"
+    stroke-linejoin="round"
+    stroke-width="1.25"
+    d="M15.536 4.222a2 2 0 0 1 2.828 0l1.414 1.414a2 2 0 0 1 0 2.828l-9.9 9.9-4.95.707.708-4.95 9.9-9.9Z"
+    class="fastboard-icon-stroke-color"
+  />
+  <path
+    stroke="#5D6066"
+    stroke-width="1.25"
+    d="m14.121 5.636 4.243 4.243"
+    class="fastboard-icon-stroke-color"
+  />
+  <path
+    stroke="#5D6066"
+    stroke-linejoin="round"
+    stroke-width="1.25"
+    d="m16.243 7.757-5.657 5.657m-3.536.707v1.415h1.415v1.414h1.414"
+    class="fastboard-icon-stroke-color"
+  />
+</svg>

package/src/components/Icons/PencilFilled.svelte

@@ -0,0 +1,16 @@
+<script lang="ts">
+  import type { Theme } from "../../typings";
+
+  export let theme: Theme = "light";
+  export let active = false;
+</script>
+
+<svg fill="none" viewBox="0 0 24 24" class="fastboard-icon {theme}" class:is-active={active}>
+  <path
+    fill="#5D6066"
+    fill-rule="evenodd"
+    d="M18.364 4.222a2 2 0 0 0-2.828 0l-9.9 9.9-.707 4.95 4.95-.708 8.132-8.132-.008-.007-.008-.008-.007-.008-.008-.007-.008-.008-.008-.008-.007-.008-.008-.008-.008-.007-.008-.008-.008-.008-.008-.008-.008-.008-.008-.008-.008-.008-.008-.008-.008-.008-.008-.008-.008-.008-.009-.009-.008-.008-.008-.008-.008-.008-.008-.009-.009-.008-.008-.008-.009-.009-.008-.008-.008-.009-.009-.008-.008-.008-.009-.009-.008-.008-.009-.009-.008-.009-.009-.008-.009-.009-.008-.008-.009-.01-.009-.008-.008-.009-.01-.008-.008-.01-.009-.008-.008-.009-.01-.009-.008-.008-.01-.01-.008-.008-.009-.01-.009-.008-.009-.01-.009-.008-.009-.01-.009-.008-.009-.01-.01-.008-.008-.01-.01-.009-.009-.009-.009-.009-.009-.01-.01-.008-.008-.01-.01-.009-.009-.01-.01-.009-.009-.009-.009-.01-.01-.009-.009-.009-.01-.01-.008-.009-.01-.01-.01-.009-.009-.01-.01-.009-.009-.01-.01-.009-.009-.01-.01-.009-.01-.01-.009-.009-.01-.01-.009-.01-.01-.009-.01-.01-.01-.01-.009-.009-.01-.01-.01-.01-.009-.01-.01-.009-.01-.01-.01-.01-.01-.01-.009-.01-.01-.01-.01-.009-.01-.01-.01-.01-.01-.01-.01-.01-.01-.01-.01-.01-.01-.01-.01-.01-.01-.01-.01-.01-.01-.01-.01-.01-.01-.01-.01-.01-.01-.01-.01-.01-.01-.01-.01-.01-.01-.01-.01-.01-.01-.01-.01-.01-.01-.01-.01-.01-.01-.011-.01-.01-.011-.01-.01-.01-.01-.01-.01-.011-.011-.01-.01-.01-.01-.01-.01-.011-.011-.01-.01-.01-.01-.01-.011-.011-.01-.01-.01-.01-.011-.011-.01-.01-.01-.01-.011-.011-.01-.01-.01-.011-.011-.01-.01-.01-.01-.011-.011-.01-.01-.01-.011-.011-.01-.01-.01-.011-.011-.01-.01-.011-.011-.01-.01-.01-.011-.011-.01-.01-.011-.011-.01-.01-.01-.011-.011-.01-.01-.011-.011-.01-.01-.011-.011-.01-.01-.011-.011-.01-.01-.011-.011-.01-.01-.011-.011-.01-.01-.011-.011-.01-.01-.011-.011-.01-.01-.011-.011-.01-.01-.011-.011-.01-.01-.011-.011-.01-.01-.011-.011-.01-.01-.011-.011-.01-.011-.011-.01-.01-.011-.011-.01-.01-.011-.011-.01-.01-.011-.011-.01-.01-.011-.011-.01-.01-.011-.011-.01-.01-.011-.011-.01-.01-.011-.011-.01-.01-.011-.011-.01-.01-.011-.011-.01-.01-.011-.011-.01-.01-.011-.011-.01-.01-.01-.011-.011-.01-.01-.011-.011-.01-.01-.011-.011-.01-.01-.01-.011-.011-.01-.01-.01-.011-.011-.01-.01-.011-.011-.01-.01-.01-.01-.011-.011-.01-.01-.011-.011-.01-.01-.01-.01-.011-.011-.01-.01-.01-.01-.011-.011-.01-.01-.01-.01-.011-.011-.01-.01-.01-.01-.01-.01-.011-.011-.01-.01-.01-.01-.011-.011-.01-.01-.01-.01-.01-.01-.01-.01-.011-.011-.01-.01-.01-.01-.01-.01-.01-.01-.01-.01-.011-.01-.01-.011-.01-.01-.01-.01-.01-.01-.01-.01-.01-.01-.01-.01-.01-.01-.01-.01-.01-.01-.01-.01-.01-.01-.01-.01-.01-.01-.01-.01-.01-.01-.01-.01-.01-.01-.01-.01-.01-.01-.01-.01-.01-.01-.01-.01-.01-.009-.01-.01-.009-.01-.01-.01-.01-.009-.01-.01-.009-.01-.01-.01-.01-.009-.009-.01-.01-.01-.01-.009-.009-.01-.01-.009-.01-.01-.009-.009-.01-.01-.009-.009-.01-.01-.009-.009-.01-.01-.009-.009-.01-.01-.009-.009-.009-.009-.01-.01-.009-.009-.009-.009-.01-.01-.009-.009-.009-.009-.01-.01-.008-.008-.01-.01-.009-.009-.009-.009-.01-.009-.008-.01-.01-.008-.008-.01-.01-.008-.009-.01-.009-.008-.009-.01-.009-.008-.008-.01-.01-.008-.008-.009-.01-.009-.008-.009-.009-.008-.009-.01-.008-.008-.01L14.777 7l-.008-.009-.01-.008-.008-.01-.008-.008-.01-.008-.008-.009-.008-.008-.009-.009-.008-.009-.009-.008-.008-.008-.009-.009-.008-.008-.008-.009-.009-.008-.008-.008-.008-.009-.009-.008-.008-.008-.008-.008-.008-.009-.008-.008-.009-.008-.008-.008-.008-.008-.008-.008-.008-.008-.008-.008-.008-.008-.008-.008-.008-.008-.008-.008-.007-.008-.008-.007-.008-.008-.008-.008-.007-.008-.008-.007-.008-.008-.007-.008-.008-.007-.008-.008-.007-.007-.008-.008-.007-.007-.008-.008-.007-.007-.007-.008-.008-.007-.007-.007-.007-.007-.008-.008-.007-.007-.007-.007-.007-.007-.007-.007-.007-.007-.007-.007-.007-.007-.007-.007-.007-.007-.007-.007-.007-.007-.007-.007-.006-.007-.007-.007-.007-.006-.007-.007-.006-.007-.007-.006-.007-.007-.006-.006-.007-.007-.006-.006-.007-.007-.006-.006-.006-.007-.007-.006-.006-.006-.006-.006-.006-.007-.007-.006-.006-.006-.006-.006-.006-.006-.006-.006-.006-.006-.006-.006-.006-.006-.006-.006-.005-.006-.006-.005-.006-.006-.006-.006-.005-.006-.006-.005-.005-.006-.006-.005-.006-.006-.005-.005-.005-.006-.006-.005-.005-.005-.005-.006-.006-.005-.005-.005-.005-.005-.005-.005-.005-.005-.005-.006-.005-.005-.005-.004-.005-.005-.005-.005-.005-.005-.005-.005-.004-.005-.005-.004-.005-.005-.004-.005-.005-.004-.004-.005-.005-.004-.004-.004-.005-.005-.004-.004-.004-.004-.005-.005-.004-.004-.004-.004-.004-.004-.004-.004-.004-.004-.004-.004-.004-.004-.004-.004-.004-.004-.003-.004-.004-.003-.004-.004-.003-.004-.004-.003-.004-.004-.003-.003-.003-.004-.004-.003-.003-.003-.003-.004-.004-.003-.003-.003-.003-.003-.003-.003-.003-.003-.003-.003-.003-.003-.003-.003-.003-.003-.003-.003-.002-.003-.003-.002-.003-.003-.002-.002-.003-.003-.002-.003-.003-.002-.002-.002-.002-.003-.003-.002-.002-.002-.002-.002-.002-.002-.002-.002L13.779 6l-.002-.002-.002-.002-.002-.002-.002-.002-.002-.002-.001-.001.707-.708.002.002.001.002.002.002.002.002.002.001.002.002.002.002.002.002.002.003.002.002.002.002.003.002.002.003.002.002.003.002.002.003.003.002.002.003.003.003.003.002.002.003.003.003.003.003.003.003.003.003.003.002.003.004.003.003.003.003.003.003.004.003.003.003.003.004.004.003.003.004.004.003.003.004.004.003.003.004.004.004.004.003.004.004.003.004.004.004.004.004.004.004.004.004.004.004.004.004.004.004.005.004.004.004.004.005.005.004.004.004.004.005.005.004.004.005.005.004.004.005.005.005.005.004.005.005.004.005.005.005.005.005.005.004.005.005.005.005.005.005.005.005.005.006.005.005.005.005.006.005.005.006.005.005.006.005.005.006.006.005.005.006.006.005.005.006.006.005.006.006.005.006.006.005.006.006.006.006.005.006.006.006.006.006.006.006.006.006.006.006.006.006.007.006.006.006.006.006.006.007.007.006.006.006.006.007.007.006.006.007.007.006.006.007.007.006.006.007.007.006.006.007.007.007.007.006.007.007.006.007.007.007.007.007.007.007.007.006.007.007.007.007.007.007.007.008.007.007.007.007.007.007.008.007.007.007.007.008.007.007.008.007.007.008.008.007.007.008.008.007.007.008.008.007.007.008.008.007.007.008.008.008.008.007.007.008.008.008.008.007.008.008.008.008.008.008.007.008.008.008.008.008.008.008.008.008.008.008.008.008.008.008.009.008.008.008.008.008.008.009.008.008.009.008.008.009.008.008.009.008.008.009.009.008.008.008.008.009.009.008.008.009.009.008.008.009.01.009.008.008.008.009.009.009.009.008.008.009.01.009.008.008.009.01.009.008.008.009.01.009.008.009.009.008.009.01.009.008.009.01.009.008.009.01.009.008.009.01.009.009.01.009.008.009.01.009.009.01.009.008.009.01.01.009.008.009.01.01.01.009.008.009.01.01.01.009.008.009.01.01.01.009.009.01.01.009.009.01.01.009.009.01.01.009.009.01.01.009.009.01.01.009.01.01.009.01.01.009.009.01.01.01.01.009.01.01.009.01.01.01.01.009.01.01.009.01.01.01.01.01.01.009.01.01.01.01.009.01.01.01.01.01.01.01.01.01.01.01.01.01.01.01.01.01.01.01.01.01.01.01.01.01.01.01.01.01.01.01.01.01.01.01.01.01.01.01.01.01.01.01.01.01.011.01.01.01.01.011.01.01.01.01.011.01.01.01.01.011.01.01.011.01.01.011.01.01.011.01.01.01.01.011.01.01.011.01.01.011.011.01.01.01.01.011.011.01.01.01.01.011.011.01.01.011.011.01.01.01.01.011.011.01.01.011.011.01.01.011.01.01.011.01.01.011.011.01.01.011.011.01.01.011.011.01.01.011.011.01.01.011.011.01.01.011.011.01.01.011.011.01.01.011.011.01.01.011.011.01.01.011.011.01.01.011.011.01.01.011.011.01.01.011.011.01.01.011.011.01.01.011.011.01.01.011.011.01.01.011.011.01.01.011.011.01.01.011.011.01.01.011.011.01.01.011.011.01.01.011.011.01.01.011.011.01.01.011.011.01.01.011.011.01.01.011.011.01.01.011.011.01.01.011.011.01.01.011.011.01.01.011.01.01.011.01.01.011.011.01.01.011.011.01.01.011.01.01.011.01.01.011.011.01.01.01.01.011.011.01.01.011.01.01.011.01.01.011.01.01.011.01.01.011.01.01.011.01.01.01.01.011.01.01.011.01.01.01.01.011.01.01.011.01.01.01.01.01.01.011.01.01.01.01.011.01.01.01.01.01.01.011.01.01.01.01.01.01.01.01.01.01.01.01.01.01.01.01.01.01.01.01.01.01.01.01.01.01.01.01.01.01.01.01.01.01.01.01.01.01.01.01.01.01.01.01.01.01.01.009.01.01.009.01.01.01.01.009.009.01.01.01.01.009.01.01.009.01.01.009.009.01.01.01.01.009.009.01.01.009.009.01.01.009.009.01.01.009.009.01.009.009.01.009.009.01.01.009.008.009.01.01.01.009.008.009.01.01.009.008.01.01.008.009.01.01.009.008.009.01.009.008.01.01.008.009.01.009.008.009.01.009.008.009.01.009.008.009.009.009.009.008.009.01.009.008.008.009.01.009.008.009.009.008.008.01.01.008.008.008.008.01.01.008.008.008.008.009.009.008.008.009.009.008.008.009.009.008.008.009.009.008.008.009.008.008.009.008.008.008.008.009.008.008.009.008.008.008.008.008.008.009.008.008.008.008.008.008.008.008.008.008.008.008.008.008.008.008.008.007.008.008.008.008.007.008.008.007.008.008.007.008.008.008.008.007 1.06-1.06a2 2 0 0 0 0-2.829l-1.414-1.414Zm-9.9 10.689c.346 0 .626.28.626.625v.789h.789v1.25H8.465a.625.625 0 0 1-.625-.625v-.79h-.79a.625.625 0 0 1-.625-.624V14.12h1.25v.79h.79Z"
+    clip-rule="evenodd"
+    class="fastboard-icon-fill-color"
+  />
+</svg>

package/src/components/Icons/Play.svelte

@@ -0,0 +1,10 @@
+<script lang="ts">
+  import type { Theme } from "../../typings";
+
+  export let theme: Theme = "light";
+  export let active = false;
+</script>
+
+<svg fill="none" viewBox="0 0 24 24" class="fastboard-icon {theme}" class:is-active={active}>
+  <path fill="#5D6066" d="M8 5.14v14l11-7l-11-7z" class="fastboard-icon-fill-color" />
+</svg>

package/src/components/Icons/Plus.svelte

@@ -0,0 +1,16 @@
+<script lang="ts">
+  import type { Theme } from "../../typings";
+
+  export let theme: Theme = "light";
+  export let active = false;
+</script>
+
+<svg fill="none" viewBox="0 0 24 24" class="fastboard-icon {theme}" class:is-active={active}>
+  <path
+    d="M5 12h14m-7-7v14"
+    class="fastboard-icon-stroke-color"
+    stroke="#5D6066"
+    stroke-linejoin="round"
+    stroke-width="1.25"
+  />
+</svg>

package/src/components/Icons/Rectangle.svelte

@@ -0,0 +1,16 @@
+<script lang="ts">
+  import type { Theme } from "../../typings";
+
+  export let theme: Theme = "light";
+  export let active = false;
+</script>
+
+<svg fill="none" viewBox="0 0 24 24" class="fastboard-icon {theme}" class:is-active={active}>
+  <path
+    stroke="#5D6066"
+    stroke-linejoin="round"
+    stroke-width="1.25"
+    d="M5 5h14v14H5z"
+    class="fastboard-icon-stroke-color"
+  />
+</svg>

package/src/components/Icons/RectangleBolded.svelte

@@ -0,0 +1,16 @@
+<script lang="ts">
+  import type { Theme } from "../../typings";
+
+  export let theme: Theme = "light";
+  export let active = false;
+</script>
+
+<svg fill="none" viewBox="0 0 24 24" class="fastboard-icon {theme}" class:is-active={active}>
+  <path
+    stroke="#5D6066"
+    stroke-linejoin="round"
+    stroke-width="1.75"
+    d="M5 5h14v14H5z"
+    class="fastboard-icon-stroke-color"
+  />
+</svg>

package/src/components/Icons/Redo.svelte

@@ -0,0 +1,15 @@
+<script lang="ts">
+  import type { Theme } from "../../typings";
+
+  export let theme: Theme = "light";
+  export let active = false;
+</script>
+
+<svg fill="none" viewBox="0 0 24 24" class="fastboard-icon {theme}" class:is-active={active}>
+  <path fill="#5D6066" d="m14 5 6 4-6 4 2-4-2-4Z" class="fastboard-icon-fill-color" />
+  <path
+    fill="#5D6066"
+    d="M8 8.375h8v1.25H8v-1.25Zm0 8h12v1.25H8v-1.25ZM3.375 13A4.625 4.625 0 0 1 8 8.375v1.25A3.375 3.375 0 0 0 4.625 13h-1.25Zm1.25 0A3.375 3.375 0 0 0 8 16.375v1.25A4.625 4.625 0 0 1 3.375 13h1.25Z"
+    class="fastboard-icon-fill-color"
+  />
+</svg>

package/src/components/Icons/Reset.svelte

@@ -0,0 +1,26 @@
+<script lang="ts">
+  import type { Theme } from "../../typings";
+
+  export let theme: Theme = "light";
+  export let active = false;
+</script>
+
+<svg fill="none" viewBox="0 0 24 24" class="fastboard-icon {theme}" class:is-active={active}>
+  <circle cx="12" cy="12" fill="#5D6066" r="2" class="fastboard-icon-fill-color" />
+  <path
+    d="M12 3v4m0 10v4m9-9h-4M7 12H3"
+    stroke="#5D6066"
+    stroke-linejoin="round"
+    stroke-width="1.25"
+    class="fastboard-icon-stroke-color"
+  />
+  <circle
+    cx="12"
+    cy="12"
+    r="7"
+    stroke="#5D6066"
+    stroke-linejoin="round"
+    stroke-width="1.25"
+    class="fastboard-icon-stroke-color"
+  />
+</svg>

package/src/components/Icons/Rhombus.svelte

@@ -0,0 +1,16 @@
+<script lang="ts">
+  import type { Theme } from "../../typings";
+
+  export let theme: Theme = "light";
+  export let active = false;
+</script>
+
+<svg fill="none" viewBox="0 0 24 24" class="fastboard-icon {theme}" class:is-active={active}>
+  <path
+    stroke="#5D6066"
+    stroke-linejoin="round"
+    stroke-width="1.25"
+    d="M3.515 12 12 3.514 20.485 12 12 20.485z"
+    class="fastboard-icon-stroke-color"
+  />
+</svg>

package/src/components/Icons/RhombusBolded.svelte

@@ -0,0 +1,16 @@
+<script lang="ts">
+  import type { Theme } from "../../typings";
+
+  export let theme: Theme = "light";
+  export let active = false;
+</script>
+
+<svg fill="none" viewBox="0 0 24 24" class="fastboard-icon {theme}" class:is-active={active}>
+  <path
+    stroke="#5D6066"
+    stroke-linejoin="round"
+    stroke-width="1.75"
+    d="M3.515 12 12 3.514 20.485 12 12 20.485z"
+    class="fastboard-icon-stroke-color"
+  />
+</svg>

package/src/components/Icons/Right.svelte

@@ -0,0 +1,16 @@
+<script lang="ts">
+  import type { Theme } from "../../typings";
+
+  export let theme: Theme = "light";
+  export let active = false;
+</script>
+
+<svg fill="none" viewBox="0 0 24 24" class="fastboard-icon {theme}" class:is-active={active}>
+  <path
+    d="m10 8 2 2 2 2-2 2-2 2"
+    stroke="#5D6066"
+    stroke-linejoin="round"
+    stroke-width="1.25"
+    class="fastboard-icon-stroke-color"
+  />
+</svg>

package/src/components/Icons/Selector.svelte

@@ -0,0 +1,24 @@
+<script lang="ts">
+  import type { Theme } from "../../typings";
+
+  export let theme: Theme = "light";
+  export let active = false;
+</script>
+
+<svg fill="none" viewBox="0 0 24 24" class="fastboard-icon {theme}" class:is-active={active}>
+  <path
+    stroke="#5D6066"
+    stroke-dasharray="1.25 1.25"
+    stroke-linejoin="round"
+    stroke-width="1.25"
+    d="M18 11V4H4v14h7"
+    class="fastboard-icon-stroke-color"
+  />
+  <path
+    stroke="#5D6066"
+    stroke-linejoin="round"
+    stroke-width="1.25"
+    d="m15 20-2-7 7 2-3.5 1.5L15 20Z"
+    class="fastboard-icon-stroke-color"
+  />
+</svg>

package/src/components/Icons/SelectorFilled.svelte

@@ -0,0 +1,18 @@
+<script lang="ts">
+  import type { Theme } from "../../typings";
+
+  export let theme: Theme = "light";
+  export let active = false;
+</script>
+
+<svg fill="none" viewBox="0 0 24 24" class="fastboard-icon {theme}" class:is-active={active}>
+  <path
+    stroke="#5D6066"
+    stroke-dasharray="1.25 1.25"
+    stroke-linejoin="round"
+    stroke-width="1.25"
+    d="M18 11V4H4v14h7"
+    class="fastboard-icon-stroke-color"
+  />
+  <path fill="#5D6066" d="m15 20-2-7 7 2-3.5 1.5L15 20Z" class="fastboard-icon-fill-color" />
+</svg>

package/src/components/Icons/SpeechBalloon.svelte

@@ -0,0 +1,16 @@
+<script lang="ts">
+  import type { Theme } from "../../typings";
+
+  export let theme: Theme = "light";
+  export let active = false;
+</script>
+
+<svg fill="none" viewBox="0 0 24 24" class="fastboard-icon {theme}" class:is-active={active}>
+  <path
+    d="M17 4.5c.414 0 .79.168 1.06.44.272.27.44.646.44 1.06v9c0 .414-.168.79-.44 1.06a1.49 1.49 0 0 1-1.06.44h-4.207l-2.715 2.715-1.81-2.715H7a1.49 1.49 0 0 1-1.06-.44A1.495 1.495 0 0 1 5.5 15V6c0-.414.168-.79.44-1.06A1.49 1.49 0 0 1 7 4.5Z"
+    stroke="#5D6066"
+    stroke-linejoin="round"
+    stroke-width="1.25"
+    class="fastboard-icon-stroke-color"
+  />
+</svg>

package/src/components/Icons/Star.svelte

@@ -0,0 +1,16 @@
+<script lang="ts">
+  import type { Theme } from "../../typings";
+
+  export let theme: Theme = "light";
+  export let active = false;
+</script>
+
+<svg fill="none" viewBox="0 0 24 24" class="fastboard-icon {theme}" class:is-active={active}>
+  <path
+    stroke="#5D6066"
+    stroke-linejoin="round"
+    stroke-width="1.25"
+    d="m12 4 1.88 5.411 5.728.117-4.565 3.46 1.66 5.484L12 15.2l-4.702 3.272 1.659-5.483-4.565-3.461 5.727-.117L12 4Z"
+    class="fastboard-icon-stroke-color"
+  />
+</svg>

package/src/components/Icons/StarBolded.svelte

@@ -0,0 +1,16 @@
+<script lang="ts">
+  import type { Theme } from "../../typings";
+
+  export let theme: Theme = "light";
+  export let active = false;
+</script>
+
+<svg fill="none" viewBox="0 0 24 24" class="fastboard-icon {theme}" class:is-active={active}>
+  <path
+    stroke="#5D6066"
+    stroke-linejoin="round"
+    stroke-width="1.75"
+    d="m12 4 1.88 5.411 5.728.117-4.565 3.46 1.66 5.484L12 15.2l-4.702 3.272 1.659-5.483-4.565-3.461 5.727-.117L12 4Z"
+    class="fastboard-icon-stroke-color"
+  />
+</svg>

package/src/components/Icons/Text.svelte

@@ -0,0 +1,16 @@
+<script lang="ts">
+  import type { Theme } from "../../typings";
+
+  export let theme: Theme = "light";
+  export let active = false;
+</script>
+
+<svg fill="none" viewBox="0 0 24 24" class="fastboard-icon {theme}" class:is-active={active}>
+  <path
+    stroke="#5D6066"
+    stroke-linejoin="round"
+    stroke-width="1.25"
+    d="M6 7V5h5m7 2V5h-5M8 19h3m5 0h-3m-2 0V5m0 14h2M11 5h2m0 0v14"
+    class="fastboard-icon-stroke-color"
+  />
+</svg>

package/src/components/Icons/TextFilled.svelte

@@ -0,0 +1,17 @@
+<script lang="ts">
+  import type { Theme } from "../../typings";
+
+  export let theme: Theme = "light";
+  export let active = false;
+</script>
+
+<svg fill="none" viewBox="0 0 24 24" class="fastboard-icon {theme}" class:is-active={active}>
+  <path fill="#3381FF" stroke="#5D6066" d="M11.5 5.5h1v13h-1z" class="fastboard-icon-stroke-color" />
+  <path
+    stroke="#5D6066"
+    stroke-linejoin="round"
+    stroke-width="1.25"
+    d="M6 7V5h5m7 2V5h-5M8 19h3m5 0h-3m-2 0V5m0 14h2M11 5h2m0 0v14"
+    class="fastboard-icon-stroke-color"
+  />
+</svg>

package/src/components/Icons/Triangle.svelte

@@ -0,0 +1,16 @@
+<script lang="ts">
+  import type { Theme } from "../../typings";
+
+  export let theme: Theme = "light";
+  export let active = false;
+</script>
+
+<svg fill="none" viewBox="0 0 24 24" class="fastboard-icon {theme}" class:is-active={active}>
+  <path
+    stroke="#5D6066"
+    stroke-linejoin="round"
+    stroke-width="1.25"
+    d="m12 5 8 14H4l8-14Z"
+    class="fastboard-icon-stroke-color"
+  />
+</svg>