Added New Theming icons (#628)

Signed-off-by: Benjamin Perez <benjamin@bexsoft.net>
minio · Jan 12, 2024 · 4ca51d2 · 4ca51d2
1 parent f46f399
commit 4ca51d2
Show file tree

Hide file tree

Showing 5 changed files with 108 additions and 8 deletions.
diff --git a/src/components/Icons/AutoModeIcon.tsx b/src/components/Icons/AutoModeIcon.tsx
@@ -0,0 +1,40 @@
+// This file is part of MinIO Design System
+// Copyright (c) 2024 MinIO, Inc.
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU Affero General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU Affero General Public License for more details.
+//
+// You should have received a copy of the GNU Affero General Public License
+// along with this program.  If not, see <http://www.gnu.org/licenses/>.
+
+import * as React from "react";
+import { SVGProps } from "react";
+
+const AutoModeIcon = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    className={"min-icon"}
+    viewBox="0 0 256 256"
+    {...props}
+  >
+    <g>
+      <g id="a">
+        <path
+          d="M0,128C0.1,57.3,57.3,0.1,128,0c70.6,0,128,57.4,128,128c-0.1,70.7-57.3,127.9-128,128C57.4,256,0,198.6,0,128z M30.8,128
+			c0,53.7,43.5,97.2,97.2,97.2s97.2-43.5,97.2-97.2S181.7,30.8,128,30.8c0,0,0,0,0,0C74.3,30.8,30.8,74.3,30.8,128z M128,47.3
+			c41.1,4.2,73.2,38.5,73.2,80.7S169,204.4,128,208.7V47.3z"
+          fill={"currentcolor"}
+        />
+      </g>
+    </g>
+  </svg>
+);
+
+export default AutoModeIcon;
diff --git a/src/components/Icons/DarkModeIcon.tsx b/src/components/Icons/DarkModeIcon.tsx
@@ -24,14 +24,15 @@ const DarkModeIcon = (props: SVGProps<SVGSVGElement>) => (
     viewBox="0 0 256 256"
     {...props}
   >
-    <path
-      d="m130.3,2.55C61.02,1.05,3.64,56,2.14,125.29c-1.5,69.28,53.45,126.66,122.74,128.16,69.28,1.5,126.66-53.45,128.16-122.74.26-11.86-1.17-23.7-4.24-35.16-6.83,6.56-14.16,12.59-21.91,18.04-15.04,10.85-32.05,18.68-50.08,23.04-16.84,5.8-35.48,2.56-49.37-8.59-11.15-13.89-14.39-32.53-8.59-49.37,4.37-18.02,12.2-35.03,23.04-50.08,5.45-7.75,11.48-15.07,18.04-21.91-9.68-2.54-19.62-3.93-29.62-4.12Zm68.21,196.64c15.14-15.08,25.06-34.62,28.29-55.75-44.55,25.69-91.32,28.22-117.09,2.44-25.78-25.78-23.24-72.54,2.44-117.09-54.84,8.54-92.37,59.91-83.83,114.75,8.54,54.84,59.91,92.37,114.75,83.83,20.99-3.27,40.41-13.11,55.46-28.11l-.02-.07Z"
-      fill={"currentcolor"}
-      style={{
-        fillRule: "evenodd",
-        strokeWidth: 0,
-      }}
-    />
+    <g>
+      <g transform="translate(0 0)">
+        <path
+          d="M228.4,151.3c-54.3,14-109.7-18.6-123.7-73c-4.3-16.6-4.3-34.1,0-50.7L111.8,0L84.9,9.4C34,27.3,0,75.3,0,129.2
+			C0,199.1,56.9,256,126.8,256h0.1c53.9-0.1,101.8-34.1,119.6-84.9l9.4-26.9L228.4,151.3z"
+          fill={"currentcolor"}
+        />
+      </g>
+    </g>
   </svg>
 );
 

