From f04063c26b2c3ee34fdd352329280d016efcb728 Mon Sep 17 00:00:00 2001
From: kevmodrome <kevin@kevmodro.me>
Date: Tue, 19 Jan 2021 13:42:49 +0100
Subject: [PATCH 1/2] retains icons design panel options while being able to
 change color in settings panel

---
 packages/standard-components/src/Icon.svelte | 13 +++++++------
 1 file changed, 7 insertions(+), 6 deletions(-)

diff --git a/packages/standard-components/src/Icon.svelte b/packages/standard-components/src/Icon.svelte
index 643b07836a..783411cc14 100644
--- a/packages/standard-components/src/Icon.svelte
+++ b/packages/standard-components/src/Icon.svelte
@@ -1,15 +1,16 @@
 <script>
   import { getContext } from "svelte"
 
-  // Add this back once we can define specific design options to expose
-  // const { styleable } = getContext("sdk")
-  // const component = getContext("component")
+  const { styleable } = getContext("sdk")
+  const component = getContext("component")
 
   export let icon = ""
   export let size = "fa-lg"
   export let color = "#000"
 </script>
 
-<i
-  style={`color: ${color};`}
-  class={`${icon} ${size}`} />
+<div style="color: {color}; display: contents">
+  <i
+  use:styleable={$component.styles}
+  class="{icon} {size}" />
+</div>
\ No newline at end of file

From 4f71f70053755e597bdc4ae03ebe45ecf04061e0 Mon Sep 17 00:00:00 2001
From: kevmodrome <kevin@kevmodro.me>
Date: Tue, 19 Jan 2021 14:00:15 +0100
Subject: [PATCH 2/2] switch method of applying color style

---
 packages/standard-components/src/Icon.svelte | 16 ++++++++++------
 1 file changed, 10 insertions(+), 6 deletions(-)

diff --git a/packages/standard-components/src/Icon.svelte b/packages/standard-components/src/Icon.svelte
index 783411cc14..d175bfd6b0 100644
--- a/packages/standard-components/src/Icon.svelte
+++ b/packages/standard-components/src/Icon.svelte
@@ -6,11 +6,15 @@
 
   export let icon = ""
   export let size = "fa-lg"
-  export let color = "#000"
+  export let color = "#f00"
+  $: styles = {
+  ...$component.styles,
+  normal: {
+    ...$component.styles.normal,
+    color
+  }
+}
 </script>
 
-<div style="color: {color}; display: contents">
-  <i
-  use:styleable={$component.styles}
-  class="{icon} {size}" />
-</div>
\ No newline at end of file
+<i use:styleable={styles}
+  class="{icon} {size}" />
\ No newline at end of file