From f5dfd52f6efece2f4cad227044ecf4dd66301bbc Mon Sep 17 00:00:00 2001
From: crupest <crupest@outlook.com>
Date: Sat, 26 Aug 2023 21:36:58 +0800
Subject: ...

---
 FrontEnd/src/components/Icon.tsx | 30 ++++++++++++++++++++++++++++++
 1 file changed, 30 insertions(+)
 create mode 100644 FrontEnd/src/components/Icon.tsx

(limited to 'FrontEnd/src/components/Icon.tsx')

diff --git a/FrontEnd/src/components/Icon.tsx b/FrontEnd/src/components/Icon.tsx
new file mode 100644
index 00000000..2ac3a7ca
--- /dev/null
+++ b/FrontEnd/src/components/Icon.tsx
@@ -0,0 +1,30 @@
+import { ComponentPropsWithoutRef } from "react";
+import classNames from "classnames";
+
+import { ThemeColor } from "./common";
+
+import "./Icon.css";
+
+interface IconButtonProps extends ComponentPropsWithoutRef<"i"> {
+  icon: string;
+  color?: ThemeColor | "on-surface";
+  size?: string | number;
+}
+
+export default function Icon(props: IconButtonProps) {
+  const { icon, color, size, style, className, ...otherProps } = props;
+
+  const colorName = color === "on-surface" ? "surface-on" : color;
+
+  return (
+    <i
+      style={size != null ? { ...style, fontSize: size } : style}
+      className={classNames(
+        colorName && `cru-${colorName}`,
+        `bi-${icon} cru-icon`,
+        className,
+      )}
+      {...otherProps}
+    />
+  );
+}
-- 
cgit v1.2.3


From f8acad20ddb9f5de156d81b54233571b8efba7f9 Mon Sep 17 00:00:00 2001
From: crupest <crupest@outlook.com>
Date: Wed, 30 Aug 2023 00:58:39 +0800
Subject: ...

---
 FrontEnd/src/components/Icon.css | 1 +
 FrontEnd/src/components/Icon.tsx | 6 ++----
 2 files changed, 3 insertions(+), 4 deletions(-)

(limited to 'FrontEnd/src/components/Icon.tsx')

diff --git a/FrontEnd/src/components/Icon.css b/FrontEnd/src/components/Icon.css
index fe980d7b..3c83b0e9 100644
--- a/FrontEnd/src/components/Icon.css
+++ b/FrontEnd/src/components/Icon.css
@@ -1,3 +1,4 @@
 .cru-icon {
+  color: var(--cru-theme-color);
   font-size: 1.4rem;
 }
diff --git a/FrontEnd/src/components/Icon.tsx b/FrontEnd/src/components/Icon.tsx
index 2ac3a7ca..e5cf598e 100644
--- a/FrontEnd/src/components/Icon.tsx
+++ b/FrontEnd/src/components/Icon.tsx
@@ -7,20 +7,18 @@ import "./Icon.css";
 
 interface IconButtonProps extends ComponentPropsWithoutRef<"i"> {
   icon: string;
-  color?: ThemeColor | "on-surface";
+  color?: ThemeColor;
   size?: string | number;
 }
 
 export default function Icon(props: IconButtonProps) {
   const { icon, color, size, style, className, ...otherProps } = props;
 
-  const colorName = color === "on-surface" ? "surface-on" : color;
-
   return (
     <i
       style={size != null ? { ...style, fontSize: size } : style}
       className={classNames(
-        colorName && `cru-${colorName}`,
+        `cru-theme-${color ?? "primary"}`,
         `bi-${icon} cru-icon`,
         className,
       )}
-- 
cgit v1.2.3