Better tabs with icons

components/tabs/Tab.js

@@ -42,34 +42,24 @@ class Tab extends Component {
     }
   };
 
-  renderIcon = () => {
-    if (!this.props.icon) {
-      return null;
-    } else {
-      return (
-        <div>
-          <FontIcon value={this.props.icon}/>
-        </div>
-      );
-    }
-  };
-
   render () {
     const {
       onActive, // eslint-disable-line
-      active, activeClassName, className, disabled, hidden, theme, ...other
+      active, activeClassName, className, disabled, hidden, label, icon, theme, ...other
     } = this.props;
     const _className = classnames(theme.label, {
       [theme.active]: active,
       [theme.hidden]: hidden,
+      [theme.withText]: label,
+      [theme.withIcon]: icon,
       [theme.disabled]: disabled,
       [activeClassName]: active
     }, className);
 
     return (
       <label {...other} data-react-toolbox='tab' className={_className} onClick={this.handleClick}>
-        {this.renderIcon()}
-        {this.props.label}
+        {icon && <FontIcon className={theme.icon} value={icon}/>}
+        {label}
       </label>
     );
   }

components/tabs/_config.scss

@@ -1,6 +1,8 @@
 $tab-label-disabled-opacity: .2 !default;
 $tab-label-h-padding: 1.2 * $unit !default;
 $tab-label-height: 4.8 * $unit !default;
+$tab-icon-height: 2.4 * $unit !default;
+$tab-icon-margin-bottom: .8 * $unit !default;
 $tab-text-height: 1.4 * $unit !default;
 $tab-label-v-padding: ($tab-label-height - $tab-text-height) / 2 !default;
 $tab-navigation-border-color: $color-divider !default;

components/tabs/theme.scss

@@ -38,6 +38,24 @@
   &.hidden {
     display: none;
   }
+
+  &.withIcon {
+    padding-top: ($tab-label-v-padding - $tab-icon-margin-bottom / 2);
+    padding-bottom: ($tab-label-v-padding - $tab-icon-margin-bottom / 2);
+  }
+
+  &.withText {
+    .icon {
+      margin-bottom: $tab-icon-margin-bottom;
+    }
+  }
+}
+
+.icon {
+  display: block;
+  height: $tab-icon-height;
+  margin: 0 auto;
+  line-height: $tab-icon-height;
 }
 
 .pointer {