Adds Icon component to bbui

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>

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"

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>
 

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>