// @flow
import * as React from 'react';

import AccessibleSVG from '../accessible-svg';

import type { Icon } from '../flowTypes';

const IconFlag = ({ className = '', color = '#979797', height = 16, title, width = 16 }: Icon) => (
    <AccessibleSVG className={`icon-flag ${className}`} height={height} title={title} viewBox="0 0 14 14" width={width}>
        <path
            className="fill-color"
            d="M8.56 10.002l3.835.017L10.89 7l1.502-3H9v4H8V2h1v1h5l-.002.003H14L12.005 7 14 10.988h-.01L14 11h-.925l-.19.002V11H7.098L8 9H1v4.502C1 13.777.768 14 .5 14c-.276 0-.5-.22-.5-.498V.498C0 .223.232 0 .5 0c.276 0 .5.22.5.498V1h8v1H1v6h8v.988h.008l-.45 1.014z"
            fill={color}
            fillRule="evenodd"
        />
    </AccessibleSVG>
);

export default IconFlag;