Untitled

<!DOCTYPE html>
<html>

<head>
  <script data-require="react@*" data-semver="15.2.0" src="https://cdnjs.cloudflare.com/ajax/libs/react/15.2.0/react.js"></script>
  <script data-require="react@*" data-semver="15.2.0" src="https://cdnjs.cloudflare.com/ajax/libs/react/15.2.0/react-dom.min.js"></script>
</head>

<body>
  <div id="app"></div>
  <script src="script.js"></script>
</body>

</html>

"use babel";

const LocationIcon = ({width, height, pinFill, baseFill}) => (
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" width={width} height={height}>
    <title>Location Icon</title>
    <path fill={pinFill} d="M49.5 82.77l-1.25-1.64c-1.05-1.4-25.73-34.27-25.73-48.66C22.52 17.6 34.62 5.5 49.5 5.5s26.97 12.1 26.97 26.97c0 14.4-24.68 47.26-25.73 48.66l-1.25 1.64zm0-74.17c-13.17 0-23.87 10.7-23.87 23.87 0 11.62 18.8 38.16 23.86 45.1 5.04-6.95 23.83-33.5 23.83-45.1C73.33 19.3 62.63 8.6 49.5 8.6zm0 35.6c-6.48 0-11.75-5.26-11.75-11.73 0-6.48 5.27-11.75 11.74-11.75S61.2 26 61.2 32.47 55.96 44.2 49.48 44.2zm0-20.36c-4.77 0-8.64 3.87-8.64 8.63 0 4.75 3.87 8.62 8.63 8.62 4.73 0 8.6-3.9 8.6-8.65 0-4.76-3.87-8.63-8.63-8.63z"/>
    <path fill={baseFill} d="M50.46 91.27c-12.4 0-21.68-3.97-22.1-9.45-.4-5.13 6.7-7.27 10.95-8.1l1.97 2.6c-7.5.75-9.98 4.24-9.9 5.2.16 2.3 6.57 7.06 18.98 7.06 11.83 0 17.16-4.64 17.3-6.77.13-1.52-4-5.2-9.88-5.5l1.98-2.6c10.24 1.9 11.03 6.5 10.9 8.4-.4 5.4-8.7 9.2-20.17 9.2z"/>
  </svg>
);

LocationIcon.propTypes = {
  width: React.PropTypes.number,  
  height: React.PropTypes.number,
  pinFill: React.PropTypes.string,
  baseFill: React.PropTypes.string
};

LocationIcon.defaultProps = {
  width: 128,
  height: 128,
  pinFill: '#333',
  baseFill: '#DDD'
};

class Application extends React.Component {
  render() {
    return (
      <div>
        <LocationIcon />
        <LocationIcon width={200} height={200} pinFill="#bada55" baseFill="#c0ffee" />
      </div>
    );
  }
}

ReactDOM.render(<Application />, document.getElementById('app'));