vitepress 2.0.0-alpha.2 → 2.0.0-alpha.21

package/dist/client/theme-default/components/VPNavBarMenu.vue

@@ -1,40 +0,0 @@
-<script lang="ts" setup>
-import { useData } from '../composables/data'
-import VPNavBarMenuLink from './VPNavBarMenuLink.vue'
-import VPNavBarMenuGroup from './VPNavBarMenuGroup.vue'
-
-const { theme } = useData()
-</script>
-
-<template>
-  <nav
-    v-if="theme.nav"
-    aria-labelledby="main-nav-aria-label"
-    class="VPNavBarMenu"
-  >
-    <span id="main-nav-aria-label" class="visually-hidden">
-      Main Navigation
-    </span>
-    <template v-for="item in theme.nav" :key="JSON.stringify(item)">
-      <VPNavBarMenuLink v-if="'link' in item" :item="item" />
-      <component
-        v-else-if="'component' in item"
-        :is="item.component"
-        v-bind="item.props"
-      />
-      <VPNavBarMenuGroup v-else :item="item" />
-    </template>
-  </nav>
-</template>
-
-<style scoped>
-.VPNavBarMenu {
-  display: none;
-}
-
-@media (min-width: 768px) {
-  .VPNavBarMenu {
-    display: flex;
-  }
-}
-</style>

package/dist/client/theme-default/components/VPNavBarMenuGroup.vue

@@ -1,42 +0,0 @@
-<script lang="ts" setup>
-import type { DefaultTheme } from 'vitepress/theme'
-import { computed } from 'vue'
-import { useData } from '../composables/data'
-import { isActive } from '../../shared'
-import VPFlyout from './VPFlyout.vue'
-
-const props = defineProps<{
-  item: DefaultTheme.NavItemWithChildren
-}>()
-
-const { page } = useData()
-
-const isChildActive = (navItem: DefaultTheme.NavItem) => {
-  if ('component' in navItem) return false
-
-  if ('link' in navItem) {
-    return isActive(
-      page.value.relativePath,
-      navItem.link,
-      !!props.item.activeMatch
-    )
-  }
-
-  return navItem.items.some(isChildActive)
-}
-
-const childrenActive = computed(() => isChildActive(props.item))
-</script>
-
-<template>
-  <VPFlyout
-    :class="{
-      VPNavBarMenuGroup: true,
-      active:
-        isActive(page.relativePath, item.activeMatch, !!item.activeMatch) ||
-        childrenActive
-    }"
-    :button="item.text"
-    :items="item.items"
-  />
-</template>

package/dist/client/theme-default/components/VPNavBarMenuLink.vue

@@ -1,53 +0,0 @@
-<script lang="ts" setup>
-import type { DefaultTheme } from 'vitepress/theme'
-import { useData } from '../composables/data'
-import { isActive } from '../../shared'
-import VPLink from './VPLink.vue'
-
-defineProps<{
-  item: DefaultTheme.NavItemWithLink
-}>()
-
-const { page } = useData()
-</script>
-
-<template>
-  <VPLink
-    :class="{
-      VPNavBarMenuLink: true,
-      active: isActive(
-        page.relativePath,
-        item.activeMatch || item.link,
-        !!item.activeMatch
-      )
-    }"
-    :href="item.link"
-    :target="item.target"
-    :rel="item.rel"
-    :no-icon="item.noIcon"
-    tabindex="0"
-  >
-    <span v-html="item.text"></span>
-  </VPLink>
-</template>
-
-<style scoped>
-.VPNavBarMenuLink {
-  display: flex;
-  align-items: center;
-  padding: 0 12px;
-  line-height: var(--vp-nav-height);
-  font-size: 14px;
-  font-weight: 500;
-  color: var(--vp-c-text-1);
-  transition: color 0.25s;
-}
-
-.VPNavBarMenuLink.active {
-  color: var(--vp-c-brand-1);
-}
-
-.VPNavBarMenuLink:hover {
-  color: var(--vp-c-brand-1);
-}
-</style>

package/dist/client/theme-default/components/VPNavBarSocialLinks.vue

