Adding new play icon

ClickHouse · Sep 25, 2023 · 65bab02 · 65bab02
1 parent ff4eb6b
commit 65bab02
Show file tree

Hide file tree

Showing 6 changed files with 45 additions and 20 deletions.
diff --git a/src/components/Icon/types.ts b/src/components/Icon/types.ts
@@ -77,6 +77,7 @@ export type IconName =
   | "pencil"
   | "pie-chart"
   | "play"
+  | "play-in-circle"
   | "plus"
   | "popout"
   | "query"

diff --git a/src/components/Logos/Logos.mdx b/src/components/Logos/Logos.mdx
@@ -7,7 +7,7 @@ import { ThemeProvider } from "../../theme";
 
 # Logos
 
-<ThemeProvider theme='light'>
+<ThemeProvider theme='dark'>
 <IconGallery>
   {Object.keys(LogosLight).map((iconName) => (
     <IconItem name={iconName} key={iconName}>

diff --git a/src/components/icons/Icons.mdx b/src/components/icons/Icons.mdx
@@ -6,11 +6,11 @@ import LogosLight from '../Logos/LogosLight'
 import { Meta, IconGallery, IconItem, Story } from "@storybook/blocks";
 import { ThemeProvider } from "../../theme";
 
-<Meta title='Display/Icon/Icons' />
+<Meta title='Display/Icon/Icon Gallery' />
 
 # Glyphs
-
-<ThemeProvider theme='light'>
+<br />
+<ThemeProvider theme='dark'>
   <IconGallery>
     {Object.keys(ICONS_MAP).map((iconName) => (
       <IconItem name={iconName} key={iconName}>
@@ -21,7 +21,7 @@ import { ThemeProvider } from "../../theme";
 </ThemeProvider>
 
 # Flags
-
+<br />
 <IconGallery>
   {Object.keys(FlagList).map((iconName) => (
     <IconItem name={iconName} key={iconName}>
@@ -31,7 +31,7 @@ import { ThemeProvider } from "../../theme";
 </IconGallery>
 
 # Payments
-
+<br />
 <IconGallery>
   {(Object.keys(PaymentList)).map((iconName) => (
     <IconItem name={iconName} key={iconName}>
@@ -41,8 +41,8 @@ import { ThemeProvider } from "../../theme";
 </IconGallery>
 
 # Logo
-
-<ThemeProvider theme='light'>
+<br />
+<ThemeProvider theme='dark'>
   <IconGallery>
     {(Object.keys(LogosLight)).map((iconName) => (
       <IconItem name={iconName} key={iconName}>

diff --git a/src/components/icons/Play.tsx b/src/components/icons/Play.tsx
@@ -10,19 +10,13 @@ const Play = (props: SVGAttributes<SVGElement>) => (
     {...props}
   >
     <path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M8.15482 3.30857L18.9737 10.0927C19.6098 10.4914 20 11.2166 20 12C20 12.7834 19.6098 13.5086 18.9737 13.9073L8.15482 20.6914C7.50841 21.0966 6.70669 21.1032 6.05448 20.7086C5.40227 20.314 4.99976 19.5788 5 18.7827V5.21734C4.99976 4.42118 5.40227 3.68604 6.05448 3.29143C6.70669 2.89682 7.50841 2.90336 8.15482 3.30857V3.30857Z"
       stroke="#161517"
+      strokeWidth="1.5"
       strokeLinecap="round"
       strokeLinejoin="round"
-      strokeWidth={1.5}
-      d="M10.336 3.156a8.99 8.99 0 0 0-5.224 3.05M3.49 9.08a8.874 8.874 0 0 0 .049 5.973M5.209 17.9a8.982 8.982 0 0 0 5.128 2.944M13.638 3.152a8.997 8.997 0 0 1 0 17.696"
-    />
-    <path
-      stroke="#161517"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-      strokeWidth={1.5}
-      d="m10.941 9.057 3.884 2.297a.75.75 0 0 1 0 1.292l-3.884 2.297a.75.75 0 0 1-1.132-.647V9.703a.75.75 0 0 1 1.132-.646v0Z"
-      clipRule="evenodd"
     />
   </svg>
 );

diff --git a/src/components/icons/PlayInCircle.tsx b/src/components/icons/PlayInCircle.tsx
@@ -0,0 +1,30 @@
+import { SVGAttributes } from "react";
+
+const Play = (props: SVGAttributes<SVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width={24}
+    height={24}
+    viewBox="0 0 24 24"
+    fill="none"
+    {...props}
+  >
+    <path
+      stroke="#161517"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      strokeWidth={1.5}
+      d="M10.336 3.156a8.99 8.99 0 0 0-5.224 3.05M3.49 9.08a8.874 8.874 0 0 0 .049 5.973M5.209 17.9a8.982 8.982 0 0 0 5.128 2.944M13.638 3.152a8.997 8.997 0 0 1 0 17.696"
+    />
+    <path
+      stroke="#161517"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      strokeWidth={1.5}
+      d="m10.941 9.057 3.884 2.297a.75.75 0 0 1 0 1.292l-3.884 2.297a.75.75 0 0 1-1.132-.647V9.703a.75.75 0 0 1 1.132-.646v0Z"
+      clipRule="evenodd"
+    />
+  </svg>
+);
+
+export default Play;
diff --git a/src/components/icons/Refresh.tsx b/src/components/icons/Refresh.tsx
@@ -14,14 +14,14 @@ const Refresh = (props: SVGAttributes<SVGElement>) => (
       strokeLinecap="round"
       strokeLinejoin="round"
       strokeWidth={1.5}
-      d="M8.5 6H12a7.5 7.5 0 1 1-6.666 4.06"
+      d="M15.5 6H12C7.858 6 4.5 9.358 4.5 13.5C4.5 17.642 7.858 21 12 21C16.142 21 19.5 17.642 19.5 13.5C19.5 12.26 19.199 11.09 18.666 10.06"
     />
     <path
       stroke="#161517"
       strokeLinecap="round"
       strokeLinejoin="round"
       strokeWidth={1.5}
-      d="m11.5 3-3 3 3 3"
+      d="M12.5 3L15.5 6L12.5 9"
     />
   </svg>
 );