Added spectrum button component to display additional Svelte/UXP functionality

Author: jake-pauls

ui-svelte-starter/src/App.svelte

@@ -1,5 +1,6 @@
 <script>
-  import { onMount } from "svelte";
+  import UXPButton from './UXPButton.svelte';
+  import { onMount } from 'svelte';
 
   let count = 0;
   onMount(() => {
@@ -18,6 +19,7 @@
     <sp-heading>Plugin has been open for {count} seconds.</sp-heading>
     <sp-detail>Visit the <a href="https://www.adobe.io/photoshop/uxp/">UXP documentation</a> to learn how to build plugins for Photoshop.</sp-detail>
   </div>
+  <UXPButton variant="primary" icon="ChevronRightSmall" href="https://svelte.dev/"/>
 </div>
 
 <style>

ui-svelte-starter/src/UXPButton.svelte

@@ -0,0 +1,31 @@
+<script>
+  export let variant;
+  export let icon;
+  export let href;
+</script>
+
+<div class="container">
+  <sp-icons-medium></sp-icons-medium>
+  <sp-button {variant} quiet>
+    {#if icon}
+      <sp-icon name="ui:{icon}" size="xxs" slot="icon"></sp-icon>
+    {/if}
+    <a {href}>Try Svelte</a> 
+  </sp-button>
+</div>
+
+<style>
+  .container {
+    margin-top: 3px;
+    padding: 2px;
+  }
+
+  sp-button a {
+    color: var(--uxp-host-text-color);
+    text-decoration: none; 
+  }
+
+  sp-button a:hover {
+    text-decoration: none;
+  }
+</style>