text: import React from 'react';
  import PropTypes from 'prop-types';
  
  // Mui Example:
  // https://github.com/mui-org/material-ui/blob/master/packages/material-ui/src/Avatar/Avatar.js#L38
  // eslint-disable-next-line prefer-arrow-callback
  const Compass = React.forwardRef(function Compass(props, ref) {
    const { color, size, ...otherProps } = props;
    const variantSizes = {
      xsmall: 12,
      small: 14,
      medium: 16,
      large: 20,
      xlarge: 28,
      xxlarge: 36,
    };
  
    const newSize = !isNaN(parseInt(size, 10))
      ? size
      : variantSizes[size] !== undefined
      ? variantSizes[size]
      : variantSizes['medium'];
  
    return (
      <svg
        width={newSize}
        height={newSize}
        viewBox="0 0 24 24"
        {...otherProps}
        fill={color}
        ref={ref}
      >
        <path d="M12 23C5.925 23 1 18.075 1 12S5.925 1 12 1s11 4.925 11 11-4.925 11-11 11zm0-2.225a8.775 8.775 0 100-17.55 8.775 8.775 0 000 17.55zM17.248 8.16l-2.097 6.289c-.11.332-.37.593-.703.703l-6.289 2.097a1.112 1.112 0 01-1.407-1.407L8.85 9.552c.11-.332.37-.593.703-.703l6.289-2.097c.87-.29 1.697.538 1.407 1.407zm-2.814 1.407l-3.65 1.217-1.218 3.65 3.65-1.216 1.218-3.65z" />
      </svg>
    );
  });
  
  Compass.propTypes = {
    color: PropTypes.string,
    size: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
  };
  
  Compass.defaultProps = {
    color: 'currentColor',
    size: '16',
  };
  
  // Hard coding component names and render names
  Compass.name = Compass.render.name || 'Compass';
  
  export default Compass;
  