nxxy335/halo-theme-WarmIsland
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 3 Wiki Activity

Add unplugin-icons & use Mingcute icons

Browse Source 
Register unplugin-icons (Icons Vite plugin) in astro.config and add unplugin-icons + @iconify-json/mingcute to devDependencies. Replace inline SVGs in ThemeSwitcher.vue with MingcuteSunLine / MingcuteMoonLine icon components imported from ~icons, and add unplugin-icons types to tsconfig. Also simplify VSCode formatter setting and update package.json accordingly.
This commit is contained in:
Ryan Wang
2026-04-07 23:15:32 +08:00
parent b34fd27d45
commit 29741c6df9
6 changed files with 154 additions and 47 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/ThemeSwitcher.vue
+4 -39
View File
@@ -1,5 +1,7 @@
<script lang="ts" setup>
import { ref, onMounted } from "vue";
import MingcuteMoonLine from "~icons/mingcute/moon-line";
import MingcuteSunLine from "~icons/mingcute/sun-line";
const isDark = ref(false);
@@ -22,45 +24,8 @@ function toggle() {
@click="toggle"
>
<!-- Moon: shown in light mode -->
<svg
v-if="!isDark"
xmlns="http://www.w3.org/2000/svg"
width="17"
height="17"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
aria-hidden="true"
>
<path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z" />
</svg>
<!-- Sun: shown in dark mode -->
<svg
v-else
xmlns="http://www.w3.org/2000/svg"
width="17"
height="17"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
aria-hidden="true"
>
<circle cx="12" cy="12" r="5" />
<line x1="12" y1="1" x2="12" y2="3" />
<line x1="12" y1="21" x2="12" y2="23" />
<line x1="4.22" y1="4.22" x2="5.64" y2="5.64" />
<line x1="18.36" y1="18.36" x2="19.78" y2="19.78" />
<line x1="1" y1="12" x2="3" y2="12" />
<line x1="21" y1="12" x2="23" y2="12" />
<line x1="4.22" y1="19.78" x2="5.64" y2="18.36" />
<line x1="18.36" y1="5.64" x2="19.78" y2="4.22" />
</svg>
<MingcuteSunLine v-if="isDark" />
<MingcuteMoonLine v-else />
</button>
</template>