feat: move to unocss

src/components/Footer.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { isDark, toggleDark } from '~/composables'
+import { toggleDark } from '~/composables'
 
 const { t, availableLocales, locale } = useI18n()
 
@@ -11,26 +11,25 @@ const toggleLocales = () => {
 </script>
 
 <template>
-  <nav class="text-xl mt-6">
+  <nav text-xl mt-6>
     <router-link class="icon-btn mx-2" to="/" :title="t('button.home')">
-      <carbon-campsite />
+      <div i-carbon-campsite />
     </router-link>
 
     <button class="icon-btn mx-2 !outline-none" :title="t('button.toggle_dark')" @click="toggleDark()">
-      <carbon-moon v-if="isDark" />
-      <carbon-sun v-else />
+      <div i="carbon-sun dark:carbon-moon" />
     </button>
 
     <a class="icon-btn mx-2" :title="t('button.toggle_langs')" @click="toggleLocales">
-      <carbon-language />
+      <div i-carbon-language />
     </a>
 
     <router-link class="icon-btn mx-2" to="/about" :title="t('button.about')">
-      <carbon-dicom-overlay />
+      <div i-carbon-dicom-overlay />
     </router-link>
 
     <a class="icon-btn mx-2" rel="noreferrer" href="https://github.com/antfu/vitesse" target="_blank" title="GitHub">
-      <carbon-logo-github />
+      <div i-carbon-logo-github />
     </a>
   </nav>
 </template>