@@ -1,27 +0,0 @@
-<script lang="ts" setup>
-import { useData } from '../composables/data'
-import VPSocialLinks from './VPSocialLinks.vue'
-
-const { theme } = useData()
-</script>
-
-<template>
-  <VPSocialLinks
-    v-if="theme.socialLinks"
-    class="VPNavBarSocialLinks"
-    :links="theme.socialLinks"
-  />
-</template>
-
-<style scoped>
-.VPNavBarSocialLinks {
-  display: none;
-}
-
-@media (min-width: 1280px) {
-  .VPNavBarSocialLinks {
-    display: flex;
-    align-items: center;
-  }
-}
-</style>

package/dist/client/theme-default/components/VPNavBarTranslations.vue

@@ -1,47 +0,0 @@
-<script lang="ts" setup>
-import VPFlyout from './VPFlyout.vue'
-import VPMenuLink from './VPMenuLink.vue'
-import { useData } from '../composables/data'
-import { useLangs } from '../composables/langs'
-
-const { theme } = useData()
-const { localeLinks, currentLang } = useLangs({ correspondingLink: true })
-</script>
-
-<template>
-  <VPFlyout
-    v-if="localeLinks.length && currentLang.label"
-    class="VPNavBarTranslations"
-    icon="vpi-languages"
-    :label="theme.langMenuLabel || 'Change language'"
-  >
-    <div class="items">
-      <p class="title">{{ currentLang.label }}</p>
-
-      <template v-for="locale in localeLinks" :key="locale.link">
-        <VPMenuLink :item="locale" />
-      </template>
-    </div>
-  </VPFlyout>
-</template>
-
-<style scoped>
-.VPNavBarTranslations {
-  display: none;
-}
-
-@media (min-width: 1280px) {
-  .VPNavBarTranslations {
-    display: flex;
-    align-items: center;
-  }
-}
-
-.title {
-  padding: 0 24px 0 12px;
-  line-height: 32px;
-  font-size: 14px;
-  font-weight: 700;
-  color: var(--vp-c-text-1);
-}
-</style>

package/dist/client/theme-default/components/VPNavScreenAppearance.vue

@@ -1,40 +0,0 @@
-<script lang="ts" setup>
-import { useData } from '../composables/data'
-import VPSwitchAppearance from './VPSwitchAppearance.vue'
-
-const { site, theme } = useData()
-</script>
-
-<template>
-  <div
-    v-if="
-      site.appearance &&
-      site.appearance !== 'force-dark' &&
-      site.appearance !== 'force-auto'
-    "
-    class="VPNavScreenAppearance"
-  >
-    <p class="text">
-      {{ theme.darkModeSwitchLabel || 'Appearance' }}
-    </p>
-    <VPSwitchAppearance />
-  </div>
-</template>
-
-<style scoped>
-.VPNavScreenAppearance {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  border-radius: 8px;
-  padding: 12px 14px 12px 16px;
-  background-color: var(--vp-c-bg-soft);
-}
-
-.text {
-  line-height: 24px;
-  font-size: 12px;
-  font-weight: 500;
-  color: var(--vp-c-text-2);
-}
-</style>

package/dist/client/theme-default/components/VPNavScreenMenu.vue

@@ -1,26 +0,0 @@
-<script lang="ts" setup>
-import { useData } from '../composables/data'
-import VPNavScreenMenuLink from './VPNavScreenMenuLink.vue'
-import VPNavScreenMenuGroup from './VPNavScreenMenuGroup.vue'
-
-const { theme } = useData()
-</script>
-
-<template>
-  <nav v-if="theme.nav" class="VPNavScreenMenu">
-    <template v-for="item in theme.nav" :key="JSON.stringify(item)">
-      <VPNavScreenMenuLink v-if="'link' in item" :item="item" />
-      <component
-        v-else-if="'component' in item"
-        :is="item.component"
-        v-bind="item.props"
-        screen-menu
-      />
-      <VPNavScreenMenuGroup
-        v-else
-        :text="item.text || ''"
-        :items="item.items"
-      />
-    </template>
-  </nav>
-</template>

package/dist/client/theme-default/components/VPNavScreenMenuGroup.vue

