msb-public
/
vitepress
mirror of https://github.com/vuejs/vitepress
2
1
Code Issues Projects Releases Wiki Activity

perf(theme): move svg icons to css

Browse Source
pull/3537/head
userquin 2 years ago
parent 963b3b81bc
commit ed2106b823
16 changed files with 107 additions and 34 deletions
Show Stats Download Patch File Download Diff File

5
src/client/theme-default/components/VPDocFooter.vue
Unescape View File

@ -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>

4
src/client/theme-default/components/VPFeature.vue
Unescape View File

@ -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>

13
src/client/theme-default/components/VPFlyout.vue
Unescape View File

@ -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">

7
src/client/theme-default/components/VPHomeSponsors.vue
Unescape View File

@ -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>

5
src/client/theme-default/components/VPLocalNav.vue
Unescape View File

@ -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>

5
src/client/theme-default/components/VPLocalNavOutlineDropdown.vue
Unescape View File

@ -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' }}

6
src/client/theme-default/components/VPNavBarSearchButton.vue
Unescape View File

@ -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 {

4
src/client/theme-default/components/VPNavBarTranslations.vue
Unescape View File

@ -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">

5
src/client/theme-default/components/VPNavScreenMenuGroup.vue
Unescape View File

@ -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">

10
src/client/theme-default/components/VPNavScreenTranslations.vue
Unescape View File

@ -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">

5
src/client/theme-default/components/VPSidebarItem.vue
Unescape View File

@ -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>

2
src/client/theme-default/components/VPSwitch.vue
Unescape View File

@ -47,7 +47,7 @@
overflow: hidden;
}
.icon :deep(svg) {
.icon :deep(svg), .icon :deep(.vp-icon) {
position: absolute;
top: 3px;
left: 3px;

10
src/client/theme-default/components/VPSwitchAppearance.vue
Unescape View File

@ -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>

5
src/client/theme-default/components/VPTeamMembersItem.vue
Unescape View File

@ -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>

54
src/client/theme-default/styles/icons.css
Unescape View File

@ -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");
}

1
src/client/theme-default/without-fonts.ts
Unescape View File

@ -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'

Write Preview
Loading…
Cancel
Save