From d761a4ebfed70e2d212bac03a52134afbcde88bd Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Keviin=20=C3=85berg=20Kultalahti?= <kevin.aberg@gmail.com>
Date: Fri, 16 Apr 2021 12:24:06 +0200
Subject: [PATCH] Adds Icon component to bbui

---
 packages/bbui/src/Icon/Icon.svelte            | 19 +++++++++++++++++++
 packages/bbui/src/index.js                    |  2 +-
 .../src/components/start/AppCard.svelte       |  4 ++--
 .../start/BuilderSettingsButton.svelte        |  2 +-
 4 files changed, 23 insertions(+), 4 deletions(-)
 create mode 100644 packages/bbui/src/Icon/Icon.svelte

diff --git a/packages/bbui/src/Icon/Icon.svelte b/packages/bbui/src/Icon/Icon.svelte
new file mode 100644
index 0000000000..ad5faf5ae8
--- /dev/null
+++ b/packages/bbui/src/Icon/Icon.svelte
@@ -0,0 +1,19 @@
+<script context="module">
+    export const directions = ["n", "ne", "e", "se", "s", "sw", "w", "nw"]
+</script>
+
+<script>
+    export let direction = "n"
+    export let name = "Add"
+    export let hidden = false
+    export let s = false
+    export let m = false;
+    export let l = false;
+    export let xl = false
+
+    $: rotation = directions.indexOf(direction) * 45
+</script>
+
+<svg on:click class:spectrum-Icon--sizeS={s} class:spectrum-Icon--sizeM={m} class:spectrum-Icon--sizeL={l} class:spectrum-Icon--sizeXL={xl} class="spectrum-Icon" focusable="false" aria-hidden={hidden} aria-label="{name}" style={`transform: rotate(${rotation}deg)`}>
+    <use xlink:href="#spectrum-icon-18-{name}" />
+</svg>
\ No newline at end of file
diff --git a/packages/bbui/src/index.js b/packages/bbui/src/index.js
index f5b2987ad3..a84c2b1ad5 100644
--- a/packages/bbui/src/index.js
+++ b/packages/bbui/src/index.js
@@ -12,7 +12,7 @@ export { default as ActionButton } from "./ActionButton/ActionButton.svelte"
 export { default as ActionGroup } from "./ActionGroup/ActionGroup.svelte"
 export { default as ActionMenu } from "./ActionMenu/ActionMenu.svelte"
 export { default as Button } from "./Button/Button.svelte"
-export { default as Icon, iconOptions, directions } from "./Icons/Icon.svelte"
+export { default as Icon, directions } from "./Icon/Icon.svelte"
 export { default as Toggle } from "./Form/Toggle.svelte"
 export { default as Radio } from "./Form/Radio.svelte"
 export { default as Checkbox } from "./Form/Checkbox.svelte"
diff --git a/packages/builder/src/components/start/AppCard.svelte b/packages/builder/src/components/start/AppCard.svelte
index 9478d16315..4f8eae4902 100644
--- a/packages/builder/src/components/start/AppCard.svelte
+++ b/packages/builder/src/components/start/AppCard.svelte
@@ -1,6 +1,6 @@
 <script>  
   import { goto } from "@roxi/routify"
-  import { ActionButton, Heading, Spacer } from "@budibase/bbui"
+  import { ActionButton, Heading, Spacer, Icon } from "@budibase/bbui"
   import { notifications } from "@budibase/bbui"
   import Spinner from "components/common/Spinner.svelte"
   import download from "downloadjs"
@@ -36,7 +36,7 @@
     </ActionButton>
     {#if appExportLoading}
       <Spinner size="10" />
-    {:else}<i class="ri-folder-download-line" on:click={exportApp} />{/if}
+    {:else}<ActionButton icon="Download" quiet />{/if}
   </div>
 </div>
 
diff --git a/packages/builder/src/components/start/BuilderSettingsButton.svelte b/packages/builder/src/components/start/BuilderSettingsButton.svelte
index 9bf50ab25e..45712ad1b4 100644
--- a/packages/builder/src/components/start/BuilderSettingsButton.svelte
+++ b/packages/builder/src/components/start/BuilderSettingsButton.svelte
@@ -6,7 +6,7 @@
 </script>
 
 <div>
-  <Button overBackground quiet icon="Settings" text on:click={modal.show}>
+  <Button primary quiet icon="Settings" text on:click={modal.show}>
     Settings
   </Button>
 </div>