@@ -1,112 +0,0 @@
-<script lang="ts" setup>
-import { computed, ref } from 'vue'
-import VPNavScreenMenuGroupLink from './VPNavScreenMenuGroupLink.vue'
-import VPNavScreenMenuGroupSection from './VPNavScreenMenuGroupSection.vue'
-
-const props = defineProps<{
-  text: string
-  items: any[]
-}>()
-
-const isOpen = ref(false)
-
-const groupId = computed(
-  () => `NavScreenGroup-${props.text.replace(' ', '-').toLowerCase()}`
-)
-
-function toggle() {
-  isOpen.value = !isOpen.value
-}
-</script>
-
-<template>
-  <div class="VPNavScreenMenuGroup" :class="{ open: isOpen }">
-    <button
-      class="button"
-      :aria-controls="groupId"
-      :aria-expanded="isOpen"
-      @click="toggle"
-    >
-      <span class="button-text" v-html="text"></span>
-      <span class="vpi-plus button-icon" />
-    </button>
-
-    <div :id="groupId" class="items">
-      <template v-for="item in items" :key="JSON.stringify(item)">
-        <div v-if="'link' in item" class="item">
-          <VPNavScreenMenuGroupLink :item="item" />
-        </div>
-
-        <div v-else-if="'component' in item" class="item">
-          <component :is="item.component" v-bind="item.props" screen-menu />
-        </div>
-
-        <div v-else class="group">
-          <VPNavScreenMenuGroupSection :text="item.text" :items="item.items" />
-        </div>
-      </template>
-    </div>
-  </div>
-</template>
-
-<style scoped>
-.VPNavScreenMenuGroup {
-  border-bottom: 1px solid var(--vp-c-divider);
-  height: 48px;
-  overflow: hidden;
-  transition: border-color 0.5s;
-}
-
-.VPNavScreenMenuGroup .items {
-  visibility: hidden;
-}
-
-.VPNavScreenMenuGroup.open .items {
-  visibility: visible;
-}
-
-.VPNavScreenMenuGroup.open {
-  padding-bottom: 10px;
-  height: auto;
-}
-
-.VPNavScreenMenuGroup.open .button {
-  padding-bottom: 6px;
-  color: var(--vp-c-brand-1);
-}
-
-.VPNavScreenMenuGroup.open .button-icon {
-  /*rtl:ignore*/
-  transform: rotate(45deg);
-}
-
-.button {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  padding: 12px 4px 11px 0;
-  width: 100%;
-  line-height: 24px;
-  font-size: 14px;
-  font-weight: 500;
-  color: var(--vp-c-text-1);
-  transition: color 0.25s;
-}
-
-.button:hover {
-  color: var(--vp-c-brand-1);
-}
-
-.button-icon {
-  transition: transform 0.25s;
-}
-
-.group:first-child {
-  padding-top: 0px;
-}
-
-.group + .group,
-.group + .item {
-  padding-top: 4px;
-}
-</style>

package/dist/client/theme-default/components/VPNavScreenMenuGroupLink.vue

@@ -1,40 +0,0 @@
-<script lang="ts" setup>
-import type { DefaultTheme } from 'vitepress/theme'
-import { inject } from 'vue'
-import VPLink from './VPLink.vue'
-
-defineProps<{
-  item: DefaultTheme.NavItemWithLink
-}>()
-
-const closeScreen = inject('close-screen') as () => void
-</script>
-
-<template>
-  <VPLink
-    class="VPNavScreenMenuGroupLink"
-    :href="item.link"
-    :target="item.target"
-    :rel="item.rel"
-    :no-icon="item.noIcon"
-    @click="closeScreen"
-  >
-    <span v-html="item.text"></span>
-  </VPLink>
-</template>
-
-<style scoped>
-.VPNavScreenMenuGroupLink {
-  display: block;
-  margin-left: 12px;
-  line-height: 32px;
-  font-size: 14px;
-  font-weight: 400;
-  color: var(--vp-c-text-1);
-  transition: color 0.25s;
-}
-
-.VPNavScreenMenuGroupLink:hover {
-  color: var(--vp-c-brand-1);
-}
-</style>

package/dist/client/theme-default/components/VPNavScreenMenuGroupSection.vue

