docs: improve homepage feature icons

Use a modern and consistent icon set across all localized homepages.

- Keep the SVGs embedded as data URIs.
- Remove the Vite light/dark variant.
- Size the icons in Figma, avoiding per-icon CSS overrides.

The previous gradient Vite mark relies on multiple Gaussian blur
effects. At the small feature-icon size, these effects can be
downsampled and make the mark appear soft. Use the non-gradient mark.

Sources: JoyPixels for write/fast; Iconify for Vite/Vue.
Refs: #5319
pull/5466/head
ChisakaKanako 1 week ago
parent 69b11b9a57
commit 271c777341

File diff suppressed because one or more lines are too long

@ -21,7 +21,7 @@ hero:
alt: VitePress alt: VitePress
features: features:
- icon: <span class="memo"></span> - icon: <span class="write"></span>
title: Focus on your content title: Focus on your content
details: Effortlessly create beautiful documentation sites with just markdown. details: Effortlessly create beautiful documentation sites with just markdown.
- icon: <span class="vite"></span> - icon: <span class="vite"></span>
@ -30,7 +30,7 @@ features:
- icon: <span class="vue"></span> - icon: <span class="vue"></span>
title: Customize with Vue title: Customize with Vue
details: Use Vue syntax and components directly in markdown, or build custom themes with Vue. details: Use Vue syntax and components directly in markdown, or build custom themes with Vue.
- icon: <span class="rocket"></span> - icon: <span class="fast"></span>
title: Ship fast sites title: Ship fast sites
details: Fast initial load with static HTML, fast post-load navigation with client-side routing. details: Fast initial load with static HTML, fast post-load navigation with client-side routing.
--- ---

@ -21,7 +21,7 @@ hero:
alt: VitePress alt: VitePress
features: features:
- icon: <span class="memo"></span> - icon: <span class="write"></span>
title: Concéntrese en su contenido title: Concéntrese en su contenido
details: Cree lindos sitios de documentación apenas con markdown. details: Cree lindos sitios de documentación apenas con markdown.
- icon: <span class="vite"></span> - icon: <span class="vite"></span>
@ -30,7 +30,7 @@ features:
- icon: <span class="vue"></span> - icon: <span class="vue"></span>
title: Personaliza con Vue title: Personaliza con Vue
details: Usa la sintaxis y componentes Vue directamente en markdown, o construye temas personalizados con Vue. details: Usa la sintaxis y componentes Vue directamente en markdown, o construye temas personalizados con Vue.
- icon: <span class="rocket"></span> - icon: <span class="fast"></span>
title: Entrega rápida de sitios title: Entrega rápida de sitios
details: Carga inicial rápida con HTML estático, navegación rápida con enrutamiento del lado del cliente. details: Carga inicial rápida con HTML estático, navegación rápida con enrutamiento del lado del cliente.
--- ---

@ -21,7 +21,7 @@ hero:
alt: ویت‌پرس alt: ویت‌پرس
features: features:
- icon: <span class="memo"></span> - icon: <span class="write"></span>
title: تمرکز روی محتوا title: تمرکز روی محتوا
details: ایجاد سایت‌های مستند‌سازی زیبا بدون زحمت و فقط با Markdown details: ایجاد سایت‌های مستند‌سازی زیبا بدون زحمت و فقط با Markdown
- icon: <span class="vite"></span> - icon: <span class="vite"></span>
@ -30,7 +30,7 @@ features:
- icon: <span class="vue"></span> - icon: <span class="vue"></span>
title: شخصی‌سازی با Vue title: شخصی‌سازی با Vue
details: استفاده مستقیم از syntax و کامپوننت‌های Vue در Markdown، یا ایجاد تم‌های شخصی به کمک Vue details: استفاده مستقیم از syntax و کامپوننت‌های Vue در Markdown، یا ایجاد تم‌های شخصی به کمک Vue
- icon: <span class="rocket"></span> - icon: <span class="fast"></span>
title: ارسال سایت های سریع title: ارسال سایت های سریع
details: بارگذاری اولیه سریع با HTML ایستا، ناوبری سریع پس از بارگیری با مسیریابی سمت کلاینت details: بارگذاری اولیه سریع با HTML ایستا، ناوبری سریع پس از بارگیری با مسیریابی سمت کلاینت
--- ---

@ -21,7 +21,7 @@ hero:
alt: VitePress alt: VitePress
features: features:
- icon: <span class="memo"></span> - icon: <span class="write"></span>
title: コンテンツに集中 title: コンテンツに集中
details: Markdown だけで、美しいドキュメントサイトを簡単に作成できます。 details: Markdown だけで、美しいドキュメントサイトを簡単に作成できます。
- icon: <span class="vite"></span> - icon: <span class="vite"></span>
@ -30,7 +30,7 @@ features:
- icon: <span class="vue"></span> - icon: <span class="vue"></span>
title: Vue でカスタマイズ title: Vue でカスタマイズ
details: Markdown 内で直接 Vue 構文やコンポーネントを利用したり、Vue で独自テーマを構築できます。 details: Markdown 内で直接 Vue 構文やコンポーネントを利用したり、Vue で独自テーマを構築できます。
- icon: <span class="rocket"></span> - icon: <span class="fast"></span>
title: 高速サイトを公開 title: 高速サイトを公開
details: 静的 HTML による高速初期ロードと、クライアントサイドルーティングによる快適なページ遷移。 details: 静的 HTML による高速初期ロードと、クライアントサイドルーティングによる快適なページ遷移。
--- ---

