[FEAT]: Add new icon: PlayIcon

Author: JinSSJ3

src/components/icons/Cancel/Cancel.tsx

@@ -1,9 +1,9 @@
-import React,{ FC } from "react";
+import React, { FC } from "react";
 import { parseSize } from "../utils/utils";
 import { CancelProps } from "./CancelProps";
 
 const Cancel: FC<CancelProps> = (props: CancelProps) => {
-  const { size, color, colorFill, onClick, style,className } = props;
+  const { size, color, colorFill, onClick, style, className } = props;
   const finalSize = parseSize(size);
   const finalStyle = style ? style : {};
   return (

src/components/icons/Play/PlayIcon.tsx

@@ -0,0 +1,29 @@
+import React, { FC } from "react";
+import { parseSize } from "../utils/utils";
+import { PlayIconProps } from "./PlayIconProps";
+
+const PlayIcon: FC<PlayIconProps> = (props: PlayIconProps) => {
+  const { size, color, colorFill, onClick, style, className } = props;
+  const finalSize = parseSize(size);
+  const finalStyle = style ? style : {};
+  return (
+    <svg
+      className={className || ""}
+      style={onClick ? { cursor: "pointer", ...finalStyle } : finalStyle}
+      xmlns="http://www.w3.org/2000/svg"
+      height={`${finalSize}px`}
+      viewBox="0 0 24 24"
+      width={`${finalSize}px`}
+      fill={color ? color : "#000000"}
+      onClick={(e) => onClick?.(e)}
+    >
+      <path
+        d="M0 0h24v24H0V0z"
+        opacity=".9"
+        fill={colorFill ? colorFill : "none"}
+      />
+      <path d="M8 5v14l11-7L8 5z" />
+    </svg>
+  );
+};
+export default PlayIcon;

src/components/icons/Play/PlayIconProps.ts

@@ -0,0 +1,2 @@
+import { IconProps } from "../IconProps/IconProps";
+export interface PlayIconProps extends IconProps { }

src/components/icons/Visibility/Visibility.tsx

@@ -5,18 +5,18 @@ import { VisibilityProps } from "./VisibilityProps";
 const Visibility: FC<VisibilityProps> = (props: VisibilityProps) => {
   const { size, color, colorFill, onClick, style, className } = props;
   const finalSize = parseSize(size);
-  let finalStyle = style ? style : {};
-  
+  const finalStyle = style ? style : {};
+
   return (
     <svg
-    className={className || ""}
-      style={onClick ? { cursor: "pointer",...finalStyle } : finalStyle}
+      className={className || ""}
+      style={onClick ? { cursor: "pointer", ...finalStyle } : finalStyle}
       xmlns="http://www.w3.org/2000/svg"
       height={`${finalSize}px`}
       viewBox="0 0 24 24"
       width={`${finalSize}px`}
       fill={color ? color : "#000000"}
-      onClick={() => onClick?.()}
+      onClick={(e) => onClick?.(e)}
     >
       <path d="M0 0h24v24H0V0z" fill="none" />
       <path

src/components/icons/index.ts

@@ -32,6 +32,8 @@ export * from "./UploadError/UploadError";
 export { default as Clean } from "./Clean/Clean";
 export * from "./Clean/Clean";
 
+export { default as PlayIcon } from "./Play/PlayIcon";
+export * from "./Play/PlayIcon";
 
 export { default as UploadingProcess } from "./UploadingProcess/UploadingProcess";
 export * from "./UploadingProcess/UploadingProcess";