@@ -1,34 +0,0 @@
-<script lang="ts" setup>
-import type { DefaultTheme } from 'vitepress/theme'
-import VPNavScreenMenuGroupLink from './VPNavScreenMenuGroupLink.vue'
-
-defineProps<{
-  text?: string
-  items: DefaultTheme.NavItemWithLink[]
-}>()
-</script>
-
-<template>
-  <div class="VPNavScreenMenuGroupSection">
-    <p v-if="text" class="title">{{ text }}</p>
-    <VPNavScreenMenuGroupLink
-      v-for="item in items"
-      :key="item.text"
-      :item="item"
-    />
-  </div>
-</template>
-
-<style scoped>
-.VPNavScreenMenuGroupSection {
-  display: block;
-}
-
-.title {
-  line-height: 32px;
-  font-size: 13px;
-  font-weight: 700;
-  color: var(--vp-c-text-2);
-  transition: color 0.25s;
-}
-</style>

package/dist/client/theme-default/components/VPNavScreenMenuLink.vue

@@ -1,43 +0,0 @@
-<script lang="ts" setup>
-import type { DefaultTheme } from 'vitepress/theme'
-import { inject } from 'vue'
-import VPLink from './VPLink.vue'
-
-defineProps<{
-  item: DefaultTheme.NavItemWithLink
-}>()
-
-const closeScreen = inject('close-screen') as () => void
-</script>
-
-<template>
-  <VPLink
-    class="VPNavScreenMenuLink"
-    :href="item.link"
-    :target="item.target"
-    :rel="item.rel"
-    :no-icon="item.noIcon"
-    @click="closeScreen"
-  >
-    <span v-html="item.text"></span>
-  </VPLink>
-</template>
-
-<style scoped>
-.VPNavScreenMenuLink {
-  display: block;
-  border-bottom: 1px solid var(--vp-c-divider);
-  padding: 12px 0 11px;
-  line-height: 24px;
-  font-size: 14px;
-  font-weight: 500;
-  color: var(--vp-c-text-1);
-  transition:
-    border-color 0.25s,
-    color 0.25s;
-}
-
-.VPNavScreenMenuLink:hover {
-  color: var(--vp-c-brand-1);
-}
-</style>

package/dist/client/theme-default/components/VPNavScreenSocialLinks.vue

@@ -1,14 +0,0 @@
-<script lang="ts" setup>
-import { useData } from '../composables/data'
-import VPSocialLinks from './VPSocialLinks.vue'
-
-const { theme } = useData()
-</script>
-
-<template>
-  <VPSocialLinks
-    v-if="theme.socialLinks"
-    class="VPNavScreenSocialLinks"
-    :links="theme.socialLinks"
-  />
-</template>

package/dist/client/theme-default/components/VPNavScreenTranslations.vue

@@ -1,73 +0,0 @@
-<script setup lang="ts">
-import { ref } from 'vue'
-import { useLangs } from '../composables/langs'
-import VPLink from './VPLink.vue'
-
-const { localeLinks, currentLang } = useLangs({ correspondingLink: true })
-const isOpen = ref(false)
-
-function toggle() {
-  isOpen.value = !isOpen.value
-}
-</script>
-
-<template>
-  <div
-    v-if="localeLinks.length && currentLang.label"
-    class="VPNavScreenTranslations"
-    :class="{ open: isOpen }"
-  >
-    <button class="title" @click="toggle">
-      <span class="vpi-languages icon lang" />
-      {{ currentLang.label }}
-      <span class="vpi-chevron-down icon chevron" />
-    </button>
-
-    <ul class="list">
-      <li v-for="locale in localeLinks" :key="locale.link" class="item">
-        <VPLink class="link" :href="locale.link">{{ locale.text }}</VPLink>
-      </li>
-    </ul>
-  </div>
-</template>
-
-<style scoped>
-.VPNavScreenTranslations {
-  height: 24px;
-  overflow: hidden;
-}
-
-.VPNavScreenTranslations.open {
-  height: auto;
-}
-
-.title {
-  display: flex;
-  align-items: center;
-  font-size: 14px;
-  font-weight: 500;
-  color: var(--vp-c-text-1);
-}
-
-.icon {
-  font-size: 16px;
-}
-
-.icon.lang {
-  margin-right: 8px;
-}
-
-.icon.chevron {
-  margin-left: 4px;
-}
-
-.list {
-  padding: 4px 0 0 24px;
-}
-
-.link {
-  line-height: 32px;
-  font-size: 13px;
-  color: var(--vp-c-text-1);
-}
-</style>

