import React from 'react';
import PropTypes from 'prop-types';

import FaStar from 'react-icons/fa/star';
import FaStarO from 'react-icons/fa/star-o';

const Star = ({ colored, ...props }) => (
  <div {...props}>
    { colored ? <FaStar /> : <FaStarO /> }
  </div>
);

Star.propTypes = {
  colored: PropTypes.bool
}

export default Star;
import React from 'react';
import PropTypes from 'prop-types';

import FaStar from 'react-icons/fa/star';
import FaStarO from 'react-icons/fa/star-o';

const Star = ({ colored, fillColor, strokeColor, width = 14, height = 14, ...props }) => (
  <div {...props}>
    { colored ? 
      <FaStar  style={ fillColor ? { color: fillColor, width, height } : { width, height } } /> : 
      <FaStarO style={ strokeColor ? { color: strokeColor, width, height } : { width, height } } /> 
    }
  </div>
);

Star.propTypes = {
  colored: PropTypes.bool,
  fillColor: PropTypes.string,
  strokeColor: PropTypes.string
}

export default Star;
Allow star fill and stroke color to be editted along with width and height
Allow star fill and stroke color to be editted along with width and height
