addressed PR comments

Author: bmdalex

docs/src/examples/components/Icon/Variations/IconExampleColor.shorthand.tsx

@@ -16,27 +16,17 @@ const IconExampleColor = () => (
       <Icon name="call" bordered variables={{ outline: true }} />
       <Icon name="call-video" bordered variables={{ outline: true }} />
     </div>
-    <Text
-      content={
-        <span>
-          USING THE <code>color</code> VARIABLE:
-        </span>
-      }
-      weight="bold"
-    />
+    <Text weight="bold">
+      USING THE <code>color</code> VARIABLE:
+    </Text>
     <div>
       <Icon name="calendar" bordered variables={{ color: 'violet' }} />
       <Icon name="call" bordered variables={{ color: 'yellowgreen' }} />
       <Icon name="call-video" bordered variables={{ color: 'cornflowerblue' }} />
     </div>
-    <Text
-      content={
-        <span>
-          USING THE <code>borderColor</code> VARIABLE:
-        </span>
-      }
-      weight="bold"
-    />
+    <Text weight="bold">
+      USING THE <code>borderColor</code> VARIABLE:
+    </Text>
     <div>
       <Icon
         name="calendar"
@@ -54,14 +44,9 @@ const IconExampleColor = () => (
         variables={{ color: 'cornflowerblue', borderColor: 'orangered' }}
       />
     </div>
-    <Text
-      content={
-        <span>
-          USING THE <code>color</code> PROP:
-        </span>
-      }
-      weight="bold"
-    />
+    <Text weight="bold">
+      USING THE <code>color</code> PROP:
+    </Text>
     <div>
       <ProviderConsumer
         render={({ siteVariables: { emphasisColors, naturalColors } }) =>

src/themes/teams/components/Icon/iconStyles.ts

@@ -10,15 +10,15 @@ import { pxToRem } from '../../utils'
 import { getStyle as getSvgStyle } from './svg'
 import { IconVariables, IconSizeModifier } from './iconVariables'
 
-const sizes = new Map([
-  ['smallest', 7],
-  ['smaller', 10],
-  ['small', 12],
-  ['medium', 16],
-  ['large', 20],
-  ['larger', 32],
-  ['largest', 40],
-])
+const sizes: { [key in IconSize]: number } = {
+  smallest: 7,
+  smaller: 10,
+  small: 12,
+  medium: 16,
+  large: 20,
+  larger: 32,
+  largest: 40,
+}
 
 const getDefaultFontIcon = (iconName: string) => {
   return callable(fontAwesomeIcons(iconName).icon)()
@@ -75,8 +75,9 @@ const getPaddedStyle = (): ICSSInJSStyle => ({
 
 const getIconSize = (size: IconSize, sizeModifier: IconSizeModifier): number => {
   if (!sizeModifier) {
-    return sizes.get(size)
+    return sizes[size]
   }
+
   const modifiedSizes = {
     large: {
       x: 24,

src/themes/teams/components/Icon/iconVariables.ts

@@ -14,10 +14,10 @@ export interface IconVariables {
   redColor?: string
   disabledColor: string
 
-  outline?: boolean
   horizontalSpace: string
   margin: string
-  sizeModifier: IconSizeModifier
+  outline?: boolean
+  sizeModifier?: IconSizeModifier
 }
 
 const colorVariant = 500
@@ -32,8 +32,7 @@ export default (siteVars): IconVariables => ({
   redColor: siteVars.red,
   disabledColor: siteVars.gray06,
 
-  outline: undefined,
   horizontalSpace: pxToRem(10),
   margin: `0 ${pxToRem(8)} 0 0`,
-  sizeModifier: undefined,
+  outline: undefined,
 })