Component.js

import React from 'react';
import { SvgNavLeft, SvgNavRight } from './Svg';

const Component = () => (
  <React.Fragment>
    <SvgNavLeft fill="#F0F" />
    <SvgNavRight />
  </React.Fragment>
);

export default Component;

Svg.js

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

export const SvgWait = () => {
  return(
    <svg width="34" height="34" viewBox="0 0 34 34" xmlns="http://www.w3.org/2000/svg">
      <g fill="none">
        <circle fill="#333" cx="17" cy="17" r="17" />
        <g>
          <path d="M5 5h24v24h-24z" />
          <path d="M16.99 7c5.53 0 10.01 4.48 10.01 10s-4.48 10-10.01 10c-5.52 0-9.99-4.48-9.99-10s4.47-10 9.99-10zm.01 18c4.42 0 8-3.58 8-8s-3.58-8-8-8-8 3.58-8 8 3.58 8 8 8zm.5-13v5.25l4.5 2.67-.75 1.23-5.25-3.15v-6h1.5z" fill="#fff" fillRule="nonzero" />
        </g>
      </g>
    </svg>
  )
}

export const SvgNavLeft = (props) => (
  <svg fill={props.fill} width="8" height="12" viewBox="0 0 8 12" xmlns="http://www.w3.org/2000/svg">
    <path d="M7.41 1.41l-1.41-1.41-6 6 6 6 1.41-1.41-4.58-4.59z" fillRule="nonzero" fill="inherit"/>
  </svg>
);

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

SvgNavLeft.defaultProps = {
  fill: "#54709D",
};

export const SvgNavRight = (props) => (
  <svg fill={props.fill} width="8" height="12" viewBox="0 0 8 12" xmlns="http://www.w3.org/2000/svg">
    <path d="M2 0l-1.41 1.41 4.58 4.59-4.58 4.59 1.41 1.41 6-6z" fillRule="nonzero" fill="inherit"/>
  </svg>
);

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

SvgNavRight.defaultProps = {
  fill: "#54709D",
};