Merge 06c6dfd into 34cb591

src/components/Icon/styles/Icon.css.js

@@ -23,6 +23,8 @@ const css = `
   position: relative;
   width: ${config.size}px;
 
+  ${adjustIconScale()};
+
   &.is-center {
     margin-left: auto;
     margin-right: auto;
@@ -69,8 +71,6 @@ const css = `
       height: 100%;
       max-width: 100%;
       width: 100%;
-
-      ${adjust24To20Scale()};
     }
 
     circle,
@@ -127,14 +127,28 @@ function makeStateColorStyles(): string {
   )
 }
 
-function adjust24To20Scale(): string {
+function adjust20IconScale(scale): string {
   return `
-    &[height="24"],
-    &[width="24"],
-    &[viewBox*="24"] {
-      transform: scale(${24 / 20});
+    ${bem.element('icon')} {
+      svg {
+        &[height="20"],
+        &[width="20"],
+        &[viewBox*="20"] {
+          transform: scale(${scale});
+        }
+      }
     }
   `
 }
 
+// Scales older 20x20 icons to have the same base size as the newer
+// 24x24 set. This allows them to have a consistent visual size when
+// rendered into their `div` container.
+
+function adjustIconScale(): string {
+  return `
+    ${adjust20IconScale(20 / 24)};
+  `
+}
+
 export default css

stories/Icon.stories.js

@@ -1,5 +1,6 @@
 import React from 'react'
 import { storiesOf } from '@storybook/react'
+import { select } from '@storybook/addon-knobs'
 import { Flexy, Icon, Text } from '../src/index.js'
 import iconList from '../src/components/Icon/icons'
 import styled from '../src/components/styled'
@@ -41,10 +42,28 @@ const IconWrapper = styled('div')`
 `
 
 stories.add('icons', () => {
+  const size = select(
+    'size',
+    {
+      10: 10,
+      12: 12,
+      13: 13,
+      14: 14,
+      16: 16,
+      18: 18,
+      20: 20,
+      24: 24,
+      32: 32,
+      48: 48,
+      52: 52,
+    },
+    20
+  )
+
   const icons = Object.keys(iconList).map(i => (
     <WrapperUI key={i}>
       <IconWrapper>
-        <Icon name={i} key={i} center />
+        <Icon name={i} key={i} size={size} center />
       </IconWrapper>
       <TextWrapper size="12">{i}</TextWrapper>
     </WrapperUI>