[+] About page link

bun.lock

@@ -23,6 +23,7 @@
         "@fontsource/roboto": "^5.2.8",
         "@iconify-json/material-symbols": "^1.2.46",
         "@iconify-json/mdi": "^1.2.3",
+        "@iconify-json/solar": "^1.2.5",
         "@iconify-json/svg-spinners": "^1.2.4",
         "@sveltejs/adapter-auto": "^7.0.0",
         "@sveltejs/kit": "^2.47.1",
@@ -169,6 +170,8 @@
 
     "@iconify-json/mdi": ["@iconify-json/mdi@1.2.3", "", { "dependencies": { "@iconify/types": "*" } }, "sha512-O3cLwbDOK7NNDf2ihaQOH5F9JglnulNDFV7WprU2dSoZu3h3cWH//h74uQAB87brHmvFVxIOkuBX2sZSzYhScg=="],
 
+    "@iconify-json/solar": ["@iconify-json/solar@1.2.5", "", { "dependencies": { "@iconify/types": "*" } }, "sha512-WMAiNwchU8zhfrySww6KQBRIBbsQ6SvgIu2yA+CHGyMima/0KQwT5MXogrZPJGoQF+1Ye3Qj6K+1CiyNn3YkoA=="],
+
     "@iconify-json/svg-spinners": ["@iconify-json/svg-spinners@1.2.4", "", { "dependencies": { "@iconify/types": "*" } }, "sha512-ayn0pogFPwJA1WFZpDnoq9/hjDxN+keeCMyThaX4d3gSJ3y0mdKUxIA/b1YXWGtY9wVtZmxwcvOIeEieG4+JNg=="],
 
     "@iconify/types": ["@iconify/types@2.0.0", "", {}, "sha512-+wluvCrRhXrhyOmRDJ3q8mux9JkKy5SJ/v8ol2tu4FVjyYvtEzkc/3pK15ET6RKg4b4w4BmTk1+gsCUhf21Ykg=="],

package.json

@@ -19,6 +19,7 @@
     "@fontsource/roboto": "^5.2.8",
     "@iconify-json/material-symbols": "^1.2.46",
     "@iconify-json/mdi": "^1.2.3",
+    "@iconify-json/solar": "^1.2.5",
     "@iconify-json/svg-spinners": "^1.2.4",
     "@sveltejs/adapter-auto": "^7.0.0",
     "@sveltejs/kit": "^2.47.1",

src/lib/ui/IconButton.svelte

@@ -1,10 +1,10 @@
 <script lang="ts">
     import { Layer } from "m3-svelte";
 
-    let { icon, ...rest } = $props();
+    let { icon, size = 24, ...rest } = $props();
 </script>
 
 <button class="cbox size-48px relative rounded-8px" {...rest}>
   <!-- <Layer/> -->
-  <span class="size-24px {icon}"></span>
+  <span class="{icon}" style="width: {size}px; height: {size}px"></span>
 </button>

src/lib/ui/appbar/AppBar.svelte

@@ -5,6 +5,7 @@
 
   interface Icon {
     icon: string
+    size?: number
     onclick: () => void
   }
 
@@ -35,7 +36,7 @@
   </div>
 
   {#each right as item}
-    <IconButton icon={item.icon} onclick={item.onclick} />
+    <IconButton icon={item.icon} onclick={item.onclick} size={item.size} />
   {/each}
 
   {#if children}

src/routes/+page.svelte

@@ -7,7 +7,7 @@
   import { Layer } from "m3-svelte"
   import { goto } from "$app/navigation"
   import { getI18n, setLanguage } from "$lib/i18n"
-    import MenuItem from "$lib/ui/material3/MenuItem.svelte";
+  import MenuItem from "$lib/ui/material3/MenuItem.svelte"
 
   let { data }: PageProps = $props()
 
@@ -18,7 +18,9 @@
 </script>
 
 
-<AppBar account={() => goto('/user')} moreIcon="i-material-symbols:translate-rounded">
+<AppBar account={() => goto('/user')} moreIcon="i-material-symbols:translate-rounded" right={[
+  { icon: 'i-solar:cat-broken', size: 26, onclick: () => goto('/about') },
+]}>
   <MenuItem onclick={() => setLanguage('en')}>English</MenuItem>
   <MenuItem onclick={() => setLanguage('zh')}>中文</MenuItem>
   <MenuItem onclick={() => setLanguage('ja')}>日本語</MenuItem>