import * as React from 'react';
import cx from 'classnames';
import { createSvgIcon } from '../utils/createSvgIcon';
import { iconClassNames } from '../utils/iconClassNames';

export const Shift24hIcon = createSvgIcon({
  svg: ({ classes }) => (
    <svg role="presentation" focusable="false" viewBox="8 8 18 16" className={classes.svg}>
      <g className={cx(iconClassNames.outline, classes.outlinePart)}>
        <path d="M23.344,8.93h-6.2a.654.654,0,0,0-.649.656v4.9a.647.647,0,0,0,.649.649h6.2A.654.654,0,0,0,24,14.484v-4.9A.66.66,0,0,0,23.344,8.93Zm-3.469,3.382h-1.3v.657h1.3v.656H17.922V11.664h1.3v-.656h-1.3v-.649h1.953Zm2.6,1.313h-.649v-.656h-1.3v-2.61h.657v1.953h.648V10.359h.649Z" />
        <path d="M19.172,21.18a.344.344,0,0,1-.07.242c-.157.219-.532.273-.774.336a17.009,17.009,0,0,1-4.312.453A17.418,17.418,0,0,1,9.18,21.57c-.141-.054-.321-.187-.321-.359V12.328a.435.435,0,0,1,.43-.43h6.117v-.859H9.289A1.29,1.29,0,0,0,8,12.328v8.828a1.276,1.276,0,0,0,.562,1.063c1.11.687,4.133.851,5.454.851A15.427,15.427,0,0,0,19.18,22.4a1.27,1.27,0,0,0,.851-1.164v-4.89h-.859Z" />
        <polygon points="13.586 13.617 13.586 17.656 15.734 19.805 16.336 19.203 14.445 17.313 14.445 13.617 13.586 13.617" />
      </g>
      <g className={cx(iconClassNames.filled, classes.filledPart)}>
        <path d="M23.344,15.133h-6.2a.647.647,0,0,1-.649-.649v-4.9a.654.654,0,0,1,.649-.656h6.2A.66.66,0,0,1,24,9.586v4.9A.654.654,0,0,1,23.344,15.133Zm-1.516-2.164v.656h.649V10.359h-.649v1.953H21.18V10.359h-.657v2.61Zm-3.906-1.3v1.961h1.953v-.656h-1.3v-.657h1.3V10.359H17.922v.649h1.3v.656ZM14.039,23.07a17.532,17.532,0,0,1-5.094-.679A1.284,1.284,0,0,1,8,21.2V12.281a1.3,1.3,0,0,1,1.3-1.3h6.25v3.524a1.631,1.631,0,0,0,1.633,1.625h2.9v5.094a1.269,1.269,0,0,1-.5.976,1.177,1.177,0,0,1-.351.188A16.42,16.42,0,0,1,14.039,23.07Zm-.625-9.492v4.141l2.352,2.351.882-.882L14.664,17.2V13.578Z" />
      </g>
    </svg>
  ),
  displayName: 'Shift24hIcon',
});
