perf: use Iconify for Vue

Author: hacxy

packages/demo/.vitepress/config.ts

@@ -16,7 +16,14 @@ export default defineConfigWithTheme<ThemeConfig>({
       '/posts/orange/': 'auto',
       '/posts/': 'auto',
       '/config/': 'auto',
-      '/guide/': 'auto'
+      '/guide/': 'auto',
+      '/guide/apple/': [
+        {
+          text: 'apple-1',
+          link: '/guide/apple/1.md',
+          icon: 'i-vscode-icons-file-type-vite'
+        }
+      ]
     },
     socialLinks: [
       { icon: 'github', link: 'https://github.com/hacxy/vitepress-theme-mild' }

packages/demo/guide/apple/1.md

@@ -0,0 +1,4 @@
+---
+---
+
+# apple

packages/demo/guide/one.md

@@ -0,0 +1,4 @@
+---
+sidebar:
+  sort: 1
+---

packages/demo/package.json

@@ -13,6 +13,7 @@
     "preview": "vitepress preview"
   },
   "devDependencies": {
+    "@iconify-json/vscode-icons": "^1.2.10",
     "vitepress": "^1.6.1",
     "vitepress-theme-mild": "workspace:*"
   }

packages/docs/.vitepress/config.ts

@@ -68,7 +68,7 @@ export default defineConfigWithTheme<ThemeConfig>({
     ],
     sidebar: {
       '/guide/': 'auto',
-      '/config/': 'auto'
+      '/config/': 'auto',
     },
     footer: {
       message: 'MIT Licensed',

packages/theme/package.json

@@ -37,6 +37,7 @@
   "dependencies": {
     "@css-render/vue3-ssr": "^0.15.14",
     "@giscus/vue": "^3.1.1",
+    "@iconify/vue": "^4.3.0",
     "@nanostores/vue": "^0.11.0",
     "@shikijs/vitepress-twoslash": "^1.24.3",
     "@vueuse/core": "^12.0.0",

packages/theme/src/client/components/ArticlesList.vue

@@ -1,10 +1,8 @@
 <script lang="ts" setup>
 import type { ArticlesData } from '../datas/base.data.js';
+import { Icon } from '@iconify/vue';
 import { NIcon, NList, NListItem, NSpace, NTag, NThing, NTime } from 'naive-ui';
 import { useRouter } from 'vitepress';
-import IconCalendar from './icons/IconCalendar.vue';
-import IconClock from './icons/IconClock.vue';
-import IconWords from './icons/IconWords.vue';
 
 const props = defineProps<{ listData: ArticlesData[], title?: string }>();
 const router = useRouter();
@@ -47,17 +45,17 @@ const router = useRouter();
             <div class="VMArticleInfo">
               <div class="VMArticleInfoLeft">
                 <div class="text">
-                  <IconCalendar />
+                  <Icon icon="mdi:calendar-edit-outline" />
                   <span>
                     <NTime :time="article.date" format="yyyy-MM-dd" />
                   </span>
                 </div>
                 <div class="text">
-                  <IconWords />
+                  <Icon icon="tabler:pencil-minus" />
                   {{ article.words }} words
                 </div>
                 <div class="text">
-                  <IconClock />
+                  <Icon icon="ic:sharp-access-time" />
                   {{ article.minutes }} min
                 </div>
               </div>

packages/theme/src/client/components/DocsHeaderInfo.vue

@@ -1,11 +1,9 @@
 <script lang="ts" setup>
+import { Icon } from '@iconify/vue';
 import { NTime } from 'naive-ui';
 import { useRoute } from 'vitepress';
 import { ref, watchEffect } from 'vue';
 import { useArticleListStore } from '../store/article';
-import IconCalendar from './icons/IconCalendar.vue';
-import IconClock from './icons/IconClock.vue';
-import IconWords from './icons/IconWords.vue';
 
 const { articleList } = useArticleListStore();
 const docsHeaderInfo = ref<{ words: number, minutes: number, date: number }>();
@@ -19,15 +17,15 @@ watchEffect(() => {
 <template>
   <div class="VMDocsHeaderInfo">
     <div class="info">
-      <IconCalendar />
+      <Icon icon="mdi:calendar-edit-outline" />
       <NTime :time="docsHeaderInfo?.date" format="yyyy-MM-dd" />
     </div>
     <div class="info">
-      <IconWords />
+      <Icon icon="tabler:pencil-minus" />
       <div>{{ docsHeaderInfo?.words }} words</div>
     </div>
     <div class="info">
-      <IconClock />
+      <Icon icon="ic:sharp-access-time" />
       <div>{{ docsHeaderInfo?.minutes }} min</div>
     </div>
   </div>

packages/theme/src/client/components/Layout.vue

@@ -12,7 +12,6 @@ import LocalNav from './LocalNav.vue';
 import Sidebar from './Sidebar.vue';
 
 import('virtual:group-icons.css');
-import('virtual:uno.css');
 
 // Init data 不要在其他任何地方调用这个hook 否则会存在性能浪费问题
 const { np } = useInitData();

packages/theme/src/client/components/SidebarItem.vue

@@ -1,11 +1,14 @@
 <script setup lang="ts">
-import type { DefaultTheme } from 'vitepress/theme';
+import type { DefaultTheme } from 'vitepress';
 import { computed } from 'vue';
 import { useSidebarControl } from '../hooks/useSidebarControl';
 import VPLink from './Link.vue';
 
 const props = defineProps<{
-  item: DefaultTheme.SidebarItem & { hide?: boolean }
+  item: DefaultTheme.SidebarItem & {
+    hide?: boolean
+    icon?: string
+  }
   depth: number
 }>();
 const {

packages/theme/src/client/styles/index.scss

@@ -1,6 +1,7 @@
 @import './variable.css';
 @import 'nprogress/nprogress.css';
 @import './slide-enter.css';
+// @import './icons.css';
 
 .n-image-preview-container {
   .n-image-preview-toolbar {

packages/theme/src/node/index.ts

@@ -2,7 +2,6 @@ import type { Plugin, RawConfigExports, SiteConfig } from 'vitepress';
 import type { ThemeConfig } from '../../types';
 import { fileURLToPath } from 'node:url';
 import { transformerTwoslash } from '@shikijs/vitepress-twoslash';
-import UnoCSS from 'unocss/vite';
 import { groupIconMdPlugin, groupIconVitePlugin } from 'vitepress-plugin-group-icons';
 import { RssPlugin } from 'vitepress-plugin-rss';
 import { NOT_ARTICLE_LAYOUTS } from '../shared/constants';
@@ -58,7 +57,6 @@ const baseConfig: RawConfigExports<ThemeConfig> = {
     plugins: [
       groupIconVitePlugin(),
       rss(),
-      UnoCSS() as any
     ],
     build: {
       chunkSizeWarningLimit: 2048

packages/theme/types/index.d.ts

@@ -3,10 +3,16 @@ import type { NProgressOptions } from 'nprogress';
 import type { DefaultTheme, Theme } from 'vitepress';
 import type { RSSOptions } from 'vitepress-plugin-rss';
 
-export interface SidebarAutoMulti {
-  [path: string]: 'auto'
+export interface SidebarItem extends DefaultTheme.SidebarItem {
+  icon?: string
 }
 
+export interface SidebarMulti {
+  [path: string]: SidebarItem[] | { items: SidebarItem[], base: string } | 'auto'
+}
+
+export type Sidebar = SidebarItem[] | SidebarMulti;
+
 export interface Comment extends Omit<GiscusProps, 'theme'> {
   lightTheme: GiscusTheme
   darkTheme: GiscusTheme
@@ -18,7 +24,7 @@ declare interface ThemeConfig extends DefaultThemeConfig {
   /**
    * The sidebar items.
    */
-  sidebar?: DefaultTheme.Sidebar | SidebarAutoMulti
+  sidebar?: Sidebar
 
   /**
    * Giscus Comment