feat(framework): update list

Author: ZakaryCode

blog/2021-08-13-Taro-3.3.md

@@ -118,7 +118,7 @@ npm i -g @tarojs/cli
 
 ### Taro 3.4
 
-下一个 minor 版本，我们会考虑把对各个 Web 开发框架的支持逻辑拆分为对应的插件。让开发者可以以插件的形式为 Taro 拓展支持一门新的开发框架，我们会运用此能力进行对 **PReact** 的支持，希望能进一步减少用户的包体积。
+下一个 minor 版本，我们会考虑把对各个 Web 开发框架的支持逻辑拆分为对应的插件。让开发者可以以插件的形式为 Taro 拓展支持一门新的开发框架，我们会运用此能力进行对 **Preact** 的支持，希望能进一步减少用户的包体积。
 
 ### 鸿蒙应用 && OpenHarmony
 

blog/2022-05-19-Taro-3.5-beta.md

@@ -194,7 +194,7 @@ npm i -g @tarojs/cli@beta
   "@pmmmwh/react-refresh-webpack-plugin": "0.5.4",
   "react-refresh": "0.11.0"
   ```
-- PReact 项目需要添加 devDenpendencies：
+- Preact 项目需要添加 devDenpendencies：
 
       ```jsx
       "@prefresh/webpack": "^3.2.3",

blog/2022-07-26-Taro-3.5.md

@@ -205,9 +205,9 @@ npm i @tarojs/cli
 npm i @pmmmwh/react-refresh-webpack-plugin react-refresh --save-dev
 ```
 
-### 2.3 使用 PReact 的项目
+### 2.3 使用 Preact 的项目
 
-- **【Breaking】**使用 PReact 的项目需要额外安装 `@prefresh/webpack` 和 `@prefresh/babel-plugin`：
+- **【Breaking】**使用 Preact 的项目需要额外安装 `@prefresh/webpack` 和 `@prefresh/babel-plugin`：
 
 ```bash
 npm i @prefresh/webpack @prefresh/babel-plugin --save-dev

docs/README.mdx

@@ -11,7 +11,7 @@ import News from './news'
 
 ## 简介
 
