/*
 This file is a part of libertysoil.org website
 Copyright (C) 2016  Loki Education (Social Enterprise)

 This program is free software: you can redistribute it and/or modify
 it under the terms of the GNU Affero General Public License as published by
 the Free Software Foundation, either version 3 of the License, or
 (at your option) any later version.

 This program is distributed in the hope that it will be useful,
 but WITHOUT ANY WARRANTY; without even the implied warranty of
 MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
 GNU Affero General Public License for more details.

 You should have received a copy of the GNU Affero General Public License
 along with this program.  If not, see <http://www.gnu.org/licenses/>.
*/
import React, { PropTypes } from 'react';
import classNames from 'classnames';

import * as MdIconPack from 'react-icons/lib/md';
import { FaHashtag, FaAt } from 'react-icons/lib/fa';

const FaIconPack = { FaHashtag, FaAt };

function findIcon(iconName) {
  const camelized = iconName.replace(/(?:^|[-_])(\w)/g, (match, c) =>
    c ? c.toUpperCase() : ''
  );
  const capitalized = camelized.charAt(0).toUpperCase() + camelized.slice(1);

  return MdIconPack[`Md${capitalized}`] || FaIconPack[`Fa${capitalized}`];
}

const IconComponent = ({
  className,
  color,
  disabled,
  icon,
  inactive,
  onClick,
  outline,
  spin,
  size,
  ...props
}) => {
  const Icon = findIcon(icon);

  const classNameIcon = classNames('icon', {
    'icon-outline': outline,
    'icon-disabled': disabled,
    'icon--inactive': inactive,
    'micon-rotate': spin,
    [`micon-${size}`]: size,
    [`icon--size_${size}`]: size,
    [className]: className,
  });

  const classNameIconPic = classNames('micon', {
    [`color-${color}`]: color,
    [`micon-${size}`]: size,
    [`icon--size_${size}`]: size
  });

  let renderedIcon = false;
  if (Icon) {
    renderedIcon = <Icon className={classNameIconPic} />;
  }

  let localOnClick = onClick;
  if (disabled) {
    localOnClick = null;
  }

  return (
    <div
      {...props}
      className={classNameIcon}
      disabled={disabled}
      onClick={localOnClick}
    >
      {renderedIcon}
    </div>
  );
};

IconComponent.propTypes = {
  className: PropTypes.string,
  color: PropTypes.string,
  disabled: PropTypes.bool,
  icon: PropTypes.string,
  onClick: PropTypes.func,
  outline: PropTypes.bool,
  size: PropTypes.string,
  spin: PropTypes.bool
};

IconComponent.defaultProps = {
  icon: ''
};

export default IconComponent;

@@ -884,35 +884,31 @@
 %0Aimport 
-%7B FaHashtag, FaAt %7D
+* as FaIconPack
  from 'r
@@ -932,49 +932,8 @@
 ';%0A%0A
-const FaIconPack = %7B FaHashtag, FaAt %7D;%0A%0A
 func
@@ -954,16 +954,26 @@
 iconName
+, packName
 ) %7B%0A  co
@@ -1151,16 +1151,164 @@
 ce(1);%0A%0A
+  if (packName === 'md') %7B%0A    return MdIconPack%5B%60Md$%7Bcapitalized%7D%60%5D;%0A  %7D%0A  if (packName === 'fa') %7B%0A    return FaIconPack%5B%60Fa$%7Bcapitalized%7D%60%5D;%0A  %7D%0A
   return
@@ -1478,16 +1478,24 @@
 utline,%0A
+  pack,%0A
   spin,%0A
@@ -1549,16 +1549,22 @@
 con(icon
+, pack
 );%0A%0A  co
@@ -2517,16 +2517,55 @@
 s.bool,%0A
+  pack: PropTypes.oneOf(%5B'md', 'fa'%5D),%0A
   size: 

Add 'pack' property to Icon component, import FontAwesome