content: import React from 'react';
  import classNames from 'classnames';
  import { string, oneOf } from 'prop-types';
  
  const Avatar = ({ source, size, icon, initials, color, ...rest }) => {
    return (
      <figure
        style={{ background: color }}
        data-initial={initials}
        className={classNames({
          avatar: true,
          'avatar-xl': size === 'large',
          'avatar-lg': size === 'normal',
          'avatar-sm': size === 'small',
          'avatar-xs': size === 'mini'
        })}
        {...rest}
      >
        {(!initials || (initials && source)) && <img src={source} />}
        {icon && <img src={icon} className="avatar-icon" />}
      </figure>
    );
  };
  
  /***
   * Avatar property types
   */
  Avatar.propTypes = {
    /**
     * Avatar source
     */
    source: string,
    /***
     * Avatar size
     */
    size: oneOf(['mini', 'small', 'normal', 'large']),
    /**
     * Url of the icon
     */
    icon: string,
    /**
     * Initials can be displayed, if `source` was not loaded or provided
     */
    initials: string,
    /**
     * Any CSS-valid color value
     */
    color: string
  };
  
  /**
   * Avatar default properties
   */
  Avatar.defaultProps = {
    source: '',
    icon: '',
    size: 'small'
  };
  
  export default Avatar;
  