-**Taro** 是一个开放式跨端跨框架解决方案，支持使用 React/Vue/Nerv/Svelte 等框架来开发 [微信](https://mp.weixin.qq.com/) / [京东](https://mp.jd.com/?entrance=taro) / [百度](https://smartprogram.baidu.com/) / [支付宝](https://mini.open.alipay.com/) / [字节跳动](https://developer.open-douyin.com/) / [QQ](https://q.qq.com/) / [飞书](https://open.feishu.cn/document/uYjL24iN/ucDOzYjL3gzM24yN4MjN) 小程序 / H5 / RN 等应用。
+**Taro** 是一个开放式跨端跨框架解决方案，支持使用 React/Vue/Nerv 等框架来开发 [微信](https://mp.weixin.qq.com/) / [京东](https://mp.jd.com/?entrance=taro) / [百度](https://smartprogram.baidu.com/) / [支付宝](https://mini.open.alipay.com/) / [字节跳动](https://developer.open-douyin.com/) / [QQ](https://q.qq.com/) / [飞书](https://open.feishu.cn/document/uYjL24iN/ucDOzYjL3gzM24yN4MjN) 小程序 / H5 / RN 等应用。
 
 现如今市面上端的形态多种多样，Web、React Native、微信小程序等各种端大行其道。当业务要求同时在不同的端都要求有所表现的时候，针对不同的端去编写多套代码的成本显然非常高，这时候只编写一套代码就能够适配到多端的能力就显得极为需要。
 
@@ -23,31 +23,32 @@ Taro 3 可以支持转换到 H5、ReactNative 以及任意小程序平台。
 
 目前官方支持转换的平台如下：
 
-- [H5](https://developer.mozilla.org/zh-CN/docs/Web?from=taro)
-- [ReactNative](https://reactnative.dev/?from=taro)
-- [微信小程序](https://developers.weixin.qq.com/miniprogram/dev/framework/?from=taro)
-- [京东小程序](https://mp.jd.com/?from=taro)
-- [百度智能小程序](https://smartprogram.baidu.com/developer/index.html?from=taro)
-- [支付宝小程序](https://opendocs.alipay.com/mini/developer/getting-started?from=taro)
-- [抖音小程序](https://developer.open-douyin.com/docs/resource/zh-CN/mini-app/introduction/overview?from=taro)
-- [QQ 小程序](https://q.qq.com/wiki/develop/miniprogram/frame/?from=taro)
-- [钉钉小程序](https://open.dingtalk.com/document/org/develop-org-mini-programs?from=taro)
-- [企业微信小程序](https://developers.weixin.qq.com/miniprogram/dev/devtools/qywx-dev.html?from=taro)
-- [支付宝 IOT 小程序](https://opendocs.alipay.com/iot/multi-platform/vcs0fv?from=taro)
-- [飞书小程序](https://open.feishu.cn/document/uYjL24iN/uMjNzUjLzYzM14yM2MTN?from=taro)
+- [<img title="H5" src={require('@site/static/img/platform/h5.png').default} className="icon_platform" width="25px" /> H5](https://developer.mozilla.org/zh-CN/docs/Web?from=taro)
+- [<img title="React Native" src={require('@site/static/img/platform/rn.png').default} className="icon_platform" width="25px" /> React Native](https://reactnative.dev/?from=taro)
+- [<img title="微信小程序" src={require('@site/static/img/platform/weapp.png').default} className="icon_platform" width="25px" /> 微信小程序](https://developers.weixin.qq.com/miniprogram/dev/framework/?from=taro)
+- [<img title="京东小程序" src={require('@site/static/img/platform/jd.png').default} className="icon_platform" width="25px" /> 京东小程序](https://mp.jd.com/?from=taro)
+- [<img title="百度小程序" src={require('@site/static/img/platform/swan.png').default} className="icon_platform" width="25px" /> 百度智能小程序](https://smartprogram.baidu.com/developer/index.html?from=taro)
+- [<img title="支付宝小程序" src={require('@site/static/img/platform/alipay.png').default} className="icon_platform" width="25px" /> 支付宝小程序](https://opendocs.alipay.com/mini/developer/getting-started?from=taro)
+- [<img title="抖音小程序" src={require('@site/static/img/platform/tt.png').default} className="icon_platform" width="25px" /> 抖音小程序](https://developer.open-douyin.com/docs/resource/zh-CN/mini-app/introduction/overview?from=taro)
+- [<img title="QQ 小程序" src={require('@site/static/img/platform/qq.png').default} className="icon_platform" width="25px" /> QQ 小程序](https://q.qq.com/wiki/develop/miniprogram/frame/?from=taro)
+- [<img title="钉钉小程序" src={require('@site/static/img/platform/ding-talk.png').default} className="icon_platform" width="25px" /> 钉钉小程序](https://open.dingtalk.com/document/org/develop-org-mini-programs?from=taro)
+- [<img title="企业微信小程序" src={require('@site/static/img/platform/wework.png').default} className="icon_platform" width="25px" /> 企业微信小程序](https://developers.weixin.qq.com/miniprogram/dev/devtools/qywx-dev.html?from=taro)
+- [<img title="支付宝 IOT 小程序" src={require('@site/static/img/platform/alipay.png').default} className="icon_platform" width="25px" /> 支付宝 IOT 小程序](https://opendocs.alipay.com/iot/multi-platform/vcs0fv?from=taro)
+- [<img title="飞书小程序" src={require('@site/static/img/platform/lark.png').default} className="icon_platform" width="25px" /> 飞书小程序](https://open.feishu.cn/document/uYjL24iN/uMjNzUjLzYzM14yM2MTN?from=taro)
 
 ### 框架支持
 
-在 Taro 3 中可以使用完整的 **React / Vue / Vue3 / Nerv** 开发体验，具体请参考：
+在 Taro 3 中可以使用完整的 [**<img title="react" src={require('@site/static/img/framework/react.png').default} className="icon_platform" width="25px" /> React**](https://react.dev/) / [**<img title="vue" src={require('@site/static/img/framework/vue.png').default} className="icon_platform" width="25px" /> Vue**](https://vuejs.org/) / [**<img title="preact" src={require('@site/static/img/framework/preact.png').default} className="icon_platform" width="25px" /> Preact**](https://preactjs.com/) / [**<img title="svelte" src={require('@site/static/img/framework/svelte.png').default} className="icon_platform" width="25px" /> Svelte**](https://svelte.dev/) / [**<img title="nerv" src={require('@site/static/img/framework/nerv.png').default} className="icon_platform" width="25px" /> Nerv**](https://github.com/NervJS/nerv) 开发体验，具体请参考：
 
 - [基础教程——React](./react-overall)
 - [基础教程——Vue](./vue-overall)
 - [基础教程——Vue3](./vue3)
+- [基础教程——Preact](./preact)
 
 <Tabs
   defaultValue="React"
   values={[
-    {label:  <ReactIcon />, value: 'React'},
+    {label: <ReactIcon />, value: 'React'},
     {label: <VueIcon />, value: 'Vue'}
   ]}>
 <TabItem value="React">

docs/come-from-miniapp.mdx

@@ -89,7 +89,7 @@ Taro v3.6.3+ 推荐使用以下方式获取：
 <Tabs
   defaultValue="React"
   values={[
-    {label:  <ReactIcon />, value: 'React'},
+    {label: <ReactIcon />, value: 'React'},
     {label: <VueIcon />, value: 'Vue'}
   ]}>
 <TabItem value="React">
@@ -142,7 +142,7 @@ Taro v3.6.2 及以下版本可以通过以下方式获取（需要对应小程
 <Tabs
   defaultValue="React"
   values={[
-    {label:  <ReactIcon />, value: 'React'},
+    {label: <ReactIcon />, value: 'React'},
     {label: <VueIcon />, value: 'Vue'}
   ]}>
 <TabItem value="React">

docs/custom-tabbar.mdx

@@ -140,7 +140,7 @@ const tabbar = Taro.getTabBar(pageObj)
 <Tabs
   defaultValue="React"
   values={[
-    {label:  <ReactIcon />, value: 'React'},
+    {label: <ReactIcon />, value: 'React'},
     {label: <VueIcon />, value: 'Vue'}
   ]}>
 <TabItem value="React">

docs/folder.md

@@ -61,7 +61,7 @@ title: 目录结构
 | app.css       | 否   | 小程序全局样式 |
 | app.config.js | 是   | 小程序全局配置 |
 
-代码示例请根据你选择的框架进行查看：[React](./react-overall), [PReact](./preact), [Vue](./vue-overall), [Vue3](./vue3)。
+代码示例请根据你选择的框架进行查看：[React](./react-overall), [Preact](./preact), [Vue](./vue-overall), [Vue3](./vue3)。
 
 #### 1. 小程序全局配置
 

docs/hybrid.mdx

@@ -40,7 +40,7 @@ export default {
 <Tabs
   defaultValue="React"
   values={[
-    {label:  <ReactIcon />, value: 'React'},
+    {label: <ReactIcon />, value: 'React'},
     {label: <VueIcon />, value: 'Vue'}
   ]}>
 <TabItem value="React">
@@ -100,7 +100,7 @@ export default class Index extends Component {
 <Tabs
   defaultValue="React"
   values={[
-    {label:  <ReactIcon />, value: 'React'},
+    {label: <ReactIcon />, value: 'React'},
     {label: <VueIcon />, value: 'Vue'}
   ]}>
 <TabItem value="React">
@@ -172,7 +172,7 @@ export default class Index extends Component {
 <Tabs
   defaultValue="React"
   values={[
-    {label:  <ReactIcon />, value: 'React'},
+    {label: <ReactIcon />, value: 'React'},
     {label: <VueIcon />, value: 'Vue'}
   ]}>
 <TabItem value="React">
@@ -207,7 +207,7 @@ export default class Index extends Component {
 <Tabs
   defaultValue="React"
   values={[
-    {label:  <ReactIcon />, value: 'React'},
+    {label: <ReactIcon />, value: 'React'},
     {label: <VueIcon />, value: 'Vue'}
   ]}>
 <TabItem value="React">

docs/optimized.mdx

@@ -131,7 +131,7 @@ component.setData({
 <Tabs
   defaultValue="React"
   values={[
-    {label:  <ReactIcon />, value: 'React'},
+    {label: <ReactIcon />, value: 'React'},
     {label: <VueIcon />, value: 'Vue'}
   ]}>
 <TabItem value="React">
@@ -200,7 +200,7 @@ Taro 3 提供了 `Taro.preload` API，可以把需要预加载的内容作为参
 <Tabs
   defaultValue="React"
   values={[
-    {label:  <ReactIcon />, value: 'React'},
+    {label: <ReactIcon />, value: 'React'},
     {label: <VueIcon />, value: 'Vue'}
   ]}>
 <TabItem value="React">
@@ -239,7 +239,7 @@ mounted () {
 <Tabs
   defaultValue="React"
   values={[
-    {label:  <ReactIcon />, value: 'React'},
+    {label: <ReactIcon />, value: 'React'},
     {label: <VueIcon />, value: 'Vue'}
   ]}>
 <TabItem value="React">

docs/page-config.mdx

@@ -42,7 +42,7 @@ export default definePageConfig({
 <Tabs
   defaultValue="React"
   values={[
-    {label:  <ReactIcon />, value: 'React'},
+    {label: <ReactIcon />, value: 'React'},
     {label: <VueIcon />, value: 'Vue'}
   ]}>
 <TabItem value="React">