Make icon component slightly more presentable

packages/standard-components/manifest.json

@@ -811,30 +811,29 @@
         "type": "select",
         "label": "Size",
         "key": "size",
-        "defaultValue": "md",
+        "defaultValue": "ri-1x",
         "options": [
-          { "value": "ri-xxs", "label": "xxs" },
-          { "value": "ri-xs", "label": "xs" },
-          { "value": "ri-sm", "label": "sm" },
-          { "value": "ri-1x", "label": "md" },
-          { "value": "ri-lg", "label": "lg" },
-          { "value": "ri-xl", "label": "xl" },
-          { "value": "ri-2x", "label": "2x" },
-          { "value": "ri-3x", "label": "3x" },
-          { "value": "ri-4x", "label": "4x" },
-          { "value": "ri-5x", "label": "5x" },
-          { "value": "ri-6x", "label": "6x" },
-          { "value": "ri-7x", "label": "7x" },
-          { "value": "ri-8x", "label": "8x" },
-          { "value": "ri-9x", "label": "9x" },
-          { "value": "ri-10x", "label": "10x" }
+          { "value": "ri-xxs", "label": "XXS" },
+          { "value": "ri-xs", "label": "XS" },
+          { "value": "ri-sm", "label": "Small" },
+          { "value": "ri-1x", "label": "Medium" },
+          { "value": "ri-lg", "label": "Large" },
+          { "value": "ri-xl", "label": "XL" },
+          { "value": "ri-2x", "label": "2XL" },
+          { "value": "ri-3x", "label": "3XL" },
+          { "value": "ri-4x", "label": "4XL" },
+          { "value": "ri-5x", "label": "5XL" },
+          { "value": "ri-6x", "label": "6XL" },
+          { "value": "ri-7x", "label": "7XL" },
+          { "value": "ri-8x", "label": "8XL" },
+          { "value": "ri-9x", "label": "9XL" },
+          { "value": "ri-10x", "label": "10XL" }
         ]
       },
       {
         "type": "color",
         "label": "Color",
-        "key": "color",
-        "defaultValue": "#000"
+        "key": "color"
       },
       {
         "type": "event",

packages/standard-components/src/Icon.svelte

@@ -1,21 +1,34 @@
 <script>
   import { getContext } from "svelte"
+  import Placeholder from "./Placeholder.svelte"
 
-  const { styleable } = getContext("sdk")
+  const { styleable, builderStore } = getContext("sdk")
   const component = getContext("component")
 
-  export let icon = ""
-  export let size = "fa-lg"
-  export let color = "#f00"
+  export let icon
+  export let size
+  export let color
   export let onClick
 
   $: styles = {
     ...$component.styles,
     normal: {
       ...$component.styles.normal,
-      color,
+      color: color || "var(--spectrum-global-color-gray-900)",
     },
   }
 </script>
 
-<i use:styleable={styles} class="{icon} {size}" on:click={onClick} />
+{#if icon}
+  <i use:styleable={styles} class="{icon} {size}" on:click={onClick} />
+{:else if $builderStore.inBuilder}
+  <div use:styleable={styles}>
+    <Placeholder />
+  </div>
+{/if}
+
+<style>
+  div {
+    font-style: italic;
+  }
+</style>