From ed2106b8236568ef1e94200e36357916ac0268ad Mon Sep 17 00:00:00 2001
From: userquin <userquin@gmail.com>
Date: Fri, 2 Feb 2024 23:22:16 +0100
Subject: [PATCH] perf(theme): move svg icons to css

---
 .../theme-default/components/VPDocFooter.vue  |  5 +-
 .../theme-default/components/VPFeature.vue    |  4 +-
 .../theme-default/components/VPFlyout.vue     | 13 +++--
 .../components/VPHomeSponsors.vue             |  7 ++-
 .../theme-default/components/VPLocalNav.vue   |  5 +-
 .../components/VPLocalNavOutlineDropdown.vue  |  5 +-
 .../components/VPNavBarSearchButton.vue       |  6 ++-
 .../components/VPNavBarTranslations.vue       |  4 +-
 .../components/VPNavScreenMenuGroup.vue       |  5 +-
 .../components/VPNavScreenTranslations.vue    | 10 ++--
 .../components/VPSidebarItem.vue              |  5 +-
 .../theme-default/components/VPSwitch.vue     |  2 +-
 .../components/VPSwitchAppearance.vue         | 10 ++--
 .../components/VPTeamMembersItem.vue          |  5 +-
 src/client/theme-default/styles/icons.css     | 54 +++++++++++++++++++
 src/client/theme-default/without-fonts.ts     |  1 +
 16 files changed, 107 insertions(+), 34 deletions(-)
 create mode 100644 src/client/theme-default/styles/icons.css

diff --git a/src/client/theme-default/components/VPDocFooter.vue b/src/client/theme-default/components/VPDocFooter.vue
index 6de55347..4ecdd1d4 100644
--- a/src/client/theme-default/components/VPDocFooter.vue
+++ b/src/client/theme-default/components/VPDocFooter.vue
@@ -3,7 +3,7 @@ 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 VPIconEdit from './icons/VPIconEdit.vue'
 import VPLink from './VPLink.vue'
 import VPDocFooterLastUpdated from './VPDocFooterLastUpdated.vue'
 
@@ -30,7 +30,8 @@ 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"/>
+<!--          <VPIconEdit class="edit-link-icon" aria-label="edit icon"/>-->
+          <span class="vp-icon vp-icon-edit edit-link-icon" />
           {{ editLink.text }}
         </VPLink>
       </div>
diff --git a/src/client/theme-default/components/VPFeature.vue b/src/client/theme-default/components/VPFeature.vue
index abdade78..2644fcd7 100644
--- a/src/client/theme-default/components/VPFeature.vue
+++ b/src/client/theme-default/components/VPFeature.vue
@@ -2,7 +2,7 @@
 import type { DefaultTheme } from 'vitepress/theme'
 import VPImage from './VPImage.vue'
 import VPLink from './VPLink.vue'