package/dist/client/theme-default/components/icons/VPIconAlignJustify.vue

@@ -1,8 +0,0 @@
-<template>
-  <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewBox="0 0 24 24">
-    <path 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" />
-    <path 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" />
-    <path 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" />
-    <path 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" />
-  </svg>
-</template>

package/dist/client/theme-default/components/icons/VPIconAlignLeft.vue

@@ -1,8 +0,0 @@
-<template>
-  <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewBox="0 0 24 24">
-    <path 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" />
-    <path 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" />
-    <path 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" />
-    <path 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" />
-  </svg>
-</template>

package/dist/client/theme-default/components/icons/VPIconAlignRight.vue

@@ -1,8 +0,0 @@
-<template>
-  <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewBox="0 0 24 24">
-    <path d="M21,11H7c-0.6,0-1-0.4-1-1s0.4-1,1-1h14c0.6,0,1,0.4,1,1S21.6,11,21,11z" />
-    <path 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" />
-    <path 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" />
-    <path d="M21,19H7c-0.6,0-1-0.4-1-1s0.4-1,1-1h14c0.6,0,1,0.4,1,1S21.6,19,21,19z" />
-  </svg>
-</template>

package/dist/client/theme-default/components/icons/VPIconArrowLeft.vue

@@ -1,7 +0,0 @@
-<template>
-  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
-    <path
-      d="M19,11H7.4l5.3-5.3c0.4-0.4,0.4-1,0-1.4s-1-0.4-1.4,0l-7,7c-0.1,0.1-0.2,0.2-0.2,0.3c-0.1,0.2-0.1,0.5,0,0.8c0.1,0.1,0.1,0.2,0.2,0.3l7,7c0.2,0.2,0.5,0.3,0.7,0.3s0.5-0.1,0.7-0.3c0.4-0.4,0.4-1,0-1.4L7.4,13H19c0.6,0,1-0.4,1-1S19.6,11,19,11z"
-    />
-  </svg>
-</template>

package/dist/client/theme-default/components/icons/VPIconArrowRight.vue

@@ -1,7 +0,0 @@
-<template>
-  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
-    <path
-      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"
-    />
-  </svg>
-</template>

package/dist/client/theme-default/components/icons/VPIconChevronDown.vue

@@ -1,5 +0,0 @@
-<template>
-  <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewBox="0 0 24 24">
-    <path 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" />
-  </svg>
-</template>

package/dist/client/theme-default/components/icons/VPIconChevronLeft.vue

@@ -1,5 +0,0 @@
-<template>
-  <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewBox="0 0 24 24">
-    <path d="M15,19c-0.3,0-0.5-0.1-0.7-0.3l-6-6c-0.4-0.4-0.4-1,0-1.4l6-6c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4L10.4,12l5.3,5.3c0.4,0.4,0.4,1,0,1.4C15.5,18.9,15.3,19,15,19z" />
-  </svg>
-</template>

package/dist/client/theme-default/components/icons/VPIconChevronRight.vue

@@ -1,5 +0,0 @@
-<template>
-  <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewBox="0 0 24 24">
-    <path 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" />
-  </svg>
-</template>

package/dist/client/theme-default/components/icons/VPIconChevronUp.vue

@@ -1,5 +0,0 @@
-<template>
-  <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewBox="0 0 24 24">
-    <path d="M18,16c-0.3,0-0.5-0.1-0.7-0.3L12,10.4l-5.3,5.3c-0.4,0.4-1,0.4-1.4,0s-0.4-1,0-1.4l6-6c0.4-0.4,1-0.4,1.4,0l6,6c0.4,0.4,0.4,1,0,1.4C18.5,15.9,18.3,16,18,16z" />
-  </svg>
-</template>

package/dist/client/theme-default/components/icons/VPIconEdit.vue

@@ -1,6 +0,0 @@
-<template>
-  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
-    <path 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" />
-    <path 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" />
-  </svg>
-</template>