import * as React from "react";
import type { IconProps, IconMetadata, IconComponent } from "../../types";

export const AfterEffects: IconComponent = React.forwardRef<
  SVGSVGElement,
  IconProps
>(function AfterEffects(
  {
    color = "currentColor",
    fill,
    size = 24,
    strokeWidth,
    strokeLinecap,
    strokeLinejoin,
    strokeDasharray,
    opacity,
    className,
    ...props
  },
  forwardedRef,
) {
  return (
    <svg
      width={size}
      height={size}
      viewBox="0 0 24 24"
      fill="none"
      xmlns="http://www.w3.org/2000/svg"
      className={className}
      strokeWidth={strokeWidth}
      strokeLinecap={strokeLinecap}
      strokeLinejoin={strokeLinejoin}
      strokeDasharray={strokeDasharray}
      opacity={opacity}
      {...props}
      ref={forwardedRef}
    >
      <path
        d="M19.5243 0H4.20142C1.88104 0 0 1.87026 0 4.17735V18.8227C0 21.1297 1.88104 23 4.20142 23H19.5243C21.8446 23 23.7257 21.1297 23.7257 18.8227V4.17735C23.7257 1.87026 21.8446 0 19.5243 0Z"
        fill="#00005b"
      />
      <path
        d="M9.531 13.761H5.855L5.107 16.076C5.096 16.118 5.072 16.155 5.037 16.181 5.002 16.207 4.959 16.22 4.916 16.218H3.053C2.947 16.218 2.91 16.16 2.942 16.044L6.125 6.966C6.157 6.872 6.189 6.779 6.221 6.657 6.262 6.446 6.284 6.232 6.284 6.016 6.282 6.001 6.284 5.986 6.289 5.972 6.293 5.957 6.301 5.944 6.312 5.933 6.323 5.923 6.336 5.915 6.351 5.91 6.365 5.905 6.381 5.903 6.396 5.906H8.927C9.001 5.906 9.043 5.932 9.054 5.985L12.667 16.06C12.699 16.165 12.667 16.218 12.571 16.218H10.502C10.467 16.222 10.431 16.213 10.402 16.192 10.372 16.172 10.352 16.142 10.343 16.107L9.531 13.761ZM6.428 11.809H8.942C8.879 11.598 8.804 11.361 8.72 11.097 8.635 10.833 8.544 10.551 8.449 10.25 8.354 9.949 8.258 9.649 8.163 9.348 8.067 9.047 7.979 8.757 7.9 8.478 7.82 8.198 7.749 7.943 7.685 7.71H7.669C7.58 8.138 7.468 8.56 7.335 8.976 7.186 9.451 7.035 9.936 6.881 10.432 6.727 10.928 6.576 11.387 6.428 11.809ZM18.524 12.86H15.389C15.427 13.168 15.53 13.465 15.691 13.732 15.869 13.996 16.121 14.202 16.415 14.325 16.814 14.497 17.246 14.581 17.68 14.572 18.025 14.565 18.369 14.528 18.707 14.46 19.009 14.419 19.306 14.342 19.59 14.231 19.643 14.189 19.669 14.215 19.669 14.31V15.813C19.672 15.854 19.664 15.895 19.645 15.932 19.627 15.961 19.603 15.985 19.574 16.003 19.259 16.142 18.927 16.24 18.588 16.295 18.126 16.381 17.657 16.421 17.187 16.414 16.433 16.414 15.802 16.298 15.293 16.066 14.812 15.855 14.387 15.535 14.052 15.132 13.739 14.752 13.506 14.314 13.367 13.842 13.23 13.377 13.16 12.895 13.16 12.41 13.159 11.881 13.242 11.355 13.407 10.852 13.566 10.361 13.817 9.904 14.147 9.506 14.473 9.113 14.88 8.795 15.341 8.573 15.808 8.346 16.359 8.265 16.996 8.265 17.524 8.251 18.048 8.354 18.532 8.565 18.939 8.738 19.296 9.007 19.574 9.348 19.835 9.683 20.035 10.06 20.163 10.464 20.289 10.853 20.353 11.258 20.354 11.667 20.354 11.899 20.346 12.11 20.33 12.3 20.315 12.489 20.301 12.627 20.291 12.711 20.287 12.746 20.27 12.778 20.243 12.801 20.217 12.825 20.183 12.838 20.147 12.838 20.084 12.838 19.975 12.846 19.821 12.861 19.667 12.877 19.476 12.888 19.248 12.893 19.02 12.898 18.779 12.86 18.524 12.86ZM15.389 11.418H17.474C17.728 11.418 17.917 11.416 18.039 11.41 18.12 11.402 18.199 11.376 18.269 11.334V11.239C18.266 11.116 18.245 10.993 18.206 10.875 18.12 10.605 17.947 10.371 17.714 10.208 17.481 10.045 17.201 9.962 16.916 9.973 16.649 9.957 16.382 10.019 16.149 10.151 15.916 10.283 15.726 10.48 15.603 10.717 15.494 10.938 15.422 11.175 15.389 11.418Z"
        fill="#99f"
      />
    </svg>
  );
});

AfterEffects.displayName = "AfterEffects";

AfterEffects.metadata = {
  name: "AfterEffects",
  category: "icon/design",
  tags: ["after", "effects", "icon"],
  description: "AfterEffects icon from icon/design category",
  type: ["stroke", "icon"],
} as IconMetadata;

export default AfterEffects;