import * as React from 'react';

    import { IconType } from '../types';

    type SiTwentyProps = React.ComponentPropsWithoutRef<'svg'> & {
      /**
       * The title provides an accessible short text description to the SVG
       */
      title?: string;
      /**
       * Hex color or color name or "default" to use the default hex for each icon
       */
      color?: string;
      /**
       * The size of the Icon.
       */
      size?: string | number;
    }

    const defaultColor = '#000000';

    const SiTwenty: IconType = React.forwardRef<SVGSVGElement, SiTwentyProps>(function SiTwenty({title = 'Twenty', color = 'currentColor', size = 24, ...others }, ref) {
      if (color === 'default') {
        color = defaultColor;
      }

      return (
        <svg
          xmlns='http://www.w3.org/2000/svg'
          width={size}
          height={size}
          fill={color}
          viewBox='0 0 24 24'
          ref={ref}
          {...others}
        >
          <title>{title}</title>
          <path d='M20.97 0H3.03A3.03 3.03 0 0 0 0 3.03v17.94A3.03 3.03 0 0 0 3.03 24h17.94A3.03 3.03 0 0 0 24 20.97V3.03A3.03 3.03 0 0 0 20.97 0ZM4.813 8.936a2.376 2.376 0 0 1 2.374-2.375h4.573c.067 0 .129.04.157.103a.172.172 0 0 1-.03.185l-1.002 1.088a.924.924 0 0 1-.678.299H7.2a.713.713 0 0 0-.713.713v1.796a.418.418 0 0 1-.418.419h-.836a.418.418 0 0 1-.419-.419V8.936zm14.224 6.128a2.376 2.376 0 0 1-2.374 2.375h-1.944a2.376 2.376 0 0 1-2.375-2.375v-3.401c0-.231.087-.454.243-.625l1.134-1.23a.172.172 0 0 1 .298.115v5.13c0 .393.32.713.713.713h1.92c.393 0 .713-.32.713-.713V8.949a.713.713 0 0 0-.713-.713h-2.233c-.255 0-.499.108-.674.295l-6.658 7.235h4c.232 0 .419.187.419.418v.837a.418.418 0 0 1-.419.418h-5.39a.886.886 0 0 1-.886-.886v-.443c0-.223.083-.436.234-.6l7.465-8.109a2.603 2.603 0 0 1 1.916-.84h2.235a2.376 2.376 0 0 1 2.375 2.375v6.128z' />
        </svg>
      );
    });

    export { SiTwenty as default, defaultColor };