-import VPIconArrowRight from './icons/VPIconArrowRight.vue'
+// import VPIconArrowRight from './icons/VPIconArrowRight.vue'
 
 defineProps<{
   icon?: DefaultTheme.FeatureIcon
@@ -46,7 +46,7 @@ defineProps<{
 
       <div v-if="linkText" class="link-text">
         <p class="link-text-value">
-          {{ linkText }} <VPIconArrowRight class="link-text-icon" />
+          {{ linkText }} <span class="vp-icon vp-icon-arrow-right link-text" /> <!--<VPIconArrowRight class="link-text-icon" />-->
         </p>
       </div>
     </article>
diff --git a/src/client/theme-default/components/VPFlyout.vue b/src/client/theme-default/components/VPFlyout.vue
index 57118fe7..2c6e369b 100644
--- a/src/client/theme-default/components/VPFlyout.vue
+++ b/src/client/theme-default/components/VPFlyout.vue
@@ -1,8 +1,8 @@
 <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 VPIconChevronDown from './icons/VPIconChevronDown.vue'
+// import VPIconMoreHorizontal from './icons/VPIconMoreHorizontal.vue'
 import VPMenu from './VPMenu.vue'
 
 defineProps<{
@@ -38,12 +38,15 @@ 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="['vp-icon', icon, 'option-icon']" />
+<!--        <component v-if="icon" :is="icon" class="option-icon" />-->
         <span v-if="button" v-html="button"></span>
-        <VPIconChevronDown class="text-icon" />
+<!--        <VPIconChevronDown class="text-icon" />-->
+        <span class="vp-icon vp-icon-chevron-down text-icon" />
       </span>
 
-      <VPIconMoreHorizontal v-else class="icon" />
+<!--      <VPIconMoreHorizontal v-else class="icon" />-->
+      <span v-else class="vp-icon vp-icon-more-horizontal icon" />
     </button>
 
     <div class="menu">
diff --git a/src/client/theme-default/components/VPHomeSponsors.vue b/src/client/theme-default/components/VPHomeSponsors.vue
index 7847ac96..5c8240b8 100644
--- a/src/client/theme-default/components/VPHomeSponsors.vue
+++ b/src/client/theme-default/components/VPHomeSponsors.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import VPIconHeart from './icons/VPIconHeart.vue'
+// import VPIconHeart from './icons/VPIconHeart.vue'
 import VPButton from './VPButton.vue'
 import VPSponsors from './VPSponsors.vue'
 
@@ -30,7 +30,10 @@ withDefaults(defineProps<Props>(), {
   <section class="VPHomeSponsors">
     <div class="container">
       <div class="header">
-        <div class="love"><VPIconHeart class="icon" /></div>
+        <div class="love">
+<!--          <VPIconHeart class="icon" />-->
+          <span class="vp-icon vp-icon-heart icon" />
+        </div>
         <h2 v-if="message" class="message">{{ message }}</h2>
       </div>
 
diff --git a/src/client/theme-default/components/VPLocalNav.vue b/src/client/theme-default/components/VPLocalNav.vue
index 5491b94c..cca2ae29 100644
--- a/src/client/theme-default/components/VPLocalNav.vue
+++ b/src/client/theme-default/components/VPLocalNav.vue
@@ -7,7 +7,7 @@ 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'
+// import VPIconAlignLeft from './icons/VPIconAlignLeft.vue'
 
 defineProps<{
   open: boolean
@@ -67,7 +67,8 @@ const classes = computed(() => {
         aria-controls="VPSidebarNav"
         @click="$emit('open-menu')"
       >
-        <VPIconAlignLeft class="menu-icon" />
+<!--        <VPIconAlignLeft class="menu-icon" />-->
+        <span class="vp-icon vp-icon-align-left menu-icon"></span>
         <span class="menu-text">
           {{ theme.sidebarMenuLabel || 'Menu' }}
         </span>
diff --git a/src/client/theme-default/components/VPLocalNavOutlineDropdown.vue b/src/client/theme-default/components/VPLocalNavOutlineDropdown.vue
index 2e8e310e..849fae4d 100644
--- a/src/client/theme-default/components/VPLocalNavOutlineDropdown.vue
+++ b/src/client/theme-default/components/VPLocalNavOutlineDropdown.vue
@@ -5,7 +5,7 @@ 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'
+// import VPIconChevronRight from './icons/VPIconChevronRight.vue'
 
 const props = defineProps<{
   headers: MenuItem[]
@@ -61,7 +61,8 @@ function scrollToTop() {
   >
     <button @click="toggle" :class="{ open }" v-if="headers.length > 0">
       {{ resolveTitle(theme) }}
-      <VPIconChevronRight class="icon" />
+<!--      <VPIconChevronRight class="icon" />-->
+      <span class="vp-icon vp-icon-chevron-right icon" />
     </button>
     <button @click="scrollToTop" v-else>
       {{ theme.returnToTopLabel || 'Return to top' }}
diff --git a/src/client/theme-default/components/VPNavBarSearchButton.vue b/src/client/theme-default/components/VPNavBarSearchButton.vue
index 2c943363..81d0a32e 100644
--- a/src/client/theme-default/components/VPNavBarSearchButton.vue
+++ b/src/client/theme-default/components/VPNavBarSearchButton.vue
@@ -16,7 +16,8 @@ const $t = createSearchTranslate(defaultTranslations)
 <template>
   <button type="button" class="DocSearch DocSearch-Button" :aria-label="$t('button.buttonAriaLabel')">
     <span class="DocSearch-Button-Container">
-      <svg
+      <span class="vp-icon DocSearch-Search-Icon"></span>
+<!--      <svg
         class="DocSearch-Search-Icon"
         width="20"
         height="20"
@@ -31,7 +32,7 @@ const $t = createSearchTranslate(defaultTranslations)
           stroke-linecap="round"
           stroke-linejoin="round"
         />
-      </svg>
+      </svg>-->
       <span class="DocSearch-Button-Placeholder">{{ $t('button.buttonText') }}</span>
     </span>
     <span class="DocSearch-Button-Keys">
@@ -119,6 +120,7 @@ const $t = createSearchTranslate(defaultTranslations)
   color: var(--vp-c-text-1);
   fill: currentColor;
   transition: color 0.5s;
+  --vp-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' %3E%3Cpath d='M14.386 14.386l4.0877 4.0877-4.0877-4.0877c-2.9418 2.9419-7.7115 2.9419-10.6533 0-2.9419-2.9418-2.9419-7.7115 0-10.6533 2.9418-2.9419 7.7115-2.9419 10.6533 0 2.9419 2.9418 2.9419 7.7115 0 10.6533z' stroke='currentColor' fill='none' fill-rule='evenodd' stroke-linecap='round' stroke-linejoin='round' /%3E%3C/svg%3E")
 }
 
 .DocSearch-Button:hover .DocSearch-Search-Icon {
diff --git a/src/client/theme-default/components/VPNavBarTranslations.vue b/src/client/theme-default/components/VPNavBarTranslations.vue
index af19176d..d95f190e 100644
--- a/src/client/theme-default/components/VPNavBarTranslations.vue
+++ b/src/client/theme-default/components/VPNavBarTranslations.vue
@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import VPIconLanguages from './icons/VPIconLanguages.vue'
+// import VPIconLanguages from './icons/VPIconLanguages.vue'
 import VPFlyout from './VPFlyout.vue'
 import VPMenuLink from './VPMenuLink.vue'
 import { useData } from '../composables/data'
@@ -13,7 +13,7 @@ const { localeLinks, currentLang } = useLangs({ correspondingLink: true })
   <VPFlyout
     v-if="localeLinks.length && currentLang.label"
     class="VPNavBarTranslations"
-    :icon="VPIconLanguages"
+    icon="vp-icon-languages"
     :label="theme.langMenuLabel || 'Change language'"
   >
     <div class="items">
diff --git a/src/client/theme-default/components/VPNavScreenMenuGroup.vue b/src/client/theme-default/components/VPNavScreenMenuGroup.vue
index b5678871..bf275b46 100644
--- a/src/client/theme-default/components/VPNavScreenMenuGroup.vue
+++ b/src/client/theme-default/components/VPNavScreenMenuGroup.vue
@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 import { computed, ref } from 'vue'
-import VPIconPlus from './icons/VPIconPlus.vue'
+// import VPIconPlus from './icons/VPIconPlus.vue'
 import VPNavScreenMenuGroupLink from './VPNavScreenMenuGroupLink.vue'
 import VPNavScreenMenuGroupSection from './VPNavScreenMenuGroupSection.vue'
 
@@ -29,7 +29,8 @@ function toggle() {
       @click="toggle"
     >
       <span class="button-text" v-html="text"></span>
-      <VPIconPlus class="button-icon" />
+<!--      <VPIconPlus class="button-icon" />-->
+      <span class="vp-icon vp-icon-plus button-icon" />
     </button>
 
     <div :id="groupId" class="items">
diff --git a/src/client/theme-default/components/VPNavScreenTranslations.vue b/src/client/theme-default/components/VPNavScreenTranslations.vue
index 5a5f169a..2e9fb6b6 100644
--- a/src/client/theme-default/components/VPNavScreenTranslations.vue
+++ b/src/client/theme-default/components/VPNavScreenTranslations.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { ref } from 'vue'
-import VPIconChevronDown from './icons/VPIconChevronDown.vue'
-import VPIconLanguages from './icons/VPIconLanguages.vue'
+// import VPIconChevronDown from './icons/VPIconChevronDown.vue'
+// import VPIconLanguages from './icons/VPIconLanguages.vue'
 import { useLangs } from '../composables/langs'
 import VPLink from './VPLink.vue'
 
@@ -20,9 +20,11 @@ function toggle() {
     :class="{ open: isOpen }"
   >
     <button class="title" @click="toggle">
-      <VPIconLanguages class="icon lang" />
+<!--      <VPIconLanguages class="icon lang" />-->
+      <span class="vp-icon vp-icon-languages icon lang" />
       {{ currentLang.label }}
-      <VPIconChevronDown class="icon chevron" />
+<!--      <VPIconChevronDown class="icon chevron" />-->
+      <span class="vp-icon vp-icon-chevron-down icon chevron" />
     </button>
 
     <ul class="list">
diff --git a/src/client/theme-default/components/VPSidebarItem.vue b/src/client/theme-default/components/VPSidebarItem.vue
index 31ce2dd9..509baecd 100644
--- a/src/client/theme-default/components/VPSidebarItem.vue
+++ b/src/client/theme-default/components/VPSidebarItem.vue
@@ -2,7 +2,7 @@
 import { computed } from 'vue'
 import type { DefaultTheme } from 'vitepress/theme'
 import { useSidebarControl } from '../composables/sidebar'
-import VPIconChevronRight from './icons/VPIconChevronRight.vue'
+// import VPIconChevronRight from './icons/VPIconChevronRight.vue'
 import VPLink from './VPLink.vue'
 
 const props = defineProps<{
@@ -91,7 +91,8 @@ function onCaretClick() {
         @keydown.enter="onCaretClick"
         tabindex="0"
       >
-        <VPIconChevronRight class="caret-icon" />
+<!--        <VPIconChevronRight class="caret-icon" />-->
+        <span class="vp-icon vp-icon-chevron-right caret-icon" />
       </div>
     </div>
 
diff --git a/src/client/theme-default/components/VPSwitch.vue b/src/client/theme-default/components/VPSwitch.vue
index 6d89cf2e..51262816 100644
--- a/src/client/theme-default/components/VPSwitch.vue
+++ b/src/client/theme-default/components/VPSwitch.vue
@@ -47,7 +47,7 @@
   overflow: hidden;
 }
 
-.icon :deep(svg) {
+.icon :deep(svg), .icon :deep(.vp-icon) {
   position: absolute;
   top: 3px;
   left: 3px;
diff --git a/src/client/theme-default/components/VPSwitchAppearance.vue b/src/client/theme-default/components/VPSwitchAppearance.vue
index f63d1ce4..70b491ca 100644
--- a/src/client/theme-default/components/VPSwitchAppearance.vue
+++ b/src/client/theme-default/components/VPSwitchAppearance.vue
@@ -2,8 +2,8 @@
 import { inject, computed } from 'vue'
 import { useData } from '../composables/data'
 import VPSwitch from './VPSwitch.vue'
-import VPIconMoon from './icons/VPIconMoon.vue'
-import VPIconSun from './icons/VPIconSun.vue'
+// import VPIconMoon from './icons/VPIconMoon.vue'
+// import VPIconSun from './icons/VPIconSun.vue'
 
 const { isDark, theme } = useData()
 
@@ -25,8 +25,10 @@ const switchTitle = computed(() => {
     :aria-checked="isDark"
     @click="toggleAppearance"
   >
-    <VPIconSun class="sun" />
-    <VPIconMoon class="moon" />
+<!--    <VPIconSun class="sun" />-->
+<!--    <VPIconMoon class="moon" />-->
+    <span class="vp-icon vp-icon-sun sun" />
+    <span class="vp-icon vp-icon-moon moon" />
   </VPSwitch>
 </template>
 
diff --git a/src/client/theme-default/components/VPTeamMembersItem.vue b/src/client/theme-default/components/VPTeamMembersItem.vue
index 5acb21e8..dbe47ad0 100644
--- a/src/client/theme-default/components/VPTeamMembersItem.vue
+++ b/src/client/theme-default/components/VPTeamMembersItem.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import type { DefaultTheme } from 'vitepress/theme'
-import VPIconHeart from './icons/VPIconHeart.vue'
+// import VPIconHeart from './icons/VPIconHeart.vue'
 import VPLink from './VPLink.vue'
 import VPSocialLinks from './VPSocialLinks.vue'
 
@@ -47,7 +47,8 @@ withDefaults(defineProps<Props>(), {
     </div>
     <div v-if="member.sponsor" class="sp">
       <VPLink class="sp-link" :href="member.sponsor" no-icon>
-        <VPIconHeart class="sp-icon" /> {{ member.actionText || 'Sponsor' }}
+<!--        <VPIconHeart class="sp-icon" />-->
+        <span class="vp-icon vp-icon-heart sp-icon" /> {{ member.actionText || 'Sponsor' }}
       </VPLink>
     </div>
   </article>
diff --git a/src/client/theme-default/styles/icons.css b/src/client/theme-default/styles/icons.css
new file mode 100644
index 00000000..038ba43a
--- /dev/null
+++ b/src/client/theme-default/styles/icons.css
@@ -0,0 +1,54 @@
+.vp-icon {
+    width: 1em;
+    height: 1em;
+}
+.vp-icon.bg {
+    background-size: 100% 100%;
+    background-color: transparent;
+}
+.vp-icon:not(.bg) {
+    -webkit-mask: var(--vp-icon) no-repeat;
+    mask: var(--vp-icon) no-repeat;
+    -webkit-mask-size: 100% 100%;
+    mask-size: 100% 100%;
+    background-color: currentColor;
+    color: inherit;
+}
+
+.vp-icon-align-justify {
+    --vp-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M21,11H3c-0.6,0-1-0.4-1-1s0.4-1,1-1h18c0.6,0,1,0.4,1,1S21.6,11,21,11z' /%3E%3Cpath d='M21,7H3C2.4,7,2,6.6,2,6s0.4-1,1-1h18c0.6,0,1,0.4,1,1S21.6,7,21,7z' /%3E%3Cpath d='M21,15H3c-0.6,0-1-0.4-1-1s0.4-1,1-1h18c0.6,0,1,0.4,1,1S21.6,15,21,15z' /%3E%3Cpath d='M21,19H3c-0.6,0-1-0.4-1-1s0.4-1,1-1h18c0.6,0,1,0.4,1,1S21.6,19,21,19z' /%3E%3C/svg%3E");
+}
+.vp-icon-align-left {
+    --vp-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M17,11H3c-0.6,0-1-0.4-1-1s0.4-1,1-1h14c0.6,0,1,0.4,1,1S17.6,11,17,11z' /%3E%3Cpath d='M21,7H3C2.4,7,2,6.6,2,6s0.4-1,1-1h18c0.6,0,1,0.4,1,1S21.6,7,21,7z' /%3E%3Cpath d='M21,15H3c-0.6,0-1-0.4-1-1s0.4-1,1-1h18c0.6,0,1,0.4,1,1S21.6,15,21,15z' /%3E%3Cpath d='M17,19H3c-0.6,0-1-0.4-1-1s0.4-1,1-1h14c0.6,0,1,0.4,1,1S17.6,19,17,19z' /%3E%3C/svg%3E");
+}
+.vp-icon-chevron-right {
+    --vp-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9,19c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l5.3-5.3L8.3,6.7c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l6,6c0.4,0.4,0.4,1,0,1.4l-6,6C9.5,18.9,9.3,19,9,19z' /%3E%3C/svg%3E");
+}
+.vp-icon-chevron-down {
+    --vp-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12,16c-0.3,0-0.5-0.1-0.7-0.3l-6-6c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l5.3,5.3l5.3-5.3c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-6,6C12.5,15.9,12.3,16,12,16z' /%3E%3C/svg%3E");
+}
+.vp-icon-edit {
+    --vp-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M18,23H4c-1.7,0-3-1.3-3-3V6c0-1.7,1.3-3,3-3h7c0.6,0,1,0.4,1,1s-0.4,1-1,1H4C3.4,5,3,5.4,3,6v14c0,0.6,0.4,1,1,1h14c0.6,0,1-0.4,1-1v-7c0-0.6,0.4-1,1-1s1,0.4,1,1v7C21,21.7,19.7,23,18,23z' /%3E%3Cpath d='M8,17c-0.3,0-0.5-0.1-0.7-0.3C7,16.5,6.9,16.1,7,15.8l1-4c0-0.2,0.1-0.3,0.3-0.5l9.5-9.5c1.2-1.2,3.2-1.2,4.4,0c1.2,1.2,1.2,3.2,0,4.4l-9.5,9.5c-0.1,0.1-0.3,0.2-0.5,0.3l-4,1C8.2,17,8.1,17,8,17zM9.9,12.5l-0.5,2.1l2.1-0.5l9.3-9.3c0.4-0.4,0.4-1.1,0-1.6c-0.4-0.4-1.2-0.4-1.6,0l0,0L9.9,12.5z M18.5,2.5L18.5,2.5L18.5,2.5z' /%3E%3C/svg%3E");
+}
+.vp-icon-plus {
+    --vp-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M18.9,10.9h-6v-6c0-0.6-0.4-1-1-1s-1,0.4-1,1v6h-6c-0.6,0-1,0.4-1,1s0.4,1,1,1h6v6c0,0.6,0.4,1,1,1s1-0.4,1-1v-6h6c0.6,0,1-0.4,1-1S19.5,10.9,18.9,10.9z' /%3E%3C/svg%3E");
+}
+.vp-icon-arrow-right {
+    --vp-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M19.9,12.4c0.1-0.2,0.1-0.5,0-0.8c-0.1-0.1-0.1-0.2-0.2-0.3l-7-7c-0.4-0.4-1-0.4-1.4,0s-0.4,1,0,1.4l5.3,5.3H5c-0.6,0-1,0.4-1,1s0.4,1,1,1h11.6l-5.3,5.3c-0.4,0.4-0.4,1,0,1.4c0.2,0.2,0.5,0.3,0.7,0.3s0.5-0.1,0.7-0.3l7-7C19.8,12.6,19.9,12.5,19.9,12.4z' /%3E%3C/svg%3E");;
+}
+.vp-icon-sun {
+    --vp-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12,18c-3.3,0-6-2.7-6-6s2.7-6,6-6s6,2.7,6,6S15.3,18,12,18zM12,8c-2.2,0-4,1.8-4,4c0,2.2,1.8,4,4,4c2.2,0,4-1.8,4-4C16,9.8,14.2,8,12,8z' /%3E%3Cpath d='M12,4c-0.6,0-1-0.4-1-1V1c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,3.6,12.6,4,12,4z' /%3E%3Cpath d='M12,24c-0.6,0-1-0.4-1-1v-2c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,23.6,12.6,24,12,24z' /%3E%3Cpath d='M5.6,6.6c-0.3,0-0.5-0.1-0.7-0.3L3.5,4.9c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C6.2,6.5,5.9,6.6,5.6,6.6z' /%3E%3Cpath d='M19.8,20.8c-0.3,0-0.5-0.1-0.7-0.3l-1.4-1.4c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C20.3,20.7,20,20.8,19.8,20.8z' /%3E%3Cpath d='M3,13H1c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S3.6,13,3,13z' /%3E%3Cpath d='M23,13h-2c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S23.6,13,23,13z' /%3E%3Cpath d='M4.2,20.8c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C4.7,20.7,4.5,20.8,4.2,20.8z' /%3E%3Cpath d='M18.4,6.6c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C18.9,6.5,18.6,6.6,18.4,6.6z' /%3E%3C/svg%3E");
+}
+.vp-icon-moon {
+    --vp-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12.1,22c-0.3,0-0.6,0-0.9,0c-5.5-0.5-9.5-5.4-9-10.9c0.4-4.8,4.2-8.6,9-9c0.4,0,0.8,0.2,1,0.5c0.2,0.3,0.2,0.8-0.1,1.1c-2,2.7-1.4,6.4,1.3,8.4c2.1,1.6,5,1.6,7.1,0c0.3-0.2,0.7-0.3,1.1-0.1c0.3,0.2,0.5,0.6,0.5,1c-0.2,2.7-1.5,5.1-3.6,6.8C16.6,21.2,14.4,22,12.1,22zM9.3,4.4c-2.9,1-5,3.6-5.2,6.8c-0.4,4.4,2.8,8.3,7.2,8.7c2.1,0.2,4.2-0.4,5.8-1.8c1.1-0.9,1.9-2.1,2.4-3.4c-2.5,0.9-5.3,0.5-7.5-1.1C9.2,11.4,8.1,7.7,9.3,4.4z' /%3E%3C/svg%3E");
+}
+.vp-icon-more-horizontal {
+    --vp-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='2' /%3E%3Ccircle cx='19' cy='12' r='2' /%3E%3Ccircle cx='5' cy='12' r='2' /%3E%3C/svg%3E");
+}
+.vp-icon-languages {
+    --vp-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M0 0h24v24H0z' fill='none'%3E%3C/path%3E%3Cpath d=' M12.87 15.07l-2.54-2.51.03-.03c1.74-1.94 2.98-4.17 3.71-6.53H17V4h-7V2H8v2H1v1.99h11.17C11.5 7.92 10.44 9.75 9 11.35 8.07 10.32 7.3 9.19 6.69 8h-2c.73 1.63 1.73 3.17 2.98 4.56l-5.09 5.02L4 19l5-5 3.11 3.11.76-2.04zM18.5 10h-2L12 22h2l1.12-3h4.75L21 22h2l-4.5-12zm-2.62 7l1.62-4.33L19.12 17h-3.24z ' class='css-c4d79v' %3E%3C/path%3E%3C/svg%3E");
+}
+.vp-icon-heart {
+    --vp-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12,22.2c-0.3,0-0.5-0.1-0.7-0.3l-8.8-8.8c-2.5-2.5-2.5-6.7,0-9.2c2.5-2.5,6.7-2.5,9.2,0L12,4.3l0.4-0.4c0,0,0,0,0,0C13.6,2.7,15.2,2,16.9,2c0,0,0,0,0,0c1.7,0,3.4,0.7,4.6,1.9l0,0c1.2,1.2,1.9,2.9,1.9,4.6c0,1.7-0.7,3.4-1.9,4.6l-8.8,8.8C12.5,22.1,12.3,22.2,12,22.2zM7,4C5.9,4,4.7,4.4,3.9,5.3c-1.8,1.8-1.8,4.6,0,6.4l8.1,8.1l8.1-8.1c0.9-0.9,1.3-2,1.3-3.2c0-1.2-0.5-2.3-1.3-3.2l0,0C19.3,4.5,18.2,4,17,4c0,0,0,0,0,0c-1.2,0-2.3,0.5-3.2,1.3c0,0,0,0,0,0l-1.1,1.1c-0.4,0.4-1,0.4-1.4,0l-1.1-1.1C9.4,4.4,8.2,4,7,4z' /%3E%3C/svg%3E");
+}
+
diff --git a/src/client/theme-default/without-fonts.ts b/src/client/theme-default/without-fonts.ts
index c163bf23..5b191184 100644
--- a/src/client/theme-default/without-fonts.ts
+++ b/src/client/theme-default/without-fonts.ts
@@ -1,5 +1,6 @@
 import './styles/vars.css'
 import './styles/base.css'
+import './styles/icons.css'
 import './styles/utils.css'
 import './styles/components/custom-block.css'
 import './styles/components/vp-code.css'