feat: move to unocss

src/pages/about.md

@@ -4,11 +4,11 @@ title: About
 
 <div class="text-center">
   <!-- You can use Vue components inside markdown -->
-  <carbon-dicom-overlay class="text-4xl -mb-6 m-auto" />
+  <div i-carbon-dicom-overlay class="text-4xl -mb-6 m-auto" />
   <h3>About</h3>
 </div>
 
-[Vitesse](https://github.com/antfu/vitesse) is an opinionated [Vite](https://github.com/vitejs/vite) starter template made by [@antfu](https://github.com/antfu) for mocking apps swiftly. With **file-based routing**, **components auto importing**, **markdown support**, I18n, PWA and uses **WindiCSS** for UI.
+[Vitesse](https://github.com/antfu/vitesse) is an opinionated [Vite](https://github.com/vitejs/vite) starter template made by [@antfu](https://github.com/antfu) for mocking apps swiftly. With **file-based routing**, **components auto importing**, **markdown support**, I18n, PWA and uses **UnoCSS** for styling and icons.
 
 ```js
 // syntax highlighting example

src/pages/hi/[name].vue

@@ -13,20 +13,20 @@ watchEffect(() => {
 
 <template>
   <div>
-    <p class="text-4xl">
-      <carbon-pedestrian class="inline-block" />
-    </p>
+    <div text-4xl>
+      <div i-carbon-pedestrian inline-block />
+    </div>
     <p>
       {{ t('intro.hi', { name: props.name }) }}
     </p>
 
-    <p class="text-sm opacity-50">
+    <p text-sm opacity-50>
       <em>{{ t('intro.dynamic-route') }}</em>
     </p>
 
     <template v-if="user.otherNames.length">
-      <p class="text-sm mt-4">
-        <span class="opacity-75">{{ t('intro.aka') }}:</span>
+      <p text-sm mt-4>
+        <span opacity-75>{{ t('intro.aka') }}:</span>
         <ul>
           <li v-for="otherName in user.otherNames" :key="otherName">
             <router-link :to="`/hi/${otherName}`" replace>
@@ -39,7 +39,7 @@ watchEffect(() => {
 
     <div>
       <button
-        class="btn m-3 text-sm mt-6"
+        btn m="3 t6" text-sm
         @click="router.back()"
       >
         {{ t('button.back') }}

src/pages/index.vue

@@ -15,19 +15,19 @@ const { t } = useI18n()
 
 <template>
   <div>
-    <p class="text-4xl">
-      <carbon-campsite class="inline-block" />
-    </p>
+    <div text-4xl>
+      <div i-carbon-campsite inline-block />
+    </div>
     <p>
       <a rel="noreferrer" href="https://github.com/antfu/vitesse" target="_blank">
         Vitesse
       </a>
     </p>
     <p>
-      <em class="text-sm opacity-75">{{ t('intro.desc') }}</em>
+      <em text-sm opacity-75>{{ t('intro.desc') }}</em>
     </p>
 
-    <div class="py-4" />
+    <div py-4 />
 
     <input
       id="input"
@@ -36,7 +36,7 @@ const { t } = useI18n()
       :aria-label="t('intro.whats-your-name')"
       type="text"
       autocomplete="false"
-      p="x-4 y-2"
+      p="x4 y2"
       w="250px"
       text="center"
       bg="transparent"
@@ -48,7 +48,7 @@ const { t } = useI18n()
 
     <div>
       <button
-        class="m-3 text-sm btn"
+        btn m-3 text-sm
         :disabled="!name"
         @click="go"
       >