import * as React from 'react';

import AccessibleSVG from '../accessible-svg';
import { TwoTonedIcon } from '../iconTypes';

const IconExcelOnline = ({ className = '', height = 30, title, width = 30 }: TwoTonedIcon) => (
    <AccessibleSVG
        className={`icon-excel-online ${className}`}
        height={height}
        title={title}
        viewBox="0 0 30 30"
        width={width}
    >
        <path
            d="M12.26 25.64a.49.49 0 0 1-.48-.5V3.9a.49.49 0 0 1 .47-.51h15.83a.5.5 0 0 1 .48.51v21.24a.5.5 0 0 1-.48.5H12.26"
            fill="#fff"
        />
        <path
            d="M12.26 2.89a1 1 0 0 0-.95 1v21.25a1 1 0 0 0 .95 1h15.82a1 1 0 0 0 1-1V3.9a1 1 0 0 0-1-1zm0 1h15.82v21.25H12.26V3.9z"
            fill="#257248"
        />
        <path
            d="M13 20.49h7.5V23H13zm0-3.65h7.5v2.64H13zm0-3.64h7.5v2.64H13zm0-3.65h7.5v2.64H13zm0-3.64h7.5v2.64H13zm8.45 0h4.64v2.64h-4.67zm0 3.64h4.64v2.64h-4.67V9.55zm0 3.65h4.64v2.64h-4.67zm0 3.64h4.64v2.64h-4.67zm0 3.65h4.64V23h-4.67v-2.51z"
            fill="#257248"
        />
        <path d="M16.76 0L0 3v21.89l16.76 2.95V0" fill="#257248" />
        <path
            d="M19.58 17.26A6.49 6.49 0 0 0 13 23.12a3.81 3.81 0 0 0-2.08 5c.59 1.44.74 1.91 3.55 1.91H25c2.67.09 4.91-1.56 5-4.23a4.85 4.85 0 0 0-4.43-5 6.78 6.78 0 0 0-6-3.53"
            fill="#fff"
        />
        <path
            d="M14.11 23.7a3.27 3.27 0 0 0 1.27 6.3h9a4.23 4.23 0 0 0 4.4-3.91 4.15 4.15 0 0 0-3.88-4.4 5.82 5.82 0 0 0-5.17-3c-5.15 0-5.62 5.01-5.62 5.01z"
            fill="#257248"
        />
        <path
            d="M19.7 20.27a4.24 4.24 0 0 1 3.92 2.6l.17.44h.59a2.55 2.55 0 1 1 .32 5.09h-9.32a1.66 1.66 0 0 1-.23-3.3l.58-.08v-.69a4 4 0 0 1 3.94-4.06zM11.44 8.2l-2.31.14s-1.65 4.2-1.64 4.26-1.57-4-1.57-4l-2.25.13 2.39 5.18-2.59 5.14 2.18.13s1.5-3.49 1.52-3.56L9 19.39l2.49.13-2.81-5.69 2.76-5.63"
            fill="#fff"
        />
    </AccessibleSVG>
);

export default IconExcelOnline;
