Repository: uber-web/baseui
Pull request #543 (2018-11-27 17:45:43)

fix: allow Icons to receive color prop
#### Fixed Issues

Several SVG icons were updated to rely on the `[fill="currentColor"]` property. The current `Icon` component was only applying a `fill` based on the `color` prop it was provided.

![failingcurrentcolor](https://user-images.githubusercontent.com/4030377/49100715-5c3eca80-f229-11e8-96b7-a4f981bf9e25.gif)

#### Patch: Bug Fix

The fix was to also apply that color to the `color` CSS property.

![passingcurrentcolor](https://user-images.githubusercontent.com/4030377/49100718-5fd25180-f229-11e8-836a-3181738af655.gif)

#### License

MIT



Patch:
diff --git a/src/icon/styled-components.js b/src/icon/styled-components.js
index 94e778c02..715688e39 100644
--- a/src/icon/styled-components.js
+++ b/src/icon/styled-components.js
@@ -21,6 +21,7 @@ export function getSvgStyles({$theme, $size, $color}: StyledComponentParamsT) {
   return {
     display: 'inline-block',
     fill: $color || 'currentColor',
+    color: $color || 'currentColor',
     height: $size,
     width: $size,
   };


Test patch:
diff --git a/src/icon/__tests__/__snapshots__/styled-components.test.js.snap b/src/icon/__tests__/__snapshots__/styled-components.test.js.snap
index 0581642f1..52eae4f31 100644
--- a/src/icon/__tests__/__snapshots__/styled-components.test.js.snap
+++ b/src/icon/__tests__/__snapshots__/styled-components.test.js.snap
@@ -2,6 +2,7 @@
 
 exports[`Icon styled components Svg has correct default styles: Svg basic render 1`] = `
 Object {
+  "color": "currentColor",
   "display": "inline-block",
   "fill": "currentColor",
   "height": "$theme.sizing.scale600",
diff --git a/src/spinner/__tests__/__snapshots__/styled-components.test.js.snap b/src/spinner/__tests__/__snapshots__/styled-components.test.js.snap
index aeddad389..a3c7b8b19 100644
--- a/src/spinner/__tests__/__snapshots__/styled-components.test.js.snap
+++ b/src/spinner/__tests__/__snapshots__/styled-components.test.js.snap
@@ -13,6 +13,7 @@ Object {
     },
   },
   "animationTimingFunction": "linear",
+  "color": "currentColor",
   "cursor": "wait",
   "display": "inline-block",
   "fill": "$theme.colors.primary400",
@@ -34,6 +35,7 @@ Object {
     },
   },
   "animationTimingFunction": "linear",
+  "color": "currentColor",
   "cursor": "wait",
   "display": "inline-block",
   "fill": "$theme.colors.primary400",
@@ -55,6 +57,7 @@ Object {
     },
   },
   "animationTimingFunction": "linear",
+  "color": "currentColor",
   "cursor": "wait",
   "display": "inline-block",
   "fill": "$theme.colors.primary400",
diff --git a/src/toast/__tests__/__snapshots__/styled-components.test.js.snap b/src/toast/__tests__/__snapshots__/styled-components.test.js.snap
index de1232e47..c327995d9 100644
--- a/src/toast/__tests__/__snapshots__/styled-components.test.js.snap
+++ b/src/toast/__tests__/__snapshots__/styled-components.test.js.snap
@@ -28,6 +28,7 @@ Object {
 
 exports[`Component styled components StyledCloseIcon - basic render: StyledSvg has correct default styles 1`] = `
 Object {
+  "color": "currentColor",
   "cursor": "pointer",
   "display": "inline-block",
   "fill": "currentColor",