import * as React from 'react';

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

const IconWordOnline = ({ className = '', height = 30, title, width = 30 }: TwoTonedIcon) => (
    <AccessibleSVG
        className={`icon-word-online ${className}`}
        height={height}
        title={title}
        viewBox="0 0 30 30"
        width={width}
    >
        <path
            d="M14 24.47a.48.48 0 0 1-.5-.46V3.74a.49.49 0 0 1 .5-.49h14.45a.49.49 0 0 1 .48.49V24a.5.5 0 0 1-.48.48H14"
            fill="#fff"
        />
        <path
            d="M14 2.77a1 1 0 0 0-1 1V24a1 1 0 0 0 1 1h14.45a1 1 0 0 0 1-1V3.74a1 1 0 0 0-1-1zm0 1h14.45V24H14z"
            fill="#2b579a"
        />
        <path
            d="M15.19 8.8H26.4V10H15.19zm0-3H26.4V7H15.19zm0 9.07H26.4V16H15.19zm0-3.06H26.4V13H15.19z"
            fill="#2b579a"
        />
        <path d="M15.19 17.84H26.4v1.21H15.19z" fill="#2b579a" />
        <path d="M16.76 0L0 3v21.89l16.76 2.95V0" fill="#2b579a" />
        <path
            d="M13 9.14l-1.8.12-1 6.1L9 9.4l-2 .11-1.21 5.73V16a1.13 1.13 0 0 0 0-.26.89.89 0 0 0 0-.23v-.19l-.91-5.6-1.54.09L5 18.05l1.71.1 1.17-5.54 1.18 5.7 1.86.12L13 9.15m6.58 8.11A6.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="#2b579a"
        />
        <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.06z"
            fill="#fff"
        />
    </AccessibleSVG>
);

export default IconWordOnline;