@ -21,7 +21,7 @@ hero:
alt: VitePress alt: VitePress
features: features:
- icon: <span class="memo"></span> - icon: <span class="write"></span>
title: 콘텐츠에 집중 title: 콘텐츠에 집중
details: 마크다운으로만 아름다운 문서 사이트를 쉽게 만들기. details: 마크다운으로만 아름다운 문서 사이트를 쉽게 만들기.
- icon: <span class="vite"></span> - icon: <span class="vite"></span>
@ -30,7 +30,7 @@ features:
- icon: <span class="vue"></span> - icon: <span class="vue"></span>
title: Vue로 커스터마이징 title: Vue로 커스터마이징
details: Vue 문법과 컴포넌트를 마크다운에서 직접 사용하거나 Vue로 커스텀 테마를 구축. details: Vue 문법과 컴포넌트를 마크다운에서 직접 사용하거나 Vue로 커스텀 테마를 구축.
- icon: <span class="rocket"></span> - icon: <span class="fast"></span>
title: 웹사이트를 빠르게 제공 title: 웹사이트를 빠르게 제공
details: 정적 HTML로 빠른 초기 로딩, 클라이언트 측 라우팅을 통한 빠른 탐색. details: 정적 HTML로 빠른 초기 로딩, 클라이언트 측 라우팅을 통한 빠른 탐색.
--- ---

@ -21,7 +21,7 @@ hero:
alt: VitePress alt: VitePress
features: features:
- icon: <span class="memo"></span> - icon: <span class="write"></span>
title: Foco no seu conteúdo title: Foco no seu conteúdo
details: Cria sites de documentação belos e sem esforço apenas com markdown. details: Cria sites de documentação belos e sem esforço apenas com markdown.
- icon: <span class="vite"></span> - icon: <span class="vite"></span>
@ -30,7 +30,7 @@ features:
- icon: <span class="vue"></span> - icon: <span class="vue"></span>
title: Personalize com Vue title: Personalize com Vue
details: Use sintaxe e componentes Vue diretamente em markdown, ou construa temas personalizados com Vue. details: Use sintaxe e componentes Vue diretamente em markdown, ou construa temas personalizados com Vue.
- icon: <span class="rocket"></span> - icon: <span class="fast"></span>
title: Entregue Sites Rápidos title: Entregue Sites Rápidos
details: Carregamento inicial rápido com HTML estático, navegação rápida com roteamento no lado do cliente. details: Carregamento inicial rápido com HTML estático, navegação rápida com roteamento no lado do cliente.
--- ---

@ -21,7 +21,7 @@ hero:
alt: VitePress alt: VitePress
features: features:
- icon: <span class="memo"></span> - icon: <span class="write"></span>
title: Сосредоточьтесь на своем контенте title: Сосредоточьтесь на своем контенте
details: Легко создавайте красивые сайты с документацией, используя только Markdown. details: Легко создавайте красивые сайты с документацией, используя только Markdown.
- icon: <span class="vite"></span> - icon: <span class="vite"></span>
@ -30,7 +30,7 @@ features:
- icon: <span class="vue"></span> - icon: <span class="vue"></span>
title: Настройка с помощью Vue title: Настройка с помощью Vue
details: Используйте синтаксис Vue и компоненты прямо в Markdown или создавайте собственные темы с помощью Vue. details: Используйте синтаксис Vue и компоненты прямо в Markdown или создавайте собственные темы с помощью Vue.
- icon: <span class="rocket"></span> - icon: <span class="fast"></span>
title: Быстрый запуск веб-сайтов title: Быстрый запуск веб-сайтов
details: Быстрая начальная загрузка с помощью статического HTML, быстрая навигация после загрузки с помощью маршрутизации на стороне клиента. details: Быстрая начальная загрузка с помощью статического HTML, быстрая навигация после загрузки с помощью маршрутизации на стороне клиента.
--- ---

@ -21,7 +21,7 @@ hero:
alt: VitePress alt: VitePress
features: features:
- icon: <span class="memo"></span> - icon: <span class="write"></span>
title: 专注内容 title: 专注内容
details: 只需 Markdown 即可轻松创建美观的文档站点。 details: 只需 Markdown 即可轻松创建美观的文档站点。
- icon: <span class="vite"></span> - icon: <span class="vite"></span>
@ -30,7 +30,7 @@ features:
- icon: <span class="vue"></span> - icon: <span class="vue"></span>
title: 使用 Vue 自定义 title: 使用 Vue 自定义
details: 直接在 Markdown 中使用 Vue 语法和组件,或者使用 Vue 组件构建自定义主题。 details: 直接在 Markdown 中使用 Vue 语法和组件,或者使用 Vue 组件构建自定义主题。
- icon: <span class="rocket"></span> - icon: <span class="fast"></span>
title: 速度真的很快! title: 速度真的很快!
details: 采用静态 HTML 实现快速的页面初次加载,使用客户端路由实现快速的页面切换导航。 details: 采用静态 HTML 实现快速的页面初次加载,使用客户端路由实现快速的页面切换导航。
--- ---

Loading…
Cancel
Save