style: icon点击样式给主题色

src/assets/icon/icon.tsx

@@ -17,7 +17,7 @@ const X = () => (
   >
     <path
       d="M4 12L12 4M4 4L12 12"
-      stroke="#85899E"
+      stroke="currentColor"
       stroke-linecap="round"
       stroke-linejoin="round"
     />
@@ -63,7 +63,7 @@ const PencilAlt = () => (
   >
     <path
       d="M7.33329 3.33334H3.99996C3.26358 3.33334 2.66663 3.93029 2.66663 4.66667V12C2.66663 12.7364 3.26358 13.3333 3.99996 13.3333H11.3333C12.0697 13.3333 12.6666 12.7364 12.6666 12V8.66667M11.7238 2.39052C12.2445 1.86983 13.0887 1.86983 13.6094 2.39052C14.1301 2.91122 14.1301 3.75544 13.6094 4.27614L7.88557 10H5.99996L5.99996 8.11438L11.7238 2.39052Z"
-      stroke="#85899E"
+      stroke="currentColor"
       stroke-linecap="round"
       stroke-linejoin="round"
     />
@@ -86,7 +86,7 @@ const Refresh = () => (
   >
     <path
       d="M2.66663 2.66669V6.00002H3.0543M13.292 7.33335C12.964 4.70248 10.7197 2.66669 7.99996 2.66669C5.76171 2.66669 3.84549 4.04547 3.0543 6.00002M3.0543 6.00002H5.99996M13.3333 13.3334V10H12.9456M12.9456 10C12.1544 11.9546 10.2382 13.3334 7.99996 13.3334C5.28021 13.3334 3.03595 11.2976 2.70789 8.66669M12.9456 10H9.99996"
-      stroke="#85899E"
+      stroke="currentColor"
       stroke-linecap="round"
       stroke-linejoin="round"
     />

src/components/Contro.css

@@ -56,6 +56,18 @@
   padding: 4px;
 }
 
+.icon-p svg {
+  color: #85899E;
+}
+
 .Contro-cont span.anticon:hover {
   background: #F0F1F3;
-}
+}
+
+.grey-icon svg {
+  color: #85899E;
+}
+
+.icon-active:active svg {
+  color: #F28B44;
+}

src/components/Contro.tsx

@@ -98,7 +98,7 @@ export const Contro: React.FC<ControProps> = () => {
                 />
                 <div className="Contro-handle-icon">
                   <XIcon
-                    className="icon-p"
+                    className="grey-icon icon-p icon-active"
                     onClick={() => {
                       setIsEdit(false);
                     }}
@@ -132,7 +132,7 @@ export const Contro: React.FC<ControProps> = () => {
                 <div className="Contro-handle-icon">
                   <Tooltip title="修改监听端口">
                     <PencilAltIcon
-                      className="icon-p"
+                      className="grey-icon icon-p icon-active"
                       onClick={() => {
                         setIsEdit(true);
                         setEnginePortTemp(enginePort);
@@ -148,6 +148,7 @@ export const Contro: React.FC<ControProps> = () => {
                   {failConnected && (
                     <Tooltip title="重新连接">
                       <RefreshIcon
+                        className="grey-icon icon-active"
                         onClick={() => {
                           if (enginePort) {
                             wsc.connect(Number(enginePort));