fix: unify setting tab icon color, fix #303

Signed-off-by: Innei <i@innei.in>

icons/mgc/power.svg

@@ -1,5 +1,5 @@
 <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
   <path fill-rule="evenodd" clip-rule="evenodd"
     d="M12 22C17.5229 22 22 17.5229 22 12C22 6.47715 17.5229 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5229 6.47715 22 12 22ZM10.4293 12.7184H8.70693C8.15511 12.7184 7.85969 12.0662 8.22199 11.6481L12.4415 6.85452C12.8316 6.4086 13.5674 6.6873 13.5674 7.27814V11.2914H15.2898C15.8472 11.2914 16.1426 11.9436 15.7748 12.3616L11.5553 17.1552C11.1651 17.6012 10.4293 17.3225 10.4293 16.7316V12.7184Z"
-    fill="#FF5C00" />
-</svg>
+    fill="currentColor" />
+</svg>

src/renderer/src/modules/settings/title.tsx

@@ -37,9 +37,11 @@ export const SettingsTitle = ({
   className?: string
   loader?: () => SettingPageConfig
 }) => {
-  const { iconName, name: title } = (useLoaderData() ||
-    loader?.() ||
-    {}) as SettingPageConfig
+  const {
+    iconName,
+    name: title,
+    headerIcon,
+  } = (useLoaderData() || loader?.() || {}) as SettingPageConfig
 
   if (!title) {
     return null
@@ -52,7 +54,7 @@ export const SettingsTitle = ({
         className,
       )}
     >
-      <i className={iconName} />
+      <i className={headerIcon || iconName} />
       <span>{title}</span>
     </div>
   )

src/renderer/src/modules/settings/utils.ts

@@ -2,7 +2,7 @@ export interface SettingPageConfig {
   iconName: string
   name: string
   priority: number
-
+  headerIcon?: string
 }
 export const defineSettingPage = (config: SettingPageConfig) => () => ({
   ...config,

src/renderer/src/pages/settings/(settings)/wallet.tsx

@@ -1,7 +1,7 @@
 import { SettingWallet } from "@renderer/modules/settings/tabs/wallet"
 import { defineSettingPage } from "@renderer/modules/settings/utils"
 
-const iconName = "i-mgc-power"
+const iconName = `i-mgc-power-outline`
 const name = "Power"
 const priority = 1050
 
@@ -9,6 +9,7 @@ export const loader = defineSettingPage({
   iconName,
   name,
   priority,
+  headerIcon: `i-mgc-power text-accent`,
 })
 
 export function Component() {