Icon.js

// Icon.js
import React from 'react';
import PropTypes from 'prop-types';

const Icon = (props) => {
  const {
    children,
    size,
    fill,
  } = props;

  return (
    <svg
      preserveAspectRatio="xMidYMid meet"
      width={size || '3.6rem'}
      height={size || '3.6rem'}
      fill={fill}
      {...props}
    >
      {children}
      <style jsx>{`
        svg {
          vertical-align: middle;
        }
      `}</style>
    </svg>
  );
};

Icon.propTypes = {
  fill: PropTypes.string,
  size: PropTypes.oneOfType([
    PropTypes.string,
    PropTypes.number,
  ]),
  children: PropTypes.node.isRequired,
};

Icon.defaultProps = {
  fill: '#D7A477',
  size: '3.6rem',
};

export default Icon;

// icons/Close.js
import React from 'react';
import PropTypes from 'prop-types';

import Icon from '../Icon';

const CloseIcon = (props) => {
  const {
    fill,
  } = props;

  return (
    <Icon viewBox="0 0 24 24" {...props}>
      <g id="Symbols" stroke="none" strokeWidth="1" fill="none" fillRule="evenodd" strokeLinecap="round" strokeLinejoin="bevel">
        <g
          id="elements/icons/gold/close"
          transform="translate(-8.000000, -8.000000)"
          stroke={fill}
          strokeWidth="2.2"
        >
          <g id="Group" transform="translate(10.000000, 10.000000)">
            <path d="M0,0 L20,20" id="Line" />
            <path d="M20,0 L0,20" id="Line-Copy" />
          </g>
        </g>
      </g>
    </Icon>
  );
};

CloseIcon.propTypes = {
  fill: PropTypes.string,
};

CloseIcon.defaultProps = {
  fill: '#D7A477',
};

export default CloseIcon;

// usage
import CloseIcon from './icons/Close';
// ...
<CloseIcon fill="#FFFFFF" size="2rem" />