Migrate the project to use the new Icon component

src/components/alt-button.js

@@ -18,7 +18,7 @@
 import React, { PropTypes } from 'react';
 import classNames from 'classnames';
 
-import Icon from './icon';
+import { OldIcon as Icon } from './icon';
 
 export default class AltButton extends React.Component {
   static defaultClassName = [
@@ -56,7 +56,7 @@ export default class AltButton extends React.Component {
       };
     } else {
       finalIcon = {
-        size: 'small',
+        size: 'big',
         color: 'gray',
         icon
       };

src/components/bio/card.js

@@ -18,13 +18,15 @@
 import React, { PropTypes } from 'react';
 import classNames from 'classnames';
 
-import Icon from '../icon';
+import { OldIcon as Icon } from '../icon';
+
+const ICON_SIZE = { inner: 'xxl', outer: 'l' };
 
 export default function BioCard({ className, icon, onClick, title, children }) {
   return (
     <div className={classNames('bio__card bio-card', className)}>
       <div className="bio-card__container" onClick={onClick}>
-        <Icon {...icon} className={classNames('bio-card__icon', icon.className)} />
+        <Icon size={ICON_SIZE} {...icon} className={classNames('bio-card__icon', icon.className)} />
         <div className="bio-card__title">{title}</div>
       </div>
       <div>{children}</div>

src/components/bio/informer.js

@@ -18,9 +18,11 @@
 import React from 'react';
 import Link from 'react-router/lib/Link';
 
-import Icon from '../icon';
+import { OldIcon as Icon } from '../icon';
 import BasicRiverItem from '../river/theme/basic';
 
+const ICON_SIZE = { inner: 'xl', outer: 'l' };
+
 export default function YourBioInformer({ username }) {
   return (
     <BasicRiverItem
@@ -30,6 +32,7 @@ export default function YourBioInformer({ username }) {
           className="bio__icon bio__icon--bordered bio__informer-icon"
           icon="exclamation-circle"
           pack="fa"
+          size={ICON_SIZE}
         />
       }
     >

src/components/bio/river.js

@@ -22,13 +22,15 @@ import isUndefined from 'lodash/isUndefined';
 import { getName } from '../../utils/user';
 import { PROFILE_POST_TYPES as t } from '../../consts/postTypeConstants';
 import BasicRiverItem from '../river/theme/basic';
-import Icon from '../icon';
+import { OldIcon as Icon } from '../icon';
 import Logo from '../logo';
 import Time from '../time';
 import User from '../user';
 import ProfilePost from './post';
 import PictureChangePost from './picture-change-post';
 
+const SIGNUP_ICON_SIZE = { inner: 'lm', outer: 's' };
+
 const SignUpIcon = ({ user }) => (
   <div className="bio__icon--type_signup layout layout-align_center layout-align_vertical">
     <User
@@ -40,6 +42,7 @@ const SignUpIcon = ({ user }) => (
       color="gray"
       icon="arrow-right"
       pack="fa"
+      size={SIGNUP_ICON_SIZE}
     />
     <Logo isLink={false} />
   </div>

src/components/breadcrumbs/breadcrumbs.js

@@ -22,7 +22,7 @@ import compact from 'lodash/compact';
 import keys from 'lodash/keys';
 import isEqual from 'lodash/isEqual';
 
-import Icon from '../icon';
+import { OldIcon as Icon } from '../icon';
 
 const defaultShortView = (
   <Icon

src/components/create-post.js

@@ -25,10 +25,12 @@ import { ArrayOfSchools as ArrayOfSchoolsPropType } from '../prop-types/schools'
 import { TAG_HASHTAG, TAG_LOCATION, TAG_SCHOOL } from '../consts/tags';
 import ClickOutsideComponentDecorator from '../decorators/ClickOutsideComponentDecorator';
 
-import Icon from './icon';
+import { OldIcon as Icon } from './icon';
 import Tag from './tag';
 import AddTagModal from './add-tag-modal';
 
+const MORE_ICON_SIZE = { inner: 'l', outer: 'm' };
+
 class CreatePost extends React.Component {
   static displayName = 'CreatePost';
   static propTypes = {
@@ -230,6 +232,7 @@ class CreatePost extends React.Component {
                 <Icon
                   className="more_button"
                   icon={expanded ? 'more_vert' : 'more_horiz'}
+                  size={MORE_ICON_SIZE}
                   onClick={this._handleClickOnMore}
                 />
                 {expanded &&

src/components/dropdown/v1.js

@@ -20,12 +20,32 @@ import classNames from 'classnames';
 import omit from 'lodash/omit';
 
 import ClickOutsideComponentDecorator from '../../decorators/ClickOutsideComponentDecorator';
-import Icon from '../icon';
+import { OldIcon as Icon } from '../icon';
+
+const getIcon = (icon) => {
+  let props;
+  if (icon && typeof icon === 'object') {
+    props = icon;
+  } else {
+    props = { icon };
+  }
+
+  return (
+    <Icon
+      className="micon micon-small"
+      key="icon"
+      {...props}
+    />
+  );
+};
 
 class OpenedDropdownContent extends React.Component {
   static propTypes = {
     children: PropTypes.node,
-    icon: PropTypes.string,
+    icon: PropTypes.oneOfType([
+      PropTypes.string,
+      PropTypes.shape(Icon.propTypes)
+    ]),
     onClose: PropTypes.func
   };
 
@@ -41,7 +61,7 @@ class OpenedDropdownContent extends React.Component {
     return (
       <div>
         <div className="dropdown__trigger action" onClick={this.props.onClose}>
-          <Icon className="micon micon-small" icon={this.props.icon} />
+          {this.props.icon}
         </div>
         {this.props.children &&
           <div className="dropdown__body">
@@ -53,7 +73,10 @@ class OpenedDropdownContent extends React.Component {
   }
 }
 
-const defaultIcon = 'arrow_drop_down';
+const defaultIcon = {
+  icon: 'arrow_drop_down', size: { inner: 'lm', outer: 's' }
+};
+
 const Body = ClickOutsideComponentDecorator(OpenedDropdownContent);
 
 export default class Dropdown extends React.Component {
@@ -104,6 +127,8 @@ export default class Dropdown extends React.Component {
       i = defaultIcon;
     }
 
+    i = getIcon(i);
+
     let body;
     let dropdownClassName = classNames(
       'dropdown',
@@ -119,9 +144,10 @@ export default class Dropdown extends React.Component {
       );
     } else {
       dropdownClassName += ' dropdown-closed';
+
       body = (
         <div className="dropdown__trigger action" onClick={this.toggleVisibility}>
-          <Icon className="micon micon-small" icon={i} />
+          {i}
         </div>
       );
     }

src/components/dropdown/v2.js

@@ -20,7 +20,7 @@ import classNames from 'classnames';
 import omit from 'lodash/omit';
 
 import ClickOutsideComponentDecorator from '../../decorators/ClickOutsideComponentDecorator';
-import Icon from '../icon';
+import { OldIcon as Icon } from '../icon';
 
 class OpenedDropdownV2Content extends React.Component {
   static propTypes = {
@@ -54,7 +54,12 @@ class OpenedDropdownV2Content extends React.Component {
 }
 
 const Body = ClickOutsideComponentDecorator(OpenedDropdownV2Content);
-export const defaultIcon = <Icon className="micon micon-small" icon="arrow_drop_down" />;
+
+const ICON_SIZE = { inner: 'lm', outer: 's' };
+
+export const defaultIcon = (
+  <Icon icon="arrow_drop_down" size={ICON_SIZE} />
+);
 
 export default class DropdownV2 extends React.Component {
   static displayName = 'DropdownV2';

src/components/form/field/index.js

@@ -19,7 +19,7 @@ import React, { PropTypes } from 'react';
 import classNames from 'classnames';
 import omit from 'lodash/omit';
 
-import Icon from '../../icon';
+import { OldIcon as Icon } from '../../icon';
 
 const STATUS_ICONS = {
   invalid: {
@@ -33,6 +33,8 @@ const STATUS_ICONS = {
   unfilled: {}
 };
 
+const DOT_ICON_SIZE = { outer: 'l', inner: 's' };
+
 export default class FormField extends React.Component {
   static propTypes = {
     className: PropTypes.string,
@@ -94,7 +96,7 @@ export default class FormField extends React.Component {
         className="form__dot"
         color={dotColor}
         icon="fiber-manual-record"
-        size="common"
+        size={DOT_ICON_SIZE}
       />
     );
 

src/components/ignore-button.js

@@ -16,7 +16,9 @@
  along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
 import React from 'react';
-import Icon from './icon';
+import { OldIcon as Icon } from './icon';
+
+const ICON_SIZE = { inner: 'lm', outer: 'm' };
 
 export default class IgnoreButton extends React.Component {
   static displayName = 'IgnoreButton';
@@ -39,6 +41,7 @@ export default class IgnoreButton extends React.Component {
         className="suggested-user__button suggested-user__button-ignore button-light_gray action"
         icon="angle-right"
         pack="fa"
+        size={ICON_SIZE}
         title="Ignore"
         onClick={this.clickHandler}
       />

src/components/like-tag-button.js

@@ -19,7 +19,9 @@ import React, { PropTypes } from 'react';
 import ga from 'react-google-analytics';
 import { omit } from 'lodash';
 
-import Icon from './icon';
+import { OldIcon as Icon } from './icon';
+
+const ICON_SIZE = { inner: 'lm', outer: 'm' };
 
 /**
  * Universal component to use in the TagPage, SchoolPage, GeotagPage components.
@@ -80,9 +82,10 @@ export default class LikeTagButton extends React.Component {
       <Icon
         {...iconProps}
         className={`action ${className}`}
-        onClick={this._toggleLike}
         icon={icon}
         color={color}
+        size={ICON_SIZE}
+        onClick={this._toggleLike}
       />
     );
   }

src/components/login/v2.js

@@ -45,7 +45,7 @@ const ERROR_MESSAGES = [
 
 const ERROR_TAG_MAPPING = {
   'login.errors.invalid': {
-    icon: { color: 'orange', icon: 'question-circle' },
+    icon: { color: 'orange', icon: 'question-circle', size: { outer: undefined, inner: 'l' } },
     name: { name: (translate) => translate('login.qs.forget_pass') },
     url: '/resetpassword'
   }

src/components/navigation-item.js

@@ -21,7 +21,9 @@ import { Link } from 'react-router';
 import omit from 'lodash/omit';
 import CSSTransitionGroup from 'react-transition-group/CSSTransitionGroup';
 
-import Icon from './icon';
+import { OldIcon as Icon } from './icon';
+
+export const ICON_SIZE = { inner: 'ms', outer: 'm' };
 
 const NavigationItem = (props) => {
   if (props.to) {
@@ -68,6 +70,7 @@ const NavigationItemPlain = ({
     const { icon, badge, ...htmlProps } = props;
 
     const finalIcon = {
+      size: ICON_SIZE,
       ...icon,
       className: classNames('navigation-item__icon', {
         [icon && icon.className]: icon && icon.className
@@ -144,10 +147,10 @@ const NavigationItemAsLink = ({
     const { icon, badge, ...htmlProps } = props;
 
     const finalIcon = {
+      round: false,
+      size: ICON_SIZE,
       ...icon,
-      className: classNames('navigation-item__icon', {
-        [icon && icon.className]: icon && icon.className
-      })
+      className: classNames('navigation-item__icon', icon && icon.className)
     };
 
     const content = (

src/components/page/captions.js

@@ -19,11 +19,12 @@ import React, { PropTypes } from 'react';
 
 import { getName } from '../../utils/user';
 import Avatar from '../user/avatar';
-import Icon from '../icon';
+import { OldIcon as Icon } from '../icon';
 import {
   PageCaption
 } from '../page';
 
+const ICON_SIZE = { inner: 'ml', outer: 'm' };
 
 export const UserCaption = ({ user, title, subtitle }) => {
   if (!user) {
@@ -35,7 +36,7 @@ export const UserCaption = ({ user, title, subtitle }) => {
   return (
     <PageCaption
       iconLeft={<Avatar user={user} isRound={false} size={60} />}
-      iconRight={<Icon className="icon-outline--khaki color-white" icon="at" outline size="big" />}
+      iconRight={<Icon color="white" icon="at" outline="khaki" size={ICON_SIZE} />}
     >
       <h2 className="page-head__title">{title || user.get('username')}</h2>
       <h1 className="page-head__subtitle">{subtitle || getName(user)}</h1>

src/components/post/brief.js

@@ -24,6 +24,8 @@ import User from '../user';
 import EditPost from './tools/edit-post';
 import Subscribe from './tools/subscribe';
 
+const DROPDOWN_ICON = { icon: 'more_vert', size: 'block' };
+
 export default class PostBrief extends React.Component {
   static propTypes = {};
 
@@ -51,7 +53,7 @@ export default class PostBrief extends React.Component {
         </div>
 
         {current_user.get('id') &&
-          <Dropdown className="card__toolbar_item" icon="more_vert">
+          <Dropdown className="card__toolbar_item" icon={DROPDOWN_ICON}>
             <MenuItem>
               <Subscribe
                 is_logged_in={!!userId}

src/components/post/comment.js

@@ -27,6 +27,11 @@ import Dropdown from '../dropdown';
 import MenuItem from '../menu-item';
 import paragraphify from '../../utils/paragraphify';
 
+const CLOSED_DROPDOWN_ICON = {
+  color: 'grey',
+  icon: 'fiber-manual-record'
+};
+
 class Comment extends Component {
   constructor(props) {
     super(props);
@@ -129,7 +134,7 @@ class Comment extends Component {
       // TODO: use 'brightness1' as Dropdown.props.iconClosed
       // look at .comment__dropdown definition
       toolbar = (
-        <Dropdown className="comment__dropdown" iconClosed="fiber-manual-record" theme="new">
+        <Dropdown className="comment__dropdown" iconClosed={CLOSED_DROPDOWN_ICON} theme="new">
           <MenuItem className="menu__item--theme_new" onClick={this.editComment}>
             Edit comment
           </MenuItem>