diff --git a/src/components/Icons/Icons.stories.tsx b/src/components/Icons/Icons.stories.tsx
@@ -182,6 +182,12 @@ const Template: Story = (args) => {
               AudioIconMute
             </div>
 
+            <div className="story-icon">
+              <cicons.AutoModeIcon />
+              <br />
+              AutoModeIcon
+            </div>
+
             <div className="story-icon">
               <cicons.AzureTierIcon />
               <br />
@@ -704,6 +710,12 @@ const Template: Story = (args) => {
               LifecycleConfigIcon
             </div>
 
+            <div className="story-icon">
+              <cicons.LightModeIcon />
+              <br />
+              LightModeIcon
+            </div>
+
             <div className="story-icon">
               <cicons.LinkIcon />
               <br />

diff --git a/src/components/Icons/LightModeIcon.tsx b/src/components/Icons/LightModeIcon.tsx
@@ -0,0 +1,45 @@
+// This file is part of MinIO Design System
+// Copyright (c) 2024 MinIO, Inc.
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU Affero General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU Affero General Public License for more details.
+//
+// You should have received a copy of the GNU Affero General Public License
+// along with this program.  If not, see <http://www.gnu.org/licenses/>.
+
+import * as React from "react";
+import { SVGProps } from "react";
+
+const LightModeIcon = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    className={"min-icon"}
+    viewBox="0 0 256 256"
+    {...props}
+  >
+    <path
+      d="M113.8,241.7v-27c0-7.7,6.2-13.9,13.9-13.9c7.7,0,13.9,6.2,13.9,13.9l0,0v27c0,7.7-6.2,13.9-13.9,13.9
+	C120,255.6,113.8,249.4,113.8,241.7L113.8,241.7z M198.3,218.2l-19.1-19.1c-5.4-5.4-5.4-14.2,0-19.6c5.4-5.4,14.2-5.4,19.6,0
+	l19.1,19.1c5.4,5.4,5.4,14.2,0,19.6C212.4,223.6,203.7,223.6,198.3,218.2L198.3,218.2L198.3,218.2z M37.4,218.2
+	c-5.4-5.4-5.4-14.2,0-19.6l19.1-19.1c5.4-5.4,14.2-5.4,19.6,0s5.4,14.2,0,19.6l0,0L57,218.2C51.6,223.6,42.8,223.6,37.4,218.2
+	L37.4,218.2z M72.1,128c0-29.9,24.3-54.1,54.1-54.1c6,0,11.9,1,17.5,2.9c28.2,8.9,43.9,39,35,67.3c-5.3,16.7-18.4,29.8-35.1,35
+	c-28.3,9.7-59-5.4-68.7-33.7C73.1,139.9,72.1,134,72.1,128L72.1,128z M214.4,142.6c-8.1,0-14.6-6.6-14.6-14.6s6.6-14.6,14.6-14.6
+	l0,0h27c8.1,0,14.6,6.6,14.6,14.6s-6.6,14.6-14.6,14.6H214.4z M13.9,141.9c-7.7,0.1-13.9-6.1-14-13.7c-0.1-7.7,6.1-13.9,13.7-14
+	c0.1,0,0.2,0,0.2,0h27c7.7-0.1,13.9,6.1,14,13.7s-6.1,13.9-13.7,14c-0.1,0-0.2,0-0.2,0H13.9z M179.1,76.5c-5.4-5.4-5.4-14.2,0-19.6
+	l19.1-19.1c5.4-5.4,14.2-5.4,19.6,0c5.4,5.4,5.4,14.2,0,19.6l-19.1,19.1C193.3,81.9,184.6,81.9,179.1,76.5L179.1,76.5z M56.5,76.5
+	L37.4,57.4c-5.4-5.4-5.4-14.2,0-19.6s14.2-5.4,19.6,0l19.1,19.1c5.4,5.4,5.4,14.2,0,19.6c-2.6,2.6-6.1,4.1-9.8,4.1
+	C62.6,80.5,59.1,79.1,56.5,76.5z M113.8,41.3v-27c0-7.7,6.2-13.9,13.9-13.9c7.7,0,13.9,6.2,13.9,13.9v27c0,7.7-6.2,13.9-13.9,13.9
+	C120,55.2,113.8,48.9,113.8,41.3z"
+      fill={"currentcolor"}
+    />
+  </svg>
+);
+
+export default LightModeIcon;
diff --git a/src/components/Icons/index.ts b/src/components/Icons/index.ts
@@ -228,6 +228,8 @@ export { default as ExpandIcon } from "./ExpandIcon";
 export { default as NextCaretIcon } from "./NextCaretIcon";
 export { default as PrevCaretIcon } from "./PrevCaretIcon";
 export { default as DarkModeIcon } from "./DarkModeIcon";
+export { default as LightModeIcon } from "./LightModeIcon";
+export { default as AutoModeIcon } from "./AutoModeIcon";
 export { default as ShuffleIcon } from "./ShuffleIcon";
 export { default as LanguageIcon } from "./LanguageIcon";
 export { default as EventBusyIcon } from "./EventBusyIcon";