perf(theme): move svg icons to css (#3537)

Co-authored-by: Divyansh Singh <[email protected]>

Author: userquin

Diff for: package.json

@@ -3,7 +3,7 @@
   "version": "1.0.0-rc.42",
   "description": "Vite & Vue powered static site generator",
   "type": "module",
-  "packageManager": "[email protected].1",
+  "packageManager": "[email protected].3",
   "main": "dist/node/index.js",
   "types": "types/index.d.ts",
   "exports": {

Diff for: src/client/theme-default/components/VPDocFooter.vue

@@ -3,7 +3,6 @@ import { computed } from 'vue'
 import { useData } from '../composables/data'
 import { useEditLink } from '../composables/edit-link'
 import { usePrevNext } from '../composables/prev-next'
-import VPIconEdit from './icons/VPIconEdit.vue'
 import VPLink from './VPLink.vue'
 import VPDocFooterLastUpdated from './VPDocFooterLastUpdated.vue'
 
@@ -30,7 +29,7 @@ const showFooter = computed(() => {
     <div v-if="hasEditLink || hasLastUpdated" class="edit-info">
       <div v-if="hasEditLink" class="edit-link">
         <VPLink class="edit-link-button" :href="editLink.url" :no-icon="true">
-          <VPIconEdit class="edit-link-icon" aria-label="edit icon"/>
+          <span class="vpi-square-pen edit-link-icon" />
           {{ editLink.text }}
         </VPLink>
       </div>
@@ -92,9 +91,6 @@ const showFooter = computed(() => {
 
 .edit-link-icon {
   margin-right: 8px;
-  width: 14px;
-  height: 14px;
-  fill: currentColor;
 }
 
 .prev-next {

Diff for: src/client/theme-default/components/VPFeature.vue

@@ -2,7 +2,6 @@
 import type { DefaultTheme } from 'vitepress/theme'
 import VPImage from './VPImage.vue'
 import VPLink from './VPLink.vue'
-import VPIconArrowRight from './icons/VPIconArrowRight.vue'
 
 defineProps<{
   icon?: DefaultTheme.FeatureIcon
@@ -46,7 +45,7 @@ defineProps<{
 
       <div v-if="linkText" class="link-text">
         <p class="link-text-value">
-          {{ linkText }} <VPIconArrowRight class="link-text-icon" />
+          {{ linkText }} <span class="vpi-arrow-right link-text-icon" />
         </p>
       </div>
     </article>
@@ -119,10 +118,6 @@ defineProps<{
 }
 
 .link-text-icon {
-  display: inline-block;
   margin-left: 6px;
-  width: 14px;
-  height: 14px;
-  fill: currentColor;
 }
 </style>

Diff for: src/client/theme-default/components/VPFlyout.vue

@@ -1,12 +1,10 @@
 <script lang="ts" setup>
 import { ref } from 'vue'
 import { useFlyout } from '../composables/flyout'
-import VPIconChevronDown from './icons/VPIconChevronDown.vue'
-import VPIconMoreHorizontal from './icons/VPIconMoreHorizontal.vue'
 import VPMenu from './VPMenu.vue'
 
 defineProps<{
-  icon?: any
+  icon?: string
   button?: string
   label?: string
   items?: any[]
@@ -38,12 +36,12 @@ function onBlur() {
       @click="open = !open"
     >
       <span v-if="button || icon" class="text">
-        <component v-if="icon" :is="icon" class="option-icon" />
+        <span v-if="icon" :class="[icon, 'option-icon']" />
         <span v-if="button" v-html="button"></span>
-        <VPIconChevronDown class="text-icon" />
+        <span class="vpi-chevron-down text-icon" />
       </span>
 
-      <VPIconMoreHorizontal v-else class="icon" />
+      <span v-else class="vpi-more-horizontal icon" />
     </button>
 
     <div class="menu">
@@ -114,22 +112,16 @@ function onBlur() {
 
 .option-icon {
   margin-right: 0px;
-  width: 16px;
-  height: 16px;
-  fill: currentColor;
+  font-size: 16px;
 }
 
 .text-icon {
   margin-left: 4px;
-  width: 14px;
-  height: 14px;
-  fill: currentColor;
+  font-size: 14px;
 }
 
 .icon {
-  width: 20px;
-  height: 20px;
-  fill: currentColor;
+  font-size: 20px;
   transition: fill 0.25s;
 }
 

Diff for: src/client/theme-default/components/VPHomeSponsors.vue

@@ -1,5 +1,4 @@
 <script setup lang="ts">
-import VPIconHeart from './icons/VPIconHeart.vue'
 import VPButton from './VPButton.vue'
 import VPSponsors from './VPSponsors.vue'
 
@@ -30,7 +29,9 @@ withDefaults(defineProps<Props>(), {
   <section class="VPHomeSponsors">
     <div class="container">
       <div class="header">
-        <div class="love"><VPIconHeart class="icon" /></div>
+        <div class="love">
+          <span class="vpi-heart icon" />
+        </div>
         <h2 v-if="message" class="message">{{ message }}</h2>
       </div>
 
@@ -59,15 +60,13 @@ withDefaults(defineProps<Props>(), {
 
 .love {
   margin: 0 auto;
-  width: 28px;
-  height: 28px;
+  width: fit-content;
+  font-size: 28px;
   color: var(--vp-c-text-3);
 }
 
 .icon {
-  width: 28px;
-  height: 28px;
-  fill: currentColor;
+  display: inline-block;
 }
 
 .message {

Diff for: src/client/theme-default/components/VPLocalNav.vue

@@ -7,7 +7,6 @@ import { useLocalNav } from '../composables/local-nav'
 import { getHeaders } from '../composables/outline'
 import { useSidebar } from '../composables/sidebar'
 import VPLocalNavOutlineDropdown from './VPLocalNavOutlineDropdown.vue'
-import VPIconAlignLeft from './icons/VPIconAlignLeft.vue'
 
 defineProps<{
   open: boolean
@@ -67,7 +66,7 @@ const classes = computed(() => {
         aria-controls="VPSidebarNav"
         @click="$emit('open-menu')"
       >
-        <VPIconAlignLeft class="menu-icon" />
+        <span class="vpi-align-left menu-icon"></span>
         <span class="menu-text">
           {{ theme.sidebarMenuLabel || 'Menu' }}
         </span>
@@ -157,9 +156,7 @@ const classes = computed(() => {
 
 .menu-icon {
   margin-right: 8px;
-  width: 16px;
-  height: 16px;
-  fill: currentColor;
+  font-size: 14px;
 }
 
 .VPOutlineDropdown {

Diff for: src/client/theme-default/components/VPLocalNavOutlineDropdown.vue

@@ -5,7 +5,6 @@ import { nextTick, ref } from 'vue'
 import { useData } from '../composables/data'
 import { resolveTitle, type MenuItem } from '../composables/outline'
 import VPDocOutlineItem from './VPDocOutlineItem.vue'
-import VPIconChevronRight from './icons/VPIconChevronRight.vue'
 
 const props = defineProps<{
   headers: MenuItem[]
@@ -61,7 +60,7 @@ function scrollToTop() {
   >
     <button @click="toggle" :class="{ open }" v-if="headers.length > 0">
       {{ resolveTitle(theme) }}
-      <VPIconChevronRight class="icon" />
+      <span class="vpi-chevron-right icon" />
     </button>
     <button @click="scrollToTop" v-else>
       {{ theme.returnToTopLabel || 'Return to top' }}
@@ -111,19 +110,23 @@ function scrollToTop() {
   color: var(--vp-c-text-1);
 }
 
+.icon {
+  display: inline-block;
+  vertical-align: middle;
+  margin-left: 2px;
+  font-size: 14px;
+  transform: rotate(0deg);
+  transition: transform 0.25s;
+}
+
 @media (min-width: 960px) {
   .VPLocalNavOutlineDropdown button {
     font-size: 14px;
   }
-}
 
-.icon {
-  display: inline-block;
-  vertical-align: middle;
-  margin-left: 2px;
-  width: 14px;
-  height: 14px;
-  fill: currentColor;
+  .icon {
+    font-size: 16px;
+  }
 }
 
 .open > .icon {