Merge branch 'refs/heads/dev'

README.md

@@ -5,13 +5,13 @@
         <img src="https://img.shields.io/badge/-Vue3-34495e?logo=vue.js" />
     </a>
     <a href="https://pinia.vuejs.org/zh/" target="_blank">
-        <img src="https://img.shields.io/badge/-Vite4-646cff?logo=vite&logoColor=white" />
+        <img src="https://img.shields.io/badge/-Vite5-646cff?logo=vite&logoColor=white" />
     </a>
     <a href="https://www.typescriptlang.org/zh/" target="_blank">
         <img src="https://img.shields.io/badge/-TypeScript5-blue?logo=typescript&logoColor=white" />
     </a>
     <a href="https://eslint.org/" target="_blank">
-        <img src="https://img.shields.io/badge/-ESLint8-4b32c3?logo=eslint&logoColor=white" />
+        <img src="https://img.shields.io/badge/-ESLint9-4b32c3?logo=eslint&logoColor=white" />
     </a>
     <a href="https://pnpm.io/" target="_blank">
         <img src="https://img.shields.io/badge/-pnpm8-F69220?logo=pnpm&logoColor=white" />
@@ -35,7 +35,7 @@
 
 ## 简介
 
-- **uni-app Vue3 Vite4 pinia2 TypeScript 基础框架**
+- **uni-app Vue3 Vite5 pinia2 TypeScript 基础框架**
 - cli 创建的 Vue3/Vite 项目 与 使用 HBuilderX 导入插件 的包有差异,请直接访问 [开源地址](https://gitee.com/h_mo/uniapp-vue3-vite-ts-template)
 - 访问[uniapp 插件](https://ext.dcloud.net.cn/plugin?id=8559)
 - 如有问题请加群【[872378674](http://qm.qq.com/cgi-bin/qm/qr?_wv=1027&k=T3PX4_sWeMXeFGWF6EZJLXABSNyStYR0&authKey=EYXATTrGpmyowFxk9xtX6T7FIRbOF7brLd9uODxl%2B6jIbGfWQGW869V1hkPSlGYT&noverify=0&group_code=872378674)】交流
@@ -44,11 +44,9 @@
 
 - 框架完全基于 Vue3 SFC `<script setup>` 写法,不支持 Vue2;
 - 可用于学习与交流;
-- 目前测试 H5、微信小程序,APP(Android),支付宝小程序通过;
+- 目前测试: H5、APP(Android)、微信|支付宝|抖音小程序通过;
-- 其他平台暂未测试,后续会增加;
 - 如发现问题或建议可在评论区留言, 或提[Issues](https://gitee.com/h_mo/uniapp-vue3-vite-ts-template/issues)及[PR](https://gitee.com/h_mo/uniapp-vue3-vite-ts-template/pulls),会及时处理;
 - 如有需求亦可在评论区留言,或在此项目基础上增加;
-- [代码规范 & 详细解释 husky、prettier、eslint、lint-staged 的作用和使用](https://blog.csdn.net/cookcyq__/article/details/125457031)
 
 ## 特性
 
@@ -231,5 +229,3 @@ npx @dcloudio/uvm 3.7.2.20230217-alpha
 13. devDependencies： 开发依赖修改
 14. review：复习，回顾
 15. strengthen: 加强，巩固
-
-##

package.json

@@ -65,7 +65,7 @@
     "@dcloudio/uni-stacktracey": "3.0.0-alpha-4020220240624001",
     "@dcloudio/uni-vue-devtools": "3.0.0-alpha-4020220240624001",
     "@dcloudio/vite-plugin-uni": "3.0.0-alpha-4020220240624001",
-    "@iconify/vue": "^4.1.2",
+    "@iconify/json": "^2.2.206",
     "@types/crypto-js": "^4.2.2",
     "@types/lodash-es": "^4.17.12",
     "@types/node": "^20.14.8",

src/components/Iconify/index.vue

@@ -0,0 +1,39 @@
+<script lang="ts" setup name="Iconify">
+interface Props {
+  icon: string
+  size?: string | number
+  color?: string
+}
+/**
+ * @name Iconify
+ * @desc 图标
+ * @docs https://iconify.design/docs/icon-components/vue/
+ * @example <Iconify icon="ant-design:home-outlined" />
+ */
+const props = withDefaults(defineProps<Props>(), {
+  size: 'inherit',
+  color: 'inherit',
+});
+
+const emits = defineEmits(['click']);
+function click() {
+  emits('click');
+}
+
+function isNumber(str: string | number): boolean {
+  return !Number.isNaN(Number(str));
+}
+</script>
+
+<template>
+  <view class="iconify-icon" :class="[props.icon]" @click="click" />
+</template>
+
+<style lang="scss" scoped>
+.iconify-icon {
+  display: inline-block;
+  line-height: 1;
+  font-size: v-bind('isNumber(props.size) ? `${props.size}px` : props.size');
+  color: v-bind('props.color');
+}
+</style>

src/pages/demo/index.vue

@@ -1,10 +1,20 @@
 <script lang="ts" setup>
+import Iconify from '@/components/Iconify/index.vue';
+
 const demo = ref('Demo');
 </script>
 
 <template>
-  <view class="pt-36 text-lg font-medium flex justify-center items-center">
+  <view class="pt-36 text-lg font-medium flex flex-col justify-center items-center">
     {{ demo }}
+    <view class="mt-30px">
+      iconify 组件
+    </view>
+    <view class="mt-30px center flex flex-row gap-10px">
+      <Iconify icon="i-ri-alipay-fill" size="32" color="blue" />
+      <Iconify icon="i-ri-settings-5-line" size="48" color="orange" />
+      <Iconify icon="i-ri-wechat-fill" size="32" color="green" />
+    </view>
   </view>
 </template>