docs: improve images performance

.github/FUNDING.yml

@@ -1,4 +1,4 @@
 # These are supported funding model platforms
 
 open_collective: vexip-ui
-custom: https://vexipui.com/wechat-sponsor.png
+custom: [https://vexipui.com/sponsor-wechat.webp, https://vexipui.com/sponsor-alipay.webp]

README.md

@@ -1,6 +1,6 @@
 <p align="center">
   <a href="https://www.vexipui.com/" target="_blank" rel="noopener noreferrer">
-    <img src="./docs/public/vexip-ui.svg" width="180" style="width: 180px;" />
+    <img src="./docs/public/vexip-ui.svg" alt="Vexip UI" width="180" style="width: 180px;" />
   </a>
 </p>
 
@@ -12,7 +12,7 @@
 
 <p align="center">
   <a href="https://www.npmjs.com/package/vexip-ui" target="_blank">
-    <img src="https://img.shields.io/github/package-json/v/vexip-ui/vexip-ui" alt="npm version"/>
+    <img src="https://img.shields.io/github/package-json/v/vexip-ui/vexip-ui" alt="NPM version"/>
   </a>
 </p>
 
@@ -73,14 +73,22 @@ If you take maybe some bugs, please use the [Vexip UI Playground](https://playgr
 
 Welcome to join us! You can check out the [Contributing Guide](./CONTRIBUTING.md) to learn how to get started.
 
-Or you can sponsor me to help the project grow better!
+Or you can sponsor us to help the project grow better!
+
+WeChat:
+
+<img src="./docs/public/sponsor-wechat.webp" alt="WeChat payment" style="width: 240px;" />
+
+Alipay:
+
+<img src="./docs/public/sponsor-alipay.webp" alt="Alipay payment" style="width: 240px;" />
 
 ## Contributors
 
 Thanks for all their contributions!
 
 <a href="https://github.com/vexip-ui/vexip-ui/graphs/contributors">
-  <img src="https://contrib.rocks/image?repo=vexip-ui/vexip-ui" />
+  <img src="https://contrib.rocks/image?repo=vexip-ui/vexip-ui" alt="contributors" />
 </a>
 
 ## Environment

README.zh-CN.md

@@ -1,6 +1,6 @@
 <p align="center">
   <a href="https://www.vexipui.com/" target="_blank" rel="noopener noreferrer">
-    <img src="./docs/public/vexip-ui.svg" width="180" style="width: 180px;" />
+    <img src="./docs/public/vexip-ui.svg" width="180" alt="Vexip UI" style="width: 180px;" />
   </a>
 </p>
 
@@ -12,7 +12,7 @@
 
 <p align="center">
   <a href="https://www.npmjs.com/package/vexip-ui" target="_blank">
-    <img src="https://img.shields.io/github/package-json/v/vexip-ui/vexip-ui" alt="npm version"/>
+    <img src="https://img.shields.io/github/package-json/v/vexip-ui/vexip-ui" alt="npm 版本"/>
   </a>
 </p>
 
@@ -72,29 +72,29 @@ yarn add vexip-ui
 你也可以扫下方的二维码加入技术交流 QQ 群（点击也可以）：
 
 <a href="https://jq.qq.com/?_wv=1027&k=5KlA84xG" target="_blank">
-  <img
-    src="./docs/public/vexip-ui-group-qrcode.png"
-    style="width: 240px;"
-  />
+  <img src="./docs/public/vexip-ui-qq-group-qrcode.webp" alt="Vexip UI QQ 群" style="width: 240px;" />
 </a>
 
 ## 贡献
 
 欢迎你的加入！你可以查阅 [贡献指南](./CONTRIBUTING.md) 了解如何开始。
 
-或者你可以赞助我以帮助项目更好的发展！
+或者你可以赞助我们以帮助项目更好的发展！
 
-<img
-  src="./docs/public/wechat-sponsor.png"
-  style="width: 240px;"
-/>
+微信：
+
+<img src="./docs/public/sponsor-wechat.webp" alt="微信收款" style="width: 240px;" />
+
+支付宝：
+
+<img src="./docs/public/sponsor-alipay.webp" alt="支付宝收款" style="width: 240px;" />
 
 ## 贡献者
 
 感谢他们的所做的一切贡献！
 
 <a href="https://github.com/vexip-ui/vexip-ui/graphs/contributors">
-  <img src="https://contrib.rocks/image?repo=vexip-ui/vexip-ui" />
+  <img src="https://contrib.rocks/image?repo=vexip-ui/vexip-ui" alt="贡献者" />
 </a>
 
 ## 兼容环境

docs/.vitepress/theme/components/page-footer.vue

@@ -64,6 +64,10 @@ const lastUpdated = computed(() => {
     height: 72px;
     padding: 16px 0;
     margin-top: 20px;
+
+    .vxp-linker__icon {
+      padding-top: 1px;
+    }
   }
 
   .vxp-linker {

docs/.vitepress/theme/components/page-links.vue

@@ -99,7 +99,7 @@ const next = computed(() => {
       <span v-if="next.origin && locale !== 'en-US'" style="margin-left: 6px">
         {{ next.origin }}
       </span>
-      <Icon :icon="ChevronRight" style="margin-left: 3px"></Icon>
+      <Icon :icon="ChevronRight" style="padding-top: 1px; margin-left: 3px"></Icon>
     </Linker>
   </div>
 </template>
@@ -113,6 +113,10 @@ const next = computed(() => {
 
   .vxp-linker {
     height: 100%;
+
+    &__icon {
+      padding-top: 1px;
+    }
   }
 }
 </style>

docs/en-US/component/icon.md

@@ -4,7 +4,7 @@ Vexip UI uses `@vexip-ui/icons` as the icon library, which is based on the free
 
 You can look up the icons directly on this [page](https://fontawesome.com/search?m=free) (they have always named the icons weird).
 
-Of course you can place any svg content directly under the Icon component slot.
+Of course you can place any svg content directly under the Icon component slot. If you want to change internal icons of components, please refer to [Global Config](/en-US/guide/global-config#internal-icons).
 
 :::warning
 All built-in icons of Font Awesome are scaled by 0.85x by default in this library, the original icons are a bit large.

docs/en-US/guide/global-config.md

@@ -198,4 +198,4 @@ Finally, let's take a look at an actual effect after configuration:
 
 <IconDemo></IconDemo>
 
-> The details code can be viewed [here](https://github.com/vexip-ui/vexip-ui/blob/main/docs/common/icon-demo).
+> The details code can be viewed [here](https://github.com/vexip-ui/vexip-ui/blob/main/docs/.vitepress/theme/components/icon-demo.vue).

docs/en-US/guide/name-origin.md

@@ -8,22 +8,22 @@ That's really a very simple motive.
 
 One day I tried to arrange some letters randomly on the paper, and found that V-e-x-i-p arranged five letters in this way looks very comfortable, and it was quite easy to write. See there also is natural pronunciation, so I decided to use it immediately!
 
-Although this word is newly created and has no original meaning, we hope to give it the meaning of "pursuit of beauty", because it is beautiful in itself, and we also hope to try our best to pursue beauty in this project.
+Although this word is newly created and has no original meaning, we hope to give it the meaning of **'pursuit of beauty'**, because it is beautiful in itself, and we also hope to try our best to pursue beauty in this project.
 
 ## Appearance In Different Fonts
 
-![vexip-ui-text-1](/vexip-ui-text-1.png)
+![vexip-ui-text-1](/vexip-ui-text-1.webp)
 
-![vexip-ui-text-2](/vexip-ui-text-2.png)
+![vexip-ui-text-2](/vexip-ui-text-2.webp)
 
-![vexip-ui-text-3](/vexip-ui-text-3.png)
+![vexip-ui-text-3](/vexip-ui-text-3.webp)
 
-![vexip-ui-text-4](/vexip-ui-text-4.png)
+![vexip-ui-text-4](/vexip-ui-text-4.webp)
 
-![vexip-ui-text-5](/vexip-ui-text-5.png)
+![vexip-ui-text-5](/vexip-ui-text-5.webp)
 
-![vexip-ui-text-6](/vexip-ui-text-6.png)
+![vexip-ui-text-6](/vexip-ui-text-6.webp)
 
-![vexip-ui-text-7](/vexip-ui-text-7.png)
+![vexip-ui-text-7](/vexip-ui-text-7.webp)
 
-![vexip-ui-text-8](/vexip-ui-text-8.png)
+![vexip-ui-text-8](/vexip-ui-text-8.webp)

docs/en-US/guide/vexip-ui.md

@@ -36,7 +36,7 @@ All components supported in modern browsers, support of neerly two or three vers
 ## Latest Version
 
 <a href="https://www.npmjs.com/package/vexip-ui" target="_blank">
-  <img src="https://img.shields.io/github/package-json/v/vexip-ui/vexip-ui" alt="npm version"/>
+  <img src="https://img.shields.io/github/package-json/v/vexip-ui/vexip-ui" alt="NPM version"/>
 </a>
 
 > The version on the top-left is the version of the component library that the docs depends on when it is built, which may be inconsistent with the latest version.
@@ -63,12 +63,15 @@ If you take maybe some bugs, please use the [Vexip UI Playground](https://playgr
 
 Welcome to join us! You can check out the [Contributing Guide](https://github.com/vexip-ui/vexip-ui/blob/main/CONTRIBUTING.md) to learn how to get started.
 
-Or you can sponsor me to help the project grow better!
+Or you can sponsor us to help the project grow better!
 
-<img
-  src="/wechat-sponsor.png"
-  style="width: 240px;"
-/>
+WeChat:
+
+<img src="/sponsor-wechat.webp" alt="WeChat payment" style="width: 240px;" />
+
+Alipay:
+
+<img src="/sponsor-alipay.webp" alt="Alipay payment" style="width: 240px;" />
 
 ## Contributors
 

docs/zh-CN/component/icon.md

@@ -4,7 +4,7 @@ Vexip UI 使用 `@vexip-ui/icons` 作为图标库，该图标库基于 [Font Awe
 
 你可以直接在这个 [页面](https://fontawesome.com/search?m=free) 查询图标（他们给图标起名一直很奇怪）。
 
-当然你完全可以直接在 Icon 组件下放置任何 svg 内容。
+当然你完全可以直接在 Icon 组件下放置任何 svg 内容。如果你想要更换组件内置的图标，请参考 [全局配置](/zh-CN/guide/global-config.html#内置图标)。
 
 :::warning
 图标库内置的所有 Font Awesome 的图标默认都是 0.85x 倍缩放的，原始的图标着实有点大。

docs/zh-CN/guide/global-config.md

@@ -199,4 +199,4 @@ app.use(install, {
 
 <IconDemo></IconDemo>
 
-> 具体的代码可以浏览 [此处](https://github.com/vexip-ui/vexip-ui/blob/main/docs/common/icon-demo)。
+> 具体的代码可以浏览 [此处](https://github.com/vexip-ui/vexip-ui/blob/main/docs/.vitepress/theme/components/icon-demo.vue)。

docs/zh-CN/guide/name-origin.md

@@ -8,22 +8,22 @@
 
 某天我在纸上尝试随意排列组合一些字母，过程中发现 V-e-x-i-p 这样排列五个字母让人看起来非常的舒服，并且写起来也颇为顺手，仔细一看还有一个自然的读音，于是当即决定就用它了！
 
-尽管这个单词它是新造出来的，原先并不具有什么含义，不过我们希望赋予它 “追求美” 的寓意，因为它本身就很好看，同时我们在这个项目上也希望尽力地去追求美。
+尽管这个单词它是新造出来的，原先并不具有什么含义，不过我们希望赋予它 **“追求美”** 的寓意，因为它本身就很好看，同时我们在这个项目上也希望尽力地去追求美。
 
 ## 不同字体下的外观
 
-![vexip-ui-text-1](/vexip-ui-text-1.png)
+![vexip-ui-text-1](/vexip-ui-text-1.webp)
 
-![vexip-ui-text-2](/vexip-ui-text-2.png)
+![vexip-ui-text-2](/vexip-ui-text-2.webp)
 
-![vexip-ui-text-3](/vexip-ui-text-3.png)
+![vexip-ui-text-3](/vexip-ui-text-3.webp)
 
-![vexip-ui-text-4](/vexip-ui-text-4.png)
+![vexip-ui-text-4](/vexip-ui-text-4.webp)
 
-![vexip-ui-text-5](/vexip-ui-text-5.png)
+![vexip-ui-text-5](/vexip-ui-text-5.webp)
 
-![vexip-ui-text-6](/vexip-ui-text-6.png)
+![vexip-ui-text-6](/vexip-ui-text-6.webp)
 
-![vexip-ui-text-7](/vexip-ui-text-7.png)
+![vexip-ui-text-7](/vexip-ui-text-7.webp)
 
-![vexip-ui-text-8](/vexip-ui-text-8.png)
+![vexip-ui-text-8](/vexip-ui-text-8.webp)

docs/zh-CN/guide/vexip-ui.md

@@ -36,7 +36,7 @@ Vexip（发音为 `/ˈvesɪp/` <AudioButton src="/vexip-pron.wav"></AudioButton>
 ## 最新版本
 
 <a href="https://www.npmjs.com/package/vexip-ui" target="_blank">
-  <img src="https://img.shields.io/github/package-json/v/vexip-ui/vexip-ui" alt="npm version"/>
+  <img src="https://img.shields.io/github/package-json/v/vexip-ui/vexip-ui" alt="NPM 版本"/>
 </a>
 
 > 左上方的版本为文档构建时依赖的组件库版本，可能与最新的不一致，因为文档的更新往往会落后一些。
@@ -62,22 +62,22 @@ yarn add vexip-ui
 你也可以扫下方的二维码加入技术交流 QQ 群（点击也可以）：
 
 <a href="https://jq.qq.com/?_wv=1027&k=5KlA84xG" target="_blank">
-  <img
-    src="/vexip-ui-group-qrcode.png"
-    style="width: 240px;"
-  />
+  <img src="/vexip-ui-qq-group-qrcode.webp" alt="Vexip UI QQ 群" style="width: 240px;" />
 </a>
 
 ## 贡献
 
 欢迎你的加入！你可以查阅 [贡献指南](https://github.com/vexip-ui/vexip-ui/blob/main/CONTRIBUTING.md) 了解如何开始。
 
-或者你可以赞助我以帮助项目更好的发展！
+或者你可以赞助我们以帮助项目更好的发展！
 
-<img
-  src="/wechat-sponsor.png"
-  style="width: 240px;"
-/>
+微信：
+
+<img src="/sponsor-wechat.webp" alt="微信收款" style="width: 240px;" />
+
+支付宝：
+
+<img src="/sponsor-alipay.webp" alt="支付宝收款" style="width: 240px;" />
 
 